grunt之入门实践

grunt 是基于nodejs的前端项目管理工具，凭借着大量优秀的插件从众多前端项目管理工具中脱颖而出。

确保先安装了nodejs

为了方便使用Grunt，应该在全局范围内安装Grunt的命令行接口(CLI)。
npm install -g grunt-cli
这条命令将会把grunt命令植入到你的系统路径中，这样就允许你从任意目录来运行它(定位到任意目录运行grunt命令)。

注意，安装grunt-cli 并不等于安装了grunt任务运行器,需另外安装grunt;     npm install -g grunt 

 一个简单的grunt实践：
1.进入到指定项目的根目录,一般需要在你的项目中添加两份文件：package.json 和 Gruntfile.js。(Node.js的版本>=0.8.0 ，两个文件具体内容看需求)

2.运行npm install安装项目相关依赖Grunt插件(默认会安装 package.json里面的所有依赖插件)。
3.使用grunt(命令)运行Grunt相关任务。

一个简单的压缩合并操作:

Gruntfile.js:

 1 module.exports = function(grunt) {
 2     // 配置   设置gbk编码：grunt.file.defaultEncoding = 'gbk';  //utf8
 3     grunt.initConfig({
 4         pkg : grunt.file.readJSON('package.json'),
 5         concat : {//合并任务
 6             domop : {//目标
 7                 src: ['src/jquery.baza.dropSelect.js', 'src/jquery.baza.resumeTag.js'],
 8                 dest: 'dest/domop.js'
 9             },
10             css : {//目标
11 
12                 src: ['src/css/*.css'],
13                 dest: 'dest/css/all.css'
14             }
15         },
16         uglify : {
17             options : {
18                 banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
19             },
20             build : {
21                 src : 'dest/domop.js',
22                 dest : 'dest/domop.min.js'
23             }
24         },
25         cssmin: {
26             css: {
27                 src: 'dest/css/all.css',
28                 dest: 'dest/css/all-min.css'
29             }
30         },
31 
32         jshint:{
33             hint:{
34                 src:['js/test.js']
35             }
36         }
37 
38     });
39     // 载入concat和uglify和css插件，分别对于合并和压缩
40     grunt.loadNpmTasks('grunt-contrib-concat');
41     grunt.loadNpmTasks('grunt-contrib-uglify');
42 
43     grunt.loadNpmTasks('grunt-css');
44 
45     grunt.loadNpmTasks('grunt-contrib-jshint');
46 
47     // 注册任务
48     grunt.registerTask('default', ['concat', 'uglify','cssmin','jshint']);   
49 };

如果只想执行对应任务的目标可以在注册任务的时候指定对应目标即可 ：

grunt.registerTask('concat', ['concat:domop']); //该任务只执行concat任务中的domop目标

对应的package.json:

 1 {
 2   "name": "test1",
 3   "version": "0.1.0",
 4   "author": "bossliu",
 5   "homepage": "###",
 6   "devDependencies": {
 7     "grunt": "~0.4.0",
 8     "grunt-contrib-jshint": "*",
 9     "jshint": "^2.5.0",
10     "grunt-contrib-uglify": "~0.1.2",
11     "grunt-contrib-concat": "~0.1.1",
12     "grunt-css":   ">0.0.0"
13   }
14 }

详细文档可查看grunt中文社区：http://www.gruntjs.org/docs/getting-started.html

posted @ 2014-08-30 16:28  lmh2072005  阅读(369)  评论(0)  编辑  收藏  举报