grunt学习笔记

初步安装

1.首先安装nodejs并安装npm,如果是window下,安装了nodejs安装包,npm就有了

下载地址:http://www.nodejs.org/download/

验证方式:cmd下执行node -v与npm -v

本人下载应用版本为node:v0.12.2和npm -v:2.7.4

2.安装grunt至对应的项目目录

a.先在项目根目录下创建package.json作为配置说明

{  "name": "项目名,如:template",  "version": "版本号,如:1.0.0",  "devDependencies": {  }}

b.执行安装指令npm install grunt --save-dev

--save-dev:后缀,会将当下依赖版本记录下package.json中,方便后期使用npm install,自动安装所有依赖版本的库内容

也可逐个安装对应的Grunt插件,插件地址如下:插件查询网站

常用插件

• Contrib-jshint——javascript语法错误检查；
• Contrib-watch——实时监控文件变化、调用相应的任务重新执行；
• Contrib-clean——清空文件、文件夹；
• Contrib-uglify——压缩javascript代码
• Contrib-copy——复制文件、文件夹
• Contrib-concat——合并多个文件的代码到一个文件中
• karma——前端自动化测试工具

grunt.option

3.创建Gruntfile.js在项目对应的根目录下

格式示例:

<pre name="code" class="javascript">module.exports = function(grunt) {  grunt.initConfig({    jshint: {      files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],      options: {        globals: {          jQuery: true        }      }    },    watch: {      files: ['<%= jshint.files %>'],      tasks: ['jshint']    }  });  grunt.loadNpmTasks('grunt-contrib-jshint');  grunt.loadNpmTasks('grunt-contrib-watch');  grunt.registerTask('default', ['jshint']);};

常用内容

动态创建文件

如果你想处理大量的单个文件，可以用一些附加属性来帮助动态创建文件。这些属性在“简洁格式“和”文件数组格式“下都可用。

• expand：设为 true 来启用下面这些属性。
• cwd：所有的 src 都相对于此路径（但是不包含）。
• src：需要匹配的模式，相对于cwd。
• dest：目标文件。
• ext：在dest中的所有文件后缀都替换掉。
• flatten：在dest中的所有路径的片段都替换掉。
• rename：每当匹配到一个src时，都会调用此方法（在ext和flatten执行之后）。dest和src属性会被当参数传入，这个函数必须返回一个新的dest值。如果相同的dest被返回超过一次，每一个用它的src都会被添加到一个源数组。

再下面这个例子中，名为 minify 的任务static_mapping和 dynamic_mapping 执行的完全相同的任务

1. grunt.initConfig({  
2.   minify: {  
3.     static_mappings: {  
4.       // Because these src-dest file mappings are manually specified, every  
5.       // time a new file is added or removed, the Gruntfile has to be updated.  
6.       files: [  
7.         {src: 'lib/a.js', dest: 'build/a.min.js'},  
8.         {src: 'lib/b.js', dest: 'build/b.min.js'},  
9.         {src: 'lib/subdir/c.js', dest: 'build/subdir/c.min.js'},  
10.         {src: 'lib/subdir/d.js', dest: 'build/subdir/d.min.js'},  
11.       ],  
12.     },  
13.     dynamic_mappings: {  
14.       // Grunt will search for "**/*.js" under "lib/" when the "minify" task  
15.       // runs and build the appropriate src-dest file mappings then, so you  
16.       // don't need to update the Gruntfile when files are added or removed.  
17.       files: [  
18.         {  
19.           expand: true,     // Enable dynamic expansion.  
20.           cwd: 'lib/',      // Src matches are relative to this path.  
21.           src: ['**/*.js'], // Actual pattern(s) to match.  
22.           dest: 'build/',   // Destination path prefix.  
23.           ext: '.min.js',   // Dest filepaths will have this extension.  
24.         },  
25.       ],  
26.     },  
27.   },  
28. });  

常用组件的配置说明

合并组件

1. concat: {  
2.   options: {  
3.     // define a string to put between each file in the concatenated output  
4.     separator: ';'  
5.   },  
6.   dist: {  
7.     // the files to concatenate  
8.     src: ['src/**/*.js'],  
9.     // the location of the resulting JS file  
10.     dest: 'dist/<%= pkg.name %>.js'  
11.   }  
12. }  

压缩组件

1. uglify: {  
2.   options: {  
3.     // the banner is inserted at the top of the output  
4.     banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'  
5.   },  
6.   dist: {  
7.     files: {  
8.       'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']  
9.     }  
10.   }  
11. }  

qunit测试组件

1. qunit: {  
2.   files: ['test/**/*.html']  
3. },  

JSHint 插件

1. jshint: {  
2.   // define the files to lint  
3.   files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],  
4.   // configure JSHint (documented at http://www.jshint.com/docs/)  
5.   options: {  
6.       // more options here if you want to override JSHint defaults  
7.     globals: {  
8.       jQuery: true,  
9.       console: true,  
10.       module: true  
11.     }  
12.   }  
13. }  

watch 插件

1. watch: {  
2.   files: ['<%= jshint.files %>'],  
3.   tasks: ['jshint', 'qunit']  
4. }  

自定义任务

1. grunt.registerTask('foo', 'My "foo" task.', function() {  
2.   // Enqueue "bar" and "baz" tasks, to run after "foo" finishes, in-order.  
3.   grunt.task.run('bar', 'baz');  
4.   // Or:  
5.   grunt.task.run(['bar', 'baz']);  
6. });