Gulp 前端的扁平化管理艺术

Project

前端开发一直处于不断地更新和迭代的苦逼状态，而前端的工程管理也各式各样，以前我有使用过 Grunt 进行管理一些 css、js，但最近 Gulp 的横空出世，像一股清流，让前端的世界变得异常清晰起来。我也开始从 Grunt 转向 Gulp 的怀抱。

前端的发现一直是处于快速的发展，各种第三方库层出不穷，这让我们有种疲于奔命感觉，项目也不断地在重构中。2014 ~ 2015年期间，NodeJS 的火爆现象促使了前端各项管理工具的繁荣发展，涌现了各种管理工具，例如：webpack、grunt、gulp 等等。

项目一开始是使用 grunt 来管理 scss 的编译和生成，后面逐渐地将 gulp 替代了 grunt，其实两者的处理方式是一样的，但 gulp 相对于 grunt 还是比较的活跃，而且更具有新时代的气息，故改用 gulp，免除后续更新迭代和维护难问题。项目是使用 golang 语言中的 beego web 框架进行开发的，所以 gulp 只是单纯地用来管理 scss、js。

安装与使用

在使用 gulp 之前，我们需要安装 nodejs，而 nodejs里面包含了一个非常出色的 npm 包管理工具，安装 NodeJS，如果有 homebrew，则可以通过 brew install node 此命令进行安装，安装完成之后，运行 node -v 查看是否安装成功。node 安装成功后，检查 npm 是否成功安装，运行 npm -v 命令，会看到 npm 的版本信息，否则安装不成功。

前面步骤都完成后，然后安装 gulp

1
$ npm install --global gulp

我一般习惯用全局进行开发，所以很少使用开发环境 -save-dev，下面就开始 gulp 的扁平化管理，前端简易化工作流程的利器。

package.json 用了管理各种 gulp 插件，以下是 package 的栗子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{
  "name": "项目名称",
  "version": "版本号",
  "devDependencies": {
    "gulp": "^3.8.5",
    "gulp-autoprefixer": "^0.0.8",
    "gulp-changed": "^1.0.0",
    "gulp-compass": "^2.0.2",
    "gulp-concat": "~2.4.1",
    "gulp-csso": "^0.2.9",
    "gulp-if": "^1.2.1",
    "gulp-jshint": "^1.6.3",
    "gulp-load-plugins": "^0.5.3",
    "gulp-minify-html": "~1.0.2",
    "gulp-size": "^1.0.0",
    "gulp-uglify": "~1.0.1",
    "gulp-plumber": "~1.0.1",
    "jshint-stylish": "^0.4.0",
    "streamqueue": "~1.1.0",
    "gulp-cachebust": "~0.0.5",
    "gulp-replace": "~0.5.4",
    "gulp-delete-file": "~1.0.2"
  },
  "license": "MIT"
}

里面包含了我们经常会使用到的一些插件，这根据我们真实使用情况而改变，但 gulp、gulp-load-plugins，是必不可少的，gulp-load-plugins 可以帮助方便地调用各类插件，省去我们写一大堆前缀。

那如何写一个 gulp 任务呢？先举个栗子吧。

1
2
3
4
5
6
7
8
9
10
11
12
'use strict';

// 引入组件
var $ = require('gulp-load-plugins')();

gulp.task('jshint', function () {
  return gulp.src([
      'static/js/*.js',
    ])
    .pipe($.jshint())
    .pipe($.jshint.reporter('jshint-stylish'))
});

上面的栗子就创建了一个 jshint js 文件检查任务，通过 gulp jshint 即可启动该任务。还有其他很多好玩的就需要根据实际情况去开发了。

后续

从上面我们已经掌握 gulp 的基本工作原理，这样后续根据我们的需要来扩展 gulp task 来满足项目的复杂需求。其实前端有点很重要的是对 css/js 的缓存管理，如何避免升级版本时，由于 css、js 的缓存问题造成各种各样的问题，是前端开发首要解决的问题。

在 gulp 的世界，有个插件 gulp-cachebust 可以很好地解决这个问题，它会将 css、js 文件名后加上 8 位 MD5，这样很好的解决了浏览器的缓存问题。下面我们就创建一个 cachebust 任务：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
'use strict';

// 引入组件
var $ = require('gulp-load-plugins')();
var CacheBuster = require('gulp-cachebust');
var cachebust = new CacheBuster();

//获取 js 文件名
gulp.task('js-prod', function () {
    return gulp.src('static/sourcejs/**/*.js')
        .pipe(uglify({
            mangle: false
        }))
        .pipe(cachebust.resources())
        .pipe(gulp.dest('static/js'));
});

// 替换 view 中的 js 引用为新的文件名引用
gulp.task('cachebust', ['js-prod'], function () {
    return gulp.src('static/view/*.tpl')
        .pipe(cachebust.references())
        .pipe(gulp.dest('static/view/'));
});

当项目发布时，我们只需要运行 gulp cachebust 即可处理 js 缓存问题。

以上只是前端扁平化管理的其中一项，还有很多很好玩的等着我们一起去挖掘和使用，gulp 会让前端的工作变得更容易管理和维护，当然也还有其他更出色的管理工具，但 gulp 也不失为一种不错的选择。