Gulp-基础介绍

Gulp是一款基于Node.js的自动化构建工具，可以帮助开发者自动完成重复性的任务，例如文件压缩、图片优化、编译Sass/less、自动添加CSS前缀等。

安装Gulp

要使用Gulp，需要先在本地安装Node.js和npm，npm是Node.js的包管理工具，安装完Node.js后，直接在终端输入以下命令来安装gulp：

npm install -g gulp

创建Gulp项目

在终端进入项目目录，然后运行以下命令，创建一个新的npm项目：

npm init

接着安装gulp和gulp-cli：

npm install gulp gulp-cli --save-dev

创建一个gulpfile.js文件

在项目根目录下创建gulpfile.js文件，这是Gulp的配置文件，所有的任务配置都在这个文件中。

配置任务

在gulpfile.js文件中添加任务，以下是一个简单的示例：

const gulp = require('gulp');

gulp.task('hello', function() {
  console.log('Hello, Gulp!');
});

在终端输入以下命令运行该任务：

gulp hello

运行结果：

[13:20:00] Using gulpfile ~/Projects/gulpfile.js
[13:20:00] Starting 'hello'...
Hello, Gulp!
[13:20:00] Finished 'hello' after 8.46 ms

为任务添加依赖

任务之间可能存在依赖关系，例如在打包之前需要先进行文件压缩。可以通过gulp.series或gulp.parallel来创建组合任务，以下是一个简单的示例：

const gulp = require('gulp');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');

gulp.task('js', function() {
    return gulp.src('src/*.js')
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/'));
});

gulp.task('default', gulp.series('js'));

监听文件变化

Gulp还提供了watch方法，可以监听文件变化并执行相应的任务，以下是一个简单的示例：

const gulp = require('gulp');
const sass = require('gulp-sass');

gulp.task('sass', function() {
  return gulp.src('src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'));
});

gulp.task('watch', function(){
    gulp.watch(['src/scss/*.scss'], gulp.series('sass'));
})

gulp.task('default', gulp.series('sass', 'watch'));

以上就是Gulp的基础介绍，更多的Gulp插件和用法可以在官方网站(https://gulpjs.com/)中查找。