Gulp、Grunt构建工具

在Gulp中建立一个库从磁盘gulp.src读取源文件并经过磁盘管道写回内容到gulp.dest，能够理解成只是将文件复制到另外一个目录。

var gulp = require('gulp');
gulp.task('build', function () {
  return gulp
    .src('./sample.js')
    .pipe(gulp.dest('./build'));
});

复制文件完成了，可是它没有压缩这个JS文件。要作到这一点，你必须使用一个Gulp插件。在这种状况下，你可使用gulp-uglify，流行的UglifyJS压缩编绎插件

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

流使可让您添加更多的插件，而只须要读取和写入磁盘一次。你也能够指定缓冲器中内容的大小。须要注意的是，若是你在压缩以前添加它，那么你获得的大小是unminified。

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

Gulp的核心API只有5个，掌握了5个API就学会了Gulp，以后即可以经过管道流组合本身想要的任务。

• gulp.task(name[, deps], fn)：注册任务
• name 是任务名称；deps 是可选的数组，其中列出须要在本任务运行要执行的任务；fn 是任务体，这是 gulp.js 的核心了，须要花时间吃透它，详情见此。
• gulp.src(globs[, options])：指明源文件路径
• 用过 Grunt 的话，globs 必定不会陌生，这里没什么变化；options 是可选的，具体请查看 gulp.js API
• gulp.dest(path)：指明任务处理后的目标输出路径
• gulp.watch(glob[, options], tasks)／gulp.watch(glob[, options, cb])：监视文件的变化并运行相应的任务。你没看错，watch 做为核心 API 出如今 gulp.js 里了，具体用法仍是要多看文档，不过接下来咱们会演示简单的例子。

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
  
// 语法检查
gulp.task('jshint', function () {
    return gulp.src('src/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});
  
// 合并文件以后压缩代码
gulp.task('minify', function (){
     return gulp.src('src/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dist'))
        .pipe(uglify())
        .pipe(rename('all.min.js'))
        .pipe(gulp.dest('dist'));
});
  
// 监视文件的变化
gulp.task('watch', function () {
    gulp.watch('src/*.js', ['jshint', 'minify']);
});
  
// 注册缺省任务
gulp.task('default', ['jshint', 'minify', 'watch']);

 

Grunt和Gulp区别：

grunt优势

grunt的功能说来简单，就是管理一系列的Task。大部分的Task都是第三方的插件，安装好对应的NPM包，再 loadNpmTasks就能够用了。它能使程序员使用JavaScript构建编绎工具时，几乎不费吹灰之力。你只须要寻找合适的插件，阅读它们的文档，而后安装和配置它。有基础足够大的插件库，几乎不须要开发本身的编译任务。

grunt缺点：

1.插件很难遵照单一责任原则。由于 Grunt 的 API 设计缺憾，使得许多插件不得不负责一些和其主要任务无关的事情。好比说要对处理后的文件进行改名操做，你可能使用的是 uglify 插件，也有可能使用的是 concat 插件（取决于工做流的最后一个环节是谁）。

2.用插件作一些原本不须要件来作的事情。由于 Grunt 提供了统一的 CLI 入口，子任务由插件定义，由 CLI 命令来调用执行，所以哪怕是很简单的外部命令（好比说运行 karma start）都得有一个插件来负责封装它，而后再变成 Grunt CLI 命令的参数来运行，画蛇添足。试图用配置文件完成全部事，结果就是混乱不堪

3.若是你有一个明显复杂的编绎过程，它可能会变得过于冗长。当开发一段时间之后，它每每很难将编绎过程做为一个总体。一旦你编绎流程任务到达两位数，几乎能够保证，你会发现本身不得不在多个目标(Targets)中跑同一个Task，以便你可以正确地执行任务流。因为任务是须要声明配置的，你也很难弄清楚任务真正的执行次序。须要为每一个任务（或者每一个编绎流）编写一份独立的配置文件，供你的团队使用。

4.Gruntfile维护起来困难。配置和运行分离: 配置Task和调用它们的地方离得很远；每一个插件作的事太多:每一个Task的结果必须写到磁盘文件，另外一个Task再读；配置项过多:每一个插件的配置规则还不尽相同。用每一个插件，都得去学习一番。

 

Gulp

Gulp基于Node JS的一个机制，叫作 stream，Gulp的每一个插件从stream中读取输入，作一些处理，再输出到stream中。 每一个插件不是拿来独立使用的。相反，它专一于完成单一职责。只有把合适的插件组合起来，才能完成具体的Task。前一级的输出，直接变成后一级的输入。Grunt有一个Grunt-Cli，而Gulp直接安装Gulp就好了。npm install -g gulp而Grunt的配置文件叫Gruntfile.js，而Gulp是gulpfile.js。

gulp.js 的五大特色：

1.使用 gulp.js，你的构建脚本是代码，而不是配置文件；

2.使用标准库（node.js standard library）来编写脚本；

3.插件都很简单，只负责完成一件事－基本上都是 20 行左右的函数；

4.任务都以最大的并发数来执行；

5.输入／输出（I/O）是基于“流式”的。

参考：

http://www.gulpjs.com.cn/

http://www.gruntjs.net/