前端自动化构建之Gulp的使用（学习笔记）

Gulp是一款基于流的前端自动化构建工具，类似于任务管理器，可以自动化的帮助我们完成开发过程中大量的重复工作，如预处理语言的编译，js、css、html压缩混淆，图片尺寸优化等。其中文网的网址为 https://www.gulpjs.com.cn/，官网地址为 https://gulpjs.com/。下面来介绍Gulp在项目中的使用步骤。

一、Gulp使用的基本步骤

1、全局安装gulp命令行工具

在安装和使用gulp之前，必须先确保node环境已经配置成功，具体步骤可参考文章 Node环境的配置与安装。完成node环境的安装之后，我们可以在任意目录下，打开cmd，键入命令-> npm install gulp -g 来进行gulp的全局安装。可以通过命令-> gulp -v来验证gulp是否安装成功。如下图所示：

图片描述

2、生成项目配置文件

我们在当前的项目文件目录下，打开cmd，键入命令-> npm init,可以全部回车即可在项目文件夹的根目录下生成一个package.json的配置文件。

3、将gulp作为项目的开发依赖进行安装

在当前的项目文件目录下，打开cmd，键入命令-> npm install gulp --save-dev。（因为gulp包当中即包含工具，也包含一些编程的API，所以我们需要将gulp作为项目的开发依赖安装到项目本地。）

4、创建任务主文件

我们在项目文件夹的根目录下创建一个gulp的任务主文件，其文件名固定为gulpfile.js。gulp用于帮助我们机械化的完成一些重复的工作，其机制就是将重复的工作抽象成一个个的任务，故我们需要在主文件gulpfile.js当中进行任务的注册。其基本代码结构为：

var gulp = require('gulp');      // 载入gulp模块
gulp.task('default',function(){  //注册一个任务
    //当gulp执行default这个任务时，会自动执行该函数。
});

二、Gulp的使用示例

1、使用gulp完成文件自动化拷贝与监听

当我们需要将开发阶段的源码目录src中的文件自动拷贝至发布上线阶段的文件目录dist当中，并且监听源文件的变化，并及时自动更新拷贝文件。gulpfile.js当中的示例代码如下所示：

var gulp = require('gulp');      
gulp.task('copy',function(){    //注册一个拷贝的任务
    gulp.src('./src/index.html')
        .pipe(gulp.dest('./dist/'));
});
//当执行copy这个任务时，即可将src目录下的index.html文件拷贝至dist文件夹当中，文件名不变。
gulp.task('listen',function(){   //注册一个监听的任务
    gulp.watch('./src/index.html',['copy']);
//监听src目录下的index.html文件，一旦文件发生变化并保存时，即可执行任务数组当中的copy任务。
});

在完成任务的注册之后，即可在项目文件夹下，打开cmd，键入命令-> gulp listen 即可。

2、使用gulp自动完成less文件的编译、压缩与合并

gulp可以配合许多插件（plugins）来帮助我们完成这些重复性任务，当前支持的插件列表可以见官网 https://gulpjs.com/plugins/ 。例如我们可以使用插件gulp-less来完成less文件的编译成css文件，使用插件gulp-cssmin来完成css文件的自动压缩，使用插件gulp-concat-css来完成多个css文件的合并，使用插件gulp-rename来完成css文件的重命名。
首先在安装这些插件，在项目文件夹下，打开cmd，键入命令-> npm install gulp-less gulp-cssmin gulp-concat-css gulp-rename --save-dev。再在gulpfile.js当中进行插件模块包的引入与任务的注册，示例代码如下所示：

var gulp = require('gulp');
var less = require('gulp-less');
var cssmin = require('gulp-cssmin');
var concat = require('gulp-concat-css');
var rename = require('gulp-rename');      
gulp.task('style',function(){
    gulp.src('./src/style/*.less')     //获取到style目录下所有的less文件
        .pipe(less())                   // 完成less文件编译，成为css文件
        .pipe(concat('all.css'))       // 将多个css文件合并为一个all.css文件
        .pipe(cssmin())                // 完成css文件的压缩
        .pipe(rename({suffix:'.min'})) //重命名文件名为all.min.css
        .pipe(gulp.dest('./dist/style/')); //将all.css文件复制到dist文件夹的style目录下，文件名不变
});

在完成任务的注册之后，即可在项目文件夹下，打开cmd，键入命令-> gulp style 即可。