Grunt笔记

2019独角兽企业重金招聘Python工程师标准>>>

摘自：http://www.gruntjs.net/

JavaScript 世界的构建工具
为何要用构建工具？一句话：自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。
Grunt生态系统非常庞大，并且一直在增长。由于拥有数量庞大的插件可供选择，因此，你可以利用Grunt自动完成任何事，并且花费最少的代价。如果找不到你所需要的插件，那就自己动手创造一个Grunt插件，然后将其发布到npm上吧。
npm update -g npm 指令进行升级npm
 
你需要先将Grunt命令行（CLI）安装到全局环境中。
npm install -g grunt-cli
上述命令执行完后，grunt 命令就被加入到你的系统路径中了，以后就可以在任何目录下执行此命令了。
注意，安装grunt-cli并不等于安装了 Grunt！Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的 Grunt。
这样就能让多个版本的 Grunt 同时安装在同一台机器上。
每次运行grunt 时，他就利用node提供的require()系统查找本地安装的 Grunt。正是由于这一机制，你可以在项目的任意子目录中运行grunt 。
如果找到一份本地安装的 Grunt，CLI就将其加载，并传递Gruntfile中的配置信息，然后执行你所指定的任务。

下面这条命令将安装Grunt最新版本到项目目录中，并将其添加到devDependencies内：
npm install grunt --save-dev
同样，grunt插件和其它node模块都可以按相同的方式安装。下面展示的实例就是安装 JSHint 任务模块：
npm install grunt-contrib-jshint --save-dev

Gruntfile.js
    module.exports = function(grunt) {

      // Project configuration.
      grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
          options: {
            banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
          },
          build: {
            src: 'src/<%= pkg.name %>.js',
            dest: 'build/<%= pkg.name %>.min.js'
          }
        }
      });

      // 加载包含 "uglify" 任务的插件。
      grunt.loadNpmTasks('grunt-contrib-uglify');

      // 默认被执行的任务列表。
      grunt.registerTask('default', ['uglify']);

    };

 

摘自：http://www.36ria.com/6226
 http://blog.csdn.net/hsany330/article/details/11569031
使用grunt-contrib-uglify插件进行演示，一方面是uglify（压缩js文件）任务，基本上是代码发布前必须执行的，另一方面grunt-contrib-uglify非常典型，堪称grunt的插件的代码。
npm install grunt-contrib-concat --save-dev  
 grunt.loadNpmTasks('grunt-contrib-concat');
 任务：合并src下的js文件到build目录，合并后文件名为built.js。
 grunt.initConfig({  
     concat: {  
         options: {  
             //文件内容的分隔符  
             separator:';'  
         },  
         dist: {  
             src: ['src/*.js'],  
             dest:'build/built.js'  
         }  
     }  
 });
向文件追加一些额外信息：
grunt.initConfig({  
     pkg: grunt.file.readJSON('package.json'),  
     concat: {  
         options: {  
             //文件内容的分隔符  
             separator:';',  
             stripBanners:true,  
             banner:'/*! <%= pkg.name %> - v<%= pkg.version %> - ' +  
                         '<%= grunt.template.today("yyyy-mm-dd") %> */'  
         },  
         dist: {  
         }  
     }  
 });
 自定义进程函数，比如你需要在合并文件前，对文件名进行处理等。
 grunt.initConfig({  
     pkg: grunt.file.readJSON('package.json'),  
     concat: {  
         options: {  
              // Replace all 'use strict' statements in the code with a single one at the top  
             banner:"'use strict';\n",  
             process:function(src, filepath) {  
                     return'// Source: ' + filepath + '\n'+  
                              src.replace(/(^|\n)[ \t]*('use strict'|"use strict");?\s*/g,'$1');  
             }  
         },  
         dist: {  
         }  
     }  
 });
 
grunt-contrib-copy    顾名思义，用于复制文件或目录的插件。
copy: {  
  main: {  
    files: [  
      {src: ['path/*'], dest: 'dest/', filter: 'isFile'},// 复制path目录下的所有文件  
      {src: ['path/**'], dest: 'dest/'},// 复制path目录下的所有目录和文件  
    ]  
  }  
}  
grunt-contrib-clean
clean: {    
  build: {    
    src: ["path/to/dir/one","path/to/dir/two"]    
  }    
}   
 
grunt-contrib-compress用于压缩文件和目录成为zip包，不是很常用。
compress: {  
  main: {  
    options: {  
      archive:'archive.zip'  
    },  
    files: [  
      {src: ['path/*'], dest: 'internal_folder/', filter: 'isFile'}, path下所有的js  
      {src: ['path/**'], dest: 'internal_folder2/'},// path下的所有目录和文件  
    ]  
  }  
}  

grunt-contrib-jshint
jshint用于JavaScript代码检查（并会给出建议），发布js代码前执行jshint任务，可以避免出现一些低级语法问题。
jshint拥有非常丰富的配置，可以自由控制检验的级别。
module.exports = function(grunt) {  
   
    // 构建任务配置  
    grunt.initConfig({  
        //读取package.json的内容，形成个json数据  
        pkg: grunt.file.readJSON('package.json'),  
        jshint: {  
            options: {  
                //大括号包裹  
                curly:true,  
                //对于简单类型，使用===和!==，而不是==和!=  
                eqeqeq:true,  
                //对于首字母大写的函数（声明的类），强制使用new  
                newcap:true,  
                //禁用arguments.caller和arguments.callee  
                noarg:true,  
                //对于属性使用aaa.bbb而不是aaa['bbb']  
                sub:true,  
                //查找所有未定义变量  
                undef:true,  
                //查找类似与if(a = 0)这样的代码  
                boss:true,  
                //指定运行环境为node.js  
                node:true  
            },  
            //具体任务配置  
            files: {  
                src: ['src/*.js']  
            }  
        }  
    });  
   
    // 加载指定插件任务  
    grunt.loadNpmTasks('grunt-contrib-jshint');  
   
    // 默认执行的任务  
    grunt.registerTask('default', ['jshint']);  
};  

jshint比较有意思的是还可以结合grunt-contrib-concat插件使用，在合并文件前（后）对js进行检查。
grunt.initConfig({  
  concat: {  
    dist: {  
      src: ['src/foo.js','src/bar.js'],  
      dest:'dist/output.js'  
    }  
  },  
  jshint: {  
    beforeconcat: ['src/foo.js','src/bar.js'],  
    afterconcat: ['dist/output.js']  
  }  
});  

grunt-contrib-mincss 非常常用的插件，用于css压缩。
用法相对于grunt-contrib-uglify简单很多：
mincss: {  
  compress: {  
    files: {  
      "path/to/output.css": ["path/to/input_one.css","path/to/input_two.css"]  
    }  
  }  
}

Gruntfile.js
module.exports = function(grunt) {

//    grunt.initConfig({  
//         concat: {  
//             options: {  
//                 //文件内容的分隔符  
//                 separator:';'  
//             },  
//             dist: {  
//                 src: ['js/src/*.js'],  
//                 dest:'js/dest/built.all.js'  
//             }  
//         }  
//     });

//grunt.loadNpmTasks('grunt-contrib-concat');
 
//grunt.registerTask('concatall', ['concat']);

};

 

 

转载于:https://my.oschina.net/kenzheng/blog/994796