1、Grunt
Grunt 的出现早于 Gulp，Gulp 是后起之秀。他们本质都是通过 JavaScript 语法实现了 shell script 命令的一些功能。比如利用 jshint 插件实现 JavaScript 代码格式检查这一功能。早期需要手动在命令行中输入 jshint test.js，而 Grunt 则通过 Gruntfile.js 进行配置
// Gruntfile.js module.exports = function(grunt) { grunt.initConfig({ // js格式检查任务 jshint: { src: 'src/test.js' } // 代码压缩打包任务 uglify: {} }); // 导入任务插件 grunt.loadnpmTasks('grunt-contrib-uglify'); // 注册自定义任务, 如果有多个任务可以添加到数组中 grunt.regusterTask('default', ['jshint']) }
2、Gulp
Gulp 吸取了 Grunt 的优点，拥有更简便的写法，通过流（stream）的概念来简化多任务之间的配置和输出，让任务更加简洁和容易上手。Gulp 还是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译，替代手工实现自动化工作。通过配置 gulpfile.js 文件来实现，一个简单的 gulpfile.js 配置如下
// gulpfile.js var gulp = require('gulp'); var jshint = require('gulp-jshint'); var uglify = require('gulp-uglify'); // 代码检查任务 gulp 采取了pipe 方法，用流的方法直接往下传递 gulp.task('lint', function() { return gulp.src('src/test.js') .pipe(jshint()) .pipe(jshint.reporter('default')); }); // 压缩代码任务 gulp.task('compress'， function() { return gulp.src('src/test.js') .pipe(uglify()) .pipe(gulp.dest('build')); }); // 将代码检查和压缩组合，新建一个任务 gulp.task('default', ['lint', 'compress']);
好多人觉得，规则和结构都比较像，其实 gulp 本身就是借鉴了grunt 的经验进行升级和加入一些新特性。正因为流管理多任务配置输出方式的提高，人们逐渐选择使用 gulp 而放弃 grunt
3、browserify
browserify 是早期的模块打包工具，是先驱者，踏实的浏览器端使用 CommonJS 规范的格式组织代码成为可能。在这之前，因为 CommonJS 与浏览器特性的不兼容问题，更多使用的是 AMD 规范，当然后来又发展了ES6模块规范
假设有如下模块 add.js 和文件 test.js，test.js 使用 CommonJS 规范导入了模块 add.js
// add.js module.exports = function(a, b) { return a + b }; // test.js var add = require('./add.js'); console.log(add(1, 2)); // 3
我们知道，如果直接执行是执行不成功的，因为浏览器无法识别 CommonJS 语法，而 browserify就是用来处理这个问题的，他将 CommonJS 语法进行装换，在命令行执行如下
browserify test.js > bundle.js
生成的 bundle.js 就是已经处理完毕，可供浏览器执行使用的文件，只需要将它插入到