grunt\gulp的使用对比

grunt\gulp的使用对比

（1）首先，最直观的感受，编写grunt的配置文件要比编写gulp的配置文件更加复杂，消耗更多字符。比如gruntfile需要一个wapper而gulp则不用，还有就是压缩文件的插件名长度也有很大区别：

gulp-uglify
grunt-contrib-uglify

（2）gulp配置文件只分为两步：加载插件，注册并配置任务；而grunt则更加复杂：配置任务、加载插件、注册任务。

（3） gulp核心设计基于Unix流的概念，通过管道连接，前者的输出即后者的输入。 这样可以解决使用Grunt的I/O过程中会产生一些中间态的临时文件的问题。因为一些任务需要生成临时文件，其它任务可能会基于这些临时文件再做处理并生成最终的构建后文件。而使用Gulp的优势就是利用流的方式进行文件的处理，通过管道将多个任务和操作连接起来，因此只有一次I/O的过程，流程更清晰，更纯粹。这种设计可以使我们轻易在一个任务中通过多个插件完成一系列的工作。这样体现出gulp一个插件只实现一个功能的特性。比如下面的代码，先将ES6代码翻译成ES5代码，再进行重命名，加“-es5”后缀。

gulp.task("es6", function () {
    return gulp.src(['./project/**/*.js', '!./project/**/*-es5.js'])
    .pipe(plumber())
    .pipe(babel({
        presets: ['es2015'],
        compact: false
    }))
    .pipe(rename({
        suffix: "-es5",
        extname: ".js"
    }))
    .pipe(gulp.dest("./project"));
});

（4）在gulp中可以很好的配合Nodejs进行工作，像删除，复制文件等功能如果没有特殊要求，都不用使用特定插件，直接使用npm的第三方模块就可以了。在grunt中，则需要下载使用对应的插件系统。比如删除模块的插件：

npm install del // gulp可以使用npm第三方del模块
npm install grunt-contrib-clean // grunt需要使用grunt第三方模块

（5）编写gulp的配置文件更像编写一个nodejs模块，定义任务清晰明确。 grunt允许配置多任务，即可以通过任意命名的“目标（target）”来定义多个配置。这使我在学习时经常搞混那个是配置的任务，哪个是插件的配置。比如下面代码：

grunt.initConfig({
    uglify:{
        files:[{
            dest:'dest/*.js'
            src:'src/*.js'
        }],
        auto:{
         // do something
        }
    }
})

auto是我随意起的名字用来配置子任务，如果你不熟悉uglify插件的配置，很可能会把auto当做files这样的配置项。

（5）使用gulp插件使用方式比较统一不会像grunt插件那么混乱，所以更容易阅读、维护；给我的一个很直观的感受是当我使用grunt插件是，有时要看半天的文档。而gulp插件的使用都非常简单。