项目构建利器之gulp.js

在前端项目构建工具里面，最火的当属grunt，在我看来目前在前端项目里使用最多的也就grunt了吧，然而最近出现了了个备受关注的项目gulp.js，让我们来看看是什么原因让gulp这么火爆呢

关于grunt

你往往会听到各种程序猿，攻城湿推荐用grunt来一站式构建并布署项目，测试、检查、合并、压缩、格式化、部署文件生成，还有监听文件的改变

确实在使用grunt之后，整个项目和构建和管理都要变得轻松很多，项目的构建，开发，测试，发布都是一站式完成，但是在构建Gruntfile.js时，远没有想像中的那么简单

简单想了一下grunt的不足：

1. 插件很难遵守单一责任原则，每个插件都不得不做了一些额外的工作
2. 插件的配置很难统一，一个Gruntfile.js里存在各种各样插件的配置，整个文件往往显得杂乱无章
3. 学习和使用的成本相对较高，插件的使用也是

总之，grunt这种基于配置式的让人感觉太复杂了

gulp.js

不同grunt的配置式，正如gulpjs自己所说的那样，gulp是基于流式构建的，不再像grunt那样需要一大堆的配置文件，你完全可以像写代码一样去写构建文件

具体使用方式可以上gulpjs官方文档上查看，下面只是作一个简单的介绍，相信了解gulp之后，你就不会再想着去用grunt了

1.gulp的安装

npm install -g gulp

2.把 gulp 安装为开发依赖组件

npm install --save-dev gulp

3.在项目的根目录创建gulpfile.js文件

var gulp = require('gulp');
//默认执行的任务
gulp.task('default', function() {
  // place code for your default task here
});

4.执行gulp

gulp

OK，上面当然看不出gulp的任何优势，上面只是一个构建gulp任务的基本步骤，我们接下看看gulp任务的定义，你就会发现gulp的魅力所在

我们来写一个简单的任务来比较gulp和grunt的差别,主要功能为清理，拷贝，压缩

grunt的实现

grunt.initConfig({
  //清空build目录
  clean: {
    files: ['build']
  },
  //拷贝src
  copy: {
    build: {
      expand: true,
      cwd: 'src',
      src: ["./**/*.js", "./**/*.css"],
      dest: 'build'
    }
  },
  //拷贝压缩生成-min文件
  uglify: {
    build: {
      files: [{
        expand: true,
        cwd: 'src',
        src: '**/*.js',
        dest: 'build/',
        ext: '-min.js'
      }]
    }
  },
  //拷贝压缩生成-min文件
  cssmin: {
    options: {
      keepSpecialComments: 0 /* 移除 CSS 文件中的所有注释 */
    },
    minify: {
      expand: true,
      cwd: 'src',
      src: ['**/*.css'],
      dest: 'build/',
      ext: '-min.css'
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
//注册默认任务
grunt.registerTask('default', ['clean', 'copy', 'uglify', 'cssmin']);

gulp的实现

var gulp    = require('gulp');
var clean   = require('gulp-clean');
var uglify  = require('gulp-uglify');
var cssmin  = require('gulp-minify-css');
var rename  = require('gulp-rename');

//清空build目录
gulp.task('clean', function(){
  gulp.src('build/*',{read: false})
    .pipe(clean());
});
//拷贝src
gulp.task('copy', function() {
  gulp.src(["src/**/*.js", "src/**/*.css"])
    .pipe(gulp.dest('build/'));
});
//拷贝压缩生成-min文件
gulp.task('compress', function(){
  gulp.src('src/**/*.js')
    .pipe(uglify())
    .pipe(rename({suffix: '-min'}))
    .pipe(gulp.dest('build/'));
});
//压缩css文件
gulp.task('cssmin', function(){
  gulp.src('src/**/*.css')
    .pipe(cssmin())
    .pipe(rename({suffix: "-min"}))
    .pipe(gulp.dest('build/'));
});
//定义默认任务
gulp.task('default', ['clean'], function(){
  gulp.start('less', 'copy', 'compress', 'cssmin');
});

没有了grunt的那一堆配置文件，代码读起来是不是也很符合平时的习惯，每个插件的功能是不是足够单一，是不是觉得很爽，这就是gulp的魅力所在！

总结

用了一遍gulp之后就不再想用grunt了，目前gulp的插件已经基本上能满足平时的需求了，相信gulp的社区会更加强大起来的

关于插件的开发可以参考官方的文档来

参考文档

1. gulp.js官网
2. gulp.js官方文档