gulp--基于流的前端自动化构建工具

gulp是基于流的前端自动化构建工具

易用 Gulp相比Grunt更简洁，而且遵循代码优于配置策略，维护Gulp更像是写代码。
高效 Gulp相比Grunt更有设计感，核心设计基于Unix流的概念，通过管道连接，不需要写中间文件。
高质量 Gulp的每个插件只完成一个功能，这也是Unix的设计原则之一，各个功能通过流进行整合并完成复杂的任务。例如：Grunt的imagemin插件不仅压缩图片，同时还包括缓存功能。他表示，在Gulp中，缓存是另一个插件，可以被别的插件使用，这样就促进了插件的可重用性。目前官方列出的有673个插件。
易学 Gulp的核心API只有5个，掌握了5个API就学会了Gulp，之后便可以通过管道流组合自己想要的任务。
流 使用Grunt的I/O过程中会产生一些中间态的临时文件，一些任务生成临时文件，其它任务可能会基于临时文件再做处理并生成最终的构建后文件。而使用Gulp的优势就是利用流的方式进行文件的处理，通过管道将多个任务和操作连接起来，因此只有一次I/O的过程，流程更清晰，更纯粹。
代码优于配置 维护Gulp更像是写代码，而且Gulp遵循CommonJS规范，因此跟写Node程序没有差别。

一个简单的Gulpfile.js配置格式

 var gulp = require('gulp');
    var jshint = require('gulp-jshint');
    var concat = require('gulp-concat');
    var rename = require('gulp-rename');
    var uglify = require('gulp-uglify');

    // Lint JS
    gulp.task('lint', function() {
    return gulp.src('src/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
    });

    // Concat & Minify JS
    gulp.task('minify', function(){
        return gulp.src('src/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
    });

    // Watch Our Files
    gulp.task('watch', function() {
        gulp.watch('src/*.js', ['lint', 'minify']);
    });

    // Default
    gulp.task('default', ['lint', 'minify', 'watch']);

Grunt和Gulp存在的意义是，他可以编写复杂的项目构建脚本。特别是 Gulp，可以通过 JS 代码进行一些精细的定制。不过至少给我们一个很大的启发：简单的项目构建完全可以通过几行 npm 配置来解决。
很多项目其实构建起来比较简单，只要简单的打包编译JS和CSS就行了， npm 本来就提供了一个 scripts 配置，很多时候完全可以通过几个npm简单的命令就可以，完全用不着Grunt和Gulp。

比如我最近用JS写一个五子棋的AI程序，我的项目中就没有用Grunt或者Gulp，而是直接写了几行 npm 配置就搞定：

"watch": {
    "less": "less/main.less",
    "js": "js/*.js"
  },
"scripts": {
    "less": "lessc less/main.less > dist/main.css",
    "js": "browserify js/main.js > dist/main.js && browserify js/computer.js > dist/computer.js",
    "watch": "npm-watch",
    "test": "mocha tests/*.js"
  },

编译 less 和 js ，单元测试，watch 模式都有，而且就是简单的几行配置就搞定了。有兴趣的童鞋可以在这里看项目的源码：https://github.com/lihongxun945/gobang

总结下我的观点是：对于动辄200行以上复杂配置，还需要各种定制的项目来说，推荐使用 Gulp。 对于像我上面提到的那么简单的配置的项目，推荐通过 npm 脚本来实现。

很多技术都像一个金字塔，顶层的各种新潮的技术很多都是依赖下一层的，看起来不那么潮甚至有些土的技术，而顶层的新技术往往两三年就被淘汰殆尽，底层的老掉牙的技术却一直坚挺的存在。
所以Gulp Webpack之类的东西我们还是要学要用，但是如果连一个npm脚本都不会写，那么自己的技术就像一个根基不稳的高楼一样摇摇欲坠。