自动化：对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。
grunt:
例如压缩，编译，单元测试 这些task都被作为grunt的插件开发。。想要执行哪些任务 就看这个插件的api文档
入门
npm install -g grunt-cli
新建一个文件夹，用于存储项目，好让grunt来自动化 gruntTest
在该目录下执行
npm init ----创建package.json
npm install grunt --save-dev ----这个命令不仅在该目录下安装了模块 还会将模块添加到package.json的包依赖中。同样，grunt插件和其它node模块都可以按相同的方式安装 。这样 ，当需要使用该项目时，只需要npm install 就可以全部安装所有依赖的内容。。
在根目录（与package.json）同级，创建文件Gruntfile.js
文件需要配置：initConfig，loadNpmTasks，registerTask 这三项 具体配置 参考Gruntfile.js。
grunt Api ， 插件列表
优点：历史悠久，插件丰富，不需要开发人员单独开发。。
缺点：grunt 是按照任务细分，需要在config中对任务进行描述，每个任务针对的文件，也需要区分，造成同一个文件需要被重复声明。。。
module.exports = function( grunt ){
grunt.initConfig({
pkg: grunt.file.readJSON( 'package.json' ),
uglify : {
options : {
banner : '/*!<%= pkg.name %> created at <%=grunt.template.today("yyyy-mm-dd")%> */'
},
static_mappings : {
files : [ {
src : 'js/index.js',
dest : 'build/index.min.js'
},{
src : 'js/main.js',
dest : 'build/main.min.js'
} ]
}
},
concat : {
bar : {
src : [ 'build/*.js' ],
dest : 'dist/all.min.js'
}
},
watch : {
files : [ 'js/index.js' ],
tasks : [ "uglify" , "concat" ]
}
});
grunt.loadNpmTasks( 'grunt-contrib-uglify' );
grunt.loadNpmTasks( 'grunt-contrib-concat' );
grunt.loadNpmTasks( 'grunt-contrib-watch' );
grunt.registerTask( "default" , [ "uglify" , "concat" , "watch" ] );
}
gulp:
功能及配置同grunt
区别grunt ，grunt是按照压缩 合并 这样具体的任务做区分的，为initConfig传递一个对象，压缩，合并..这些任务作为key值 ，value定义了任务的具体对象，这样写造成目标对象被定义多次。gulp 定义任务 是按照src 及文件路径走的，，对一些文件 逐一执行一系列的操作，gulp的异步支持多种方式，，接受一个回调，返回一个流，返回一个promise这三种方式 来告知这个任务已经执行完毕，可以开始下一个任务。
还有一个 区别 就是 gulp需要像引用一般插件似的 引用gulp,但是grunt 是作为形参直接传入并使用，用到的插件以loadNpmTasks的形式。
gulp的使用形式 是流式的 ，目前 gulp已经有认可的有2093个插件 供使用，npm上 也已经有1万多个数量上 和grunt 也逐渐接近。
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
gulp.task('default', ['one'], function(){
console.log(' ok default')
})
gulp.task('one', function( ) {
var stream = gulp.src( 'js/*.js' )
.pipe( uglify() )
.pipe( concat('all.min.js',{ newLine: '\n' }) )
.pipe( gulp.dest('build/') )
return stream;
});
var watcher = gulp.watch('js/**/*.js', ['one','default']);
watcher.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});