自动化构建工具之Grunt

为何要用构建工具？

一句话：自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。

为什么要使用 Grunt？

Grunt 生态系统非常庞大，并且一直在增长。由于拥有数量庞大的插件可供选择，因此，你可以利用 Grunt 自动完成任何事，并且花费最少的代价。

安装Grunt

1. 安装npm
2. 安装 grunt

npm install -g grunt-cli  
grunt  --version

3. 创建Gruntfile.js和package.json文件
   package.json 使用 sudo npm init自动生成

// Gruntfile.js
   module.exports = function(grunt){
   // 1. 初始化插件配置
   grunt.initConfig({
       //主要编码处
       concat:{
           options: { //可选项配置
               separator: ';'   //使用;连接合并
           },
           build: { //此名称任意
               src:  ["src/js/*.js"],  //合并哪些js文件
               dest: "mjt/js/mjt.js" //输出的js文件
           }
       },
       uglify: {
           my_target: {
               files: {
                   'mjt/mjt.min.js': ['mjt/js/mjt.js']
               }
           }
       },
   });
   // 2. 加载插件任务
   grunt.loadNpmTasks('grunt-contrib-concat');
   grunt.loadNpmTasks('grunt-contrib-uglify');
   // 3. 注册构建任务
   // grunt.registerTask('default', ['uglify','concat']);
};

//package.json
{
  "name": "grunt_mjt",
  "version": "1.0.0",
  "dependencies": {},
  "devDependencies": {
  }
}

5. 将 Grunt添加到顶目申
   npm install grunt --save-dev
6. 安装插件
   npm install <plugins-name> --save-dev
7. 配置Gruntfile.js文件

grunt.loadNpmTasks('<plugins-name>');//加载插件
grunt.registerTask('default', ["concat"]);
grunt.registerTask('three', ["uglify"]);

8. 运行grunt

grunt//运行default的task
grunt three //运行three的task

配置管理

 grunt.config('test-config',{
        'config1':{'configdic':'dic1Value','configdic2':'dic2Value'},
        'config2':'config2string'
    });
    grunt.registerTask('test-config',"this is test-config desc",function () {
        grunt.log.writeln(grunt.config("test-config.config1.configdic"))
    });

任务描述

grunt.registerTask('<task-name>','<这里写任务描述>', <task>);

grunt --help//查看任务描述如下图

任务依赖

grunt.registerTask('step-two', function() {
        grunt.task.requires('test-config');//直接运行会报错。提示先要执行test-config的task
    });

多任务

grunt.config('mutable',{
        'mutable1':{'configdic':'dic1Value','configdic2':'dic2Value'},
        'mutable2':'config2string',
    });
    grunt.registerMultiTask('mutable',"this is tmutable desc",function () {
        grunt.log.writeln("target:",this.target);
        grunt.log.writeln("data:",this.data);
    });

模板配置

//
grunt.initConfig({
'pkg':grunt.file.readJSON('package.json')
})

grunt.config('moban',{
       'banner':'<%= pkg.name %>-<%= pkg.version %>'
   });
   grunt.registerMultiTask('moban',"this is tmutable desc",function () {
       grunt.log.writeln("target:",this.target);
       grunt.log.writeln("data:",this.data);
   });

传值

grunt count --limit=5 --limi=1

 grunt.registerTask( 'count' , function() {
       var limit = parseInt(grunt.option('limit'), 10);
       for (var i = 1; i <= limit; i++) console.log(i);
   });

源目标映射

grunt.config('yingshe',{
       'images':{
           'src':['public/**/*.jpg','public/**/*.png']
       },
       'js':{
           'src':['src/js/*.js']
       },
   });
   grunt.registerMultiTask('yingshe',function () {
       this.files.forEach(function(files) {
           grunt.log.writeln('Source:', files.src);
       });
   });

常用命令

// 常用输出
// grunt.log.write('write');//输出到控制台
// grunt.log.writeln('writeln');//输出到控制台并换行
// grunt.log.oklns('oklns');//输出成功信息
// grunt.log.error('error');//输出错误信息
// grunt.log.subhead('subhead');//输出强调到控制台
// grunt.log.debug('debug');//输出信息(仅传入debug时)

//错误处理
// grunt.fail.warn('错误信息');//显示警告并立即终止
// grunt.fail.fatal('错误信息');//显示警告并立即终止


//文件操作
// var str = grunt.file.read('package.json');
// console.log('Counting to: ', str);
//
// var jsonStr = grunt.file.readJSON('package.json');
// console.log('Counting to: ', jsonStr);

// grunt.file.copy('index.html','index2.html');
// grunt.file.delete('index2.html');
// grunt.file.mkdir('path');
// grunt.file.recurse('mjt',function callback(abspath, rootdir, subdir, filename) {
//     console.log('result ', abspath,rootdir,subdir,filename)
// });

常用插件

grunt-contrib-concat//合并文件
grunt-contrib-uglify //压缩