上周腾讯TGideas团队来公司分享了一个gulp前端构建利器，自个儿玩了一下，于是有了此文。

号称新一代前端构建利器的gulp是基于流的，代码优于配置的构建工具。虽然已经熟悉用grunt来配置构建，但用了gulp之后感觉这个gulp似乎更胜一筹。

关于如何全局安装gulp，该项目官网已经有详细的介绍，这里不多赘述，直接进入主题。

利用npm创建package.json文件

如果对package.json文件已经比较熟悉了，那就没有必要利用这个”引导式”的方式创建package.json，这里是针对”懒人”(比如我…)比较好的方式。切换到项目根目录下面，在终端敲入下面代码:

npm init

接下来只需按照提示一步步填写，一分钟不到就搞定了。

安装所需的插件并且自动写入package.json文件

在npm官网或者到gulp的插件官网可以查询你所需要的插件关键词，假设输入imagemin，可以看到下载量最多并且属于gulp的一般就是你想要的那个了，然后在终端敲入以下代码下载插件并且自动保存到package.json文件的devDependencies里面去，避免自己手动输入。

npm install --save-dev gulp-imagemin

如果mac或者linux系统的可能会提示权限不足，暴力一点sudo解决。

创建gulpfile.js文件

这个是gulp的核心配置文件，配置模式也很简单，基本是下面这种模式

gulp.task('任务名称', function () {
    return gulp.src('任务路径')
        .pipe()
        .pipe()
        ...
        .dest()
});

简单的gulpfile.js例子

这里给了自己写的一个简单gulpfile.js的配置，项目结构如下：

root
    css
        images
            xxx.png
            yyy.png
            ...
        xxx.css
        yyy.css
        ...
    html
        xxx.html
        yyy.html
        ...
    images
        xxx.png
        yyy.jpg
        ...
    js
        xxx.js
        yyy.js
        lib
            jquery.js
            jquery.xxx.js

gulpfile.js内容如下(项目结构如果不一样，只需修改配置路径以及输出路径即可)：

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var stylish = require('jshint-stylish');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
var minifyCSS = require('gulp-minify-css');
var concat = require('gulp-concat');
var rename = require('gulp-rename');

//统一配置路径
var path = {
    scriptLint : './js/*.js',
    scriptUglify : './js/**/*.js',
    styles : './css/*.css',
    cssImage : './css/images/*',
    images : './images/*'
};

//统一配置输出路径
var dest = {
    js : './dist/js',
    css : './dist/css',
    cssImage : './dist/css/images',
    images : './dist/images',
    html : './dist/html'
};

//全自动执行任务
gulp.task('build', function () {
    gulp.run('lint', 'uglify', 'imagemin', 'css', 'css-imagemin');
});

//js语法检查
gulp.task('lint', function () {
    return gulp.src(path.scriptLint)
        .pipe(jshint())
        .pipe(jshint.reporter(stylish))
        .pipe(jshint.reporter('fail'))      //若语法错误过多，自动抛错处理
});

//js压缩输出到指定文件夹,若需合并再压缩参考下面css合并压缩任务
gulp.task('uglify', function () {
    gulp.src(path.scriptUglify)
        .pipe(uglify())
        .pipe(gulp.dest(dest.js))
});

//image压缩输出到指定文件夹
gulp.task('imagemin', function () {
    return gulp.src(path.cssImage)
        .pipe(imagemin({
            progessive : true,
            svgoPlugins : [{removeViewBox : false}],
            use : [pngquant()]
        }))
        .pipe(gulp.dest(dest.images))
});

//合并压缩css到指定文件夹
gulp.task('css', function () {
    gulp.src(path.styles)
        .pipe(concat('style.css'))
        .pipe(gulp.dest(dest.css))
        .pipe(rename('style.min.css'))
        .pipe(minifyCSS({
            keepBreaks : true       //是否保持换行,默认为false
        }))
        .pipe(gulp.dest(dest.css))
});

//css目录下面的images压缩输出到指定文件夹
gulp.task('css-imagemin', function () {
    return gulp.src(path.images)
        .pipe(imagemin({
            progessive : true,
            svgoPlugins : [{removeViewBox : false}],
            use : [pngquant()]
        }))
        .pipe(gulp.dest(dest.cssImage))
});

运行

在根目录下面敲入下面代码，一次执行全自动化流程:

gulp build

当然你也可以单独执行某个任务：

gulp imagemin

写在最后

例子中的gulpfile.js只是一个最简单的demo，没有加入watch文件监听功能，其它额外的功能也没有，具体所需什么功能可以到npm官网进行查询，总之“授之以鱼，不如授之予渔”。