Web前端自动化构建（二）——Gulp入门

全名：《Web前端自动化构建 Gulp、Bower和Yeoman开发指南》
作者：Stefan Banumgartner【奥】
译者：谈博文

---

Gulp是用JavaScript编写、运行在Node.js上的构建工具。

配置Gulp

Created with Raphaël 2.1.2 安装Gulp 创建Gulpfile 使用Gulp插件处理task

1 安装 Gulp

1. 1 安装Gulp 命令行接口

Gulp命令行接口，简称Gulp CLI，需要全局安装，使得Gulp能够在终端、bash和命令行提示符中直接运行。
首先，检查是否正确安装了Node.js：

 node -v

如果已经安装了Node，检查Node.js的包管理器NPM，

npm -v

在确定Node.js和NPM都已经正确安装后，安装Gulp CLI：

npm install -g gulp-cli

运行下面命令，确保Gulp CLI安装成功。

gulp -v

输出：

CLI version 2.0.1

安装成功。

1.2. 安装本地Gulp

全局安装的Gulp是Gulp CLI。它的作用是检查本地Gulp是否可用和启动本地Gulp。
本地Gulp位于本地的JavaScript项目的node_modules目录下，包含了Gulpfile所需的全部函数和API。
执行如下命令：

npm init
npm install --save-dev gulp

此时，package.json文件如下：

{
  "name": "gulp_sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.0",
  }
}

检查gulp版本，发生如下变化：

CLI version 2.0.1
Local version 4.0.0

增加了local version，注意： 确保本地安装的gulp版本至少为Gulp 4。

2. 创建Gulpfile

Gulpfile是包含了所有安装指令的js文件，安装指令包含一系列被打包成task（任务）的命令。

const gulp = require('gulp');

gulp.task('testGulp', async() => {           //hello world task，仅用于测试
   await console.log('Hello World!');
});

运行gulp testGulp,输出结果如下：

[15:58:13] Using gulpfile D:\Auto_build_book\ch_03\gulpfile.js
[15:58:13] Starting 'testGulp'...
Hello World!
[15:58:13] Finished 'testGulp' after 2.24 ms

3. 使用Gulp插件处理task

• gulp.src和gulp.dest能够创建可读流和可写流，用来把文件从文件系统的一个地方复制到另一个地方。
• 使用gulp-uglify来进行js文件的混淆和压缩；
• 使用gulp-concat合并js文件`；
• 使用gulp-jshint进行js的代码检查，注意要同时安装jshint和gulp-jshint；
• 使用gulp-less来编译.less文件；
• 使用gulp-clean-css对编译好的css文件进行压缩；
• 使用gulp-autoprefixer添加css的浏览器前缀；

最终的gulpfile.js如下：

const gulp = require('gulp');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
const jshint = require('gulp-jshint');
const less = require('gulp-less');
const minifycss = require('gulp-clean-css');  
const prefix = require('gulp-autoprefixer');

gulp.task('scripts', () => {            //用来合并和压缩js文件
    return gulp.src(['app/scripts/**/*.js', '!app/scripts/vendor/**/*.js'])
        .pipe(concat('main.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/scripts'));
});

gulp.task('styles', () => {             //用来编译和压缩“less”文件
    return gulp.src('./app/styles/main.less')        // gulp.src :可读流
        .pipe(less())
        .pipe(minifycss())
        .pipe(prefix())                  //运行Autoprefixer自动添加浏览器前缀
        .pipe(gulp.dest('dist/styles'));             //gulp.dest :可写流
});

gulp.task('test', () => {
    return gulp.src('./app/**/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(jshint.reporter('fail'))
});

现在，我们已经有了一个简单的gulpfile来处理代码，但是它还不能提供一个成熟的开发环境，下一章将会扩展这个gulpfile。