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...');
});