Gulp 的安装与使用

Gulp 是基于 流 的自动化构建系统，是前端开发过程中对代码进行构建的工具；Gulp 不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用 Gulp，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

Gulp 是基于 nodeJS 的自动任务运行器， 它能自动化地完成 javascript / sass / less / html / image / css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成等，并监听文件在改动后重复指定的这些步骤。在实现上，Gulp 借鉴了 Unix 操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。

随着前端诸如 webpack，rollup，vite 的发展，Gulp 感觉似乎好像被取代了。其实并没有，只不过它从台前退居到了幕后。就好比作者本人负责的一个官网使用的是 Koa2 + EJS 的实现方案，针对静态资源的处理就是使用 Gulp 来进行的。

官方相关网站：

1. gulp.js 官方网站
2. Gulp 插件列表（官方）
3. gulp.js 中文网

一、安装gulp

确保安装 Node.js 以及 NPM 安装包

查看已安装 Node 的版本号：

node -v

查看已安装 NPM 的版本号：

npm -v

如果没有安装，请至 nodejs.org/ 下载安装，npm 将会随着安装包一起安装。

npm install -g gulp

全局环境安装Gulp。

• npm 是安装 node 模块的工具，执行 install 命令
• -g 表示在全局环境安装，以便任何项目都能使用它
• gulp 是将要安装的 node 模块的名字

gulp -v

查看所安装的gulp模块的版本号，确认是否安装成功。

npm install --save-dev gulp

将Gulp安装到项目本地。

npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev

安装相关依赖来满足下列需求：

• gulp-jshint：检查Javascript
• gulp-sass：编译Sass（或Less之类的）文件
• gulp-concat：合并Javascript
• gulp-uglify：压缩JavaScript
• gulp-rename：重命名Javascript

二、创建 gulpfile.js

在需要执行gulp操作的某个项目文件夹中，创建gulpfile.js脚本文件，用于配置所需执行的任务列表。

// 引入 gulp
var gulp = require('gulp');

// 引入组件
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// 检查脚本
// Link任务会检查src/目录下的js文件有没有报错或警告。
gulp.task('lint', function() {
   return gulp.src('./src/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

// 编译Sass
// Sass任务会编译scss/目录下的scss文件，并把编译完成的css文件保存到/css目录中。
gulp.task('sass', function() {
  return gulp.src('./scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist'));
});

// 合并，压缩文件
// scripts任务会合并src/目录下得所有的js文件并输出到dist/目录
// 然后gulp会重命名、压缩合并的文件，也输出到dist/目录。
gulp.task('scripts', function() {
  return gulp.src('./src/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist'))
    .pipe(rename('all.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./dist'));
});

// 默认任务
// 使用.run()方法关联和运行上面定义的任务
// 使用.watch()方法去监听指定目录的文件变化，当有文件变化时，会运行回调定义的其他任务。
gulp.task('default', function(){

  gulp.run('lint', 'sass', 'scripts');

  // 监听脚本文件
  gulp.watch('./src/*.js', function(){
    gulp.run('lint');
  });

  // 监听Scss文件
  gulp.watch('./scss/*.scss', function(){
    gulp.run('sass');
  });
});

三、执行任务

执行任务之前，需要将CMD窗口的目录切换至gulpfile.js文件所在的目录。

执行默认的Gulp任务：

gulp

上面的语句相当于:

gulp default

当然，也可以执行Gulpfile.js中的任意任务，比如：执行sass任务：

gulp sass

四、卸载插件

卸载已安装的插件，只需要在项目工作的根目录下，执行如下所示的命令行即可：

npm uninstall gulp-uglify