grunt前端任务管理工具

Gruntjs是前端项目构建工具，基于node的命令行工具。很多公司或者js项目都是用gruntjs来搭建，例如jQuery，twitter，Qunit等。主要功能有：

1. 合并文件
2. 压缩html/js/css/图片文件
3. 语法检测
4. 单元测试（基于Qunit）
5. watch功能

相对于Ant的打包工具，grunt更加灵活，语法采用json，比xml语法更加简洁，作为前端工程师可能更喜欢写json。

GruntJS的安装

Grunt是基于nodejs的，所以安装GruntJS之前，需要保证你的电脑有nodejs环境，node环境比之前安装简单多了，现在windows平台只需要下载node安装程序，一路next就可以了。

安装grunt-cli

在命令行中，执行npm install -g grunt-cli，来安装grunt-cli

安装grunt插件

在项目路径下的命令行中，输入npm install grunt-contrib-xxxx --save-dev 就可以完成插件安装，或者直接修改grunt的package.json，然后执行npm install，npm会自动安装想用插件。

创建GruntJS管理项目

每个GruntJS都包括两个文件：

1. package.json：依赖模块+你可能用到的变量和说明，例如：version、name
2. Gruntfile.js：node module写法的任务管理文件

package.json

一个典型的package.json内容如下：

{  "name": "my-project-name",  "version": "0.1.0",  "devDependencies": {    "grunt": "~0.4.0",    "grunt-contrib-jshint": "~0.1.0",    "grunt-contrib-concat": "~0.1.1",    "grunt-contrib-uglify": "~0.1.0",    "grunt-contrib-watch": "~0.1.4"  }}

如果安装了新的插件，那么这个package.json会自动更新的，或者修改它，然后执行npm install，也可以安装对应的插件。

Gruntfile.js

Gruntfile.js是node module格式的任务管理文件，例如：

module.exports = function(grunt) {  // 以下代码初始化Grunt任务  grunt.initConfig({    // js语法检查    jshint: { … },    // 需要合并的任务    concat: { … },    // 压缩    uglify: { … },    // watch任务    watch: { … }  });   // 加载package.json中的想用插件  grunt.loadNpmTasks('grunt-contrib-jshint');  grunt.loadNpmTasks('grunt-contrib-concat');  grunt.loadNpmTasks('grunt-contrib-uglify');  grunt.loadNpmTasks('grunt-contrib-watch');   // 注册一个任务，第二参数可以是数组或者字符串  // 默认会执行default任务.  grunt.registerTask('default', ['jshint', 'concat', 'uglify']);};

常用Grunt任务介绍

使用JSHint检查js语法

JSHint是JSLint的一个分支，可以用于js语法规则、错误检测。

jshint: {  files: ['Gruntfile.js', 'lib/**/*.js']},

上面的代码可以检测lib文件夹下所有二级路径的js语法内容。另外后面可以使用watch任务，实时检测语法。

合并任务

concat是合并任务，可以合并打包js，css文件。

concat: {  js: {    src: ['lib/module1.js', 'lib/module2.js', 'lib/plugin.js'],    dest: 'dist/script.js'  }  css: {    src: ['style/normalize.css', 'style/base.css', 'style/theme.css'],    dest: 'dist/screen.css'  }},

使用uglifyjs压缩js文件

uglifyjs就不用介绍了，jQuery就是用它压缩的。

uglify: {  dist: {    src: ['<%= concat.js.dest %>'],    dest: 'dist/script.min.js'  }},

watch功能

watch功能是Grunt的实时处理任务，当监控的文件发生变化的时候，则执行相应的任务。

watch: {  files: '<%= jshint.files %>',  tasks: 'jshint'},

除了上面的任务外，还有很多插件，参考文章《双屏切图：使用livereload实现自动刷新》

本文链接 http://js8.in/1124.html. 转自 JS8.IN ™