gulp初体验

gulp是一个前端自动化工具，可以帮助我们完成一些自动的构建。随着前端技术大跨步地发展，现在的浏览器上运行的HTML、CSS和JavaScript很多都已经不是手写的了，HTML是通过jade生成的，css是通过sass生成的，JavaScript的生态更是丰富，有es6、TypeScript、CoffeeScript等。而gulp作为自动化工具，可以在你修改完代码保存时自动完成构建并刷新浏览器，极大地提高开发效率。

gulp包含非常多的功能，本篇博客主要讨论如何使用gulp自动压缩 js 和 css 代码。

安装gulp

首先打开命令行或终端，进入到项目的根目录。

1、全局安装 gulp

$ npm install --global gulp

2、作为项目的开发依赖（devDependencies）安装

$ npm install --save-dev gulp

3、创建gulpfile.js。先创建一个空白文件吧。

使用uglify压缩js

gulp-uglify插件用来将js文件压缩为一行，很大程度上减小了文件的大小，加快了浏览器加载的速度。需要先安装gulp-uglify插件

$ npm install gulp-uglify --save-dev

修改gulpfile.js文件如下：

var gulp = require('gulp'),    uglify = require("gulp-uglify");gulp.task('js', function () {    return gulp.src("js/**/*.js")        .pipe(uglify())        .pipe(gulp.dest('dest/js'));});

运行js任务

$ gulp js

就会将js下面的所有子文件夹中的所有.js文件压缩并输出到dest/js文件夹中，保留原有的目录结构和文件名。

使用sass压缩css文件

gulp-sass插件用来压缩sass和css文件。需要先安装gulp-sass插件。

$ npm install gulp-sass --save-dev

安装完成后，将gulpfile.js修改为如下内容

var gulp = require('gulp'),    uglify = require("gulp-uglify"),    sass = require('gulp-sass');gulp.task('js', function () {    return gulp.src("js/**/*.js")        .pipe( uglify())        .pipe(gulp.dest('dest/js'));});gulp.task('sass', function () {    return gulp.src("css/*.css")        .pipe(sass({outputStyle:'compressed'}))        .pipe(gulp.dest('dest/css'));});

先通过sass = require('gulp-sass')声明了sass变量，并加入了一个名叫sass的任务。

运行sass任务

$ gulp sass

就会将css文件夹下的css文件压缩到一行并输出到dest/css文件夹。

设置环境参数

将js和css压缩为一行，在生产环境上会使页面更快地加载，当然是好事，但是开发调试时就会很麻烦。gulp允许根据nodejs的环境参数来动态地改变行为。假设我们希望仅在生产环境才压缩文件，否则，就把文件原封不动地输出到目标目录。

var env = process.env.NODE_ENV || 'dev';

定义一个evn变量，读取NODE_ENV参数，如果该参数没有设置，则默认为dev，即开发环境。

我们还需要安装gulp-if插件。

$ npm install gulp-if --save-dev

声明变量

var gulpif = require("gulp-if")

然后修改我们的task。首先是js task

gulp.task('js', function () {    return gulp.src("js/**/*.js")        .pipe(gulpif(env === 'production', uglify()))        .pipe(gulp.dest('dest/js'));});

修改后的js task，只有当生产环境时才会执行uglify，否则就直接输出js文件了。

下面修改sass task

gulp.task('sass', function () {    var config = {};    if (env === 'production') {        config.outputStyle = 'compressed';    }    return gulp.src("css/*.css")        .pipe(sass(config))        .pipe(gulp.dest('dest/css'));});

通过下面的命令来设置NODE_ENV为生产环境或开发环境。

set NODE_ENV=productionset NODE_ENV=dev

然后在运行gulp js和gulp sass后，gulp会根据环境参数来选择对应的操作，只有当环境参数为production时，才会压缩js和css文件。此时，gulpfile.js的完整代码如下

var gulp = require('gulp'),    uglify = require("gulp-uglify"),    gulpif = require("gulp-if"),    sass = require('gulp-sass');var env = process.env.NODE_ENV || 'dev';gulp.task('js', function () {    return gulp.src("js/**/*.js")        .pipe(gulpif(env === 'production', uglify()))        .pipe(gulp.dest('dest/js'));});gulp.task('sass', function () {    var config = {};    if (env === 'production') {        config.outputStyle = 'compressed';    }    return gulp.src("css/*.css")        .pipe(sass(config))        .pipe(gulp.dest('dest/css'));});

批量运行任务

我们到目前为止一共定义了两个任务，执行不同的任务需要分别运行，如果任务很多的话，会很不方便。我们可以把所有的任务都整合到default任务重，只需要在最下面加入以下代码就可以了

gulp.task('default', ['js', 'sass']);

现在运行gulp命令，无需指定某个任务，就会执行这两个任务。

监听文件变化并自动执行任务

到目前为止，我们每次修改完文件之后，还需要手动地运行gulp命令，这也不是真正的自动化。gulp提供了一个watch方法，能够检测文件变化并自动执行对应的任务。

gulp.task('watch', function () {    gulp.watch('js/**/*.js', ['js']);    gulp.watch('css/*.css', ['sass']);});

当js文件修改后，就会运行js任务，当css文件修改后就会运行sass任务。
当然，这个watch任务也需要加入到default任务的列表中，这样就能通过gulp命令同时执行这三个任务，并且开始检测文件的变化了。

gulp.task('default', ['js', 'sass', 'watch']);

最终的gulpfile.js文件是这样子的

var gulp = require('gulp'),    uglify = require("gulp-uglify"),    gulpif = require("gulp-if"),    sass = require('gulp-sass');//使用 set NODE_ENV=production 命令修改node环境参数var env = process.env.NODE_ENV || 'dev';gulp.task('js', function () {    return gulp.src("js/**/*.js")        .pipe(gulpif(env === 'production', uglify()))        .pipe(gulp.dest('dest/js'));});gulp.task('sass', function () {    var config = {};    if (env === 'production') {        config.outputStyle = 'compressed';    }    return gulp.src("css/*.css")        .pipe(sass(config))        .pipe(gulp.dest('dest/css'));});gulp.task('watch', function () {    gulp.watch('js/**/*.js', ['js']);    gulp.watch('css/*.css', ['sass']);});gulp.task('default', ['js', 'sass', 'watch']);