自动化工具对比

自动化:对于需要反复重复的任务,例如压缩(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
文件需要配置:initConfigloadNpmTasksregisterTask 这三项 具体配置 参考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...');
});

你可能感兴趣的:(自动化工具对比)