grunt的简单使用

grunt

1.安装CLI

在继续学习前，你需要先将Grunt命令行（CLI）安装到全局环境中。安装时可能需要使用sudo（针对OSX、*nix、BSD等系统中）权限或者作为管理员（对于Windows环境）来执行以下命令。

npm install -g grunt-cli

上述命令执行完后，grunt 命令就被加入到你的系统路径中了，以后就可以在任何目录下执行此命令了。

注意，安装grunt-cli并不等于安装了 Grunt！Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的 Grunt。

这样就能让多个版本的 Grunt 同时安装在同一台机器上。

2.假定Grunt CLI已经正确安装，并且已经有一份配置好package.json 和 Gruntfile 文件的项目了，接下来就很容易拿Grunt练手了：

a.将命令行的当前目录转到项目的根目录下。

b.执行npm install命令安装项目依赖的库。

c.执行 grunt 命令。

OK，就是这么简单。还可以通过grunt --help 命令列出所有已安装的Grunt任务（task），但是一般更建议去查看项目的文档以获取帮助信息。

参考官网： http://www.gruntjs.net/getting-started

grunt 插件：

1.    grunt-contrib-clean (v0.5.0)

清理文件或文件夹

2.    grunt-contrib-coffee (v0.7.0)

编译coffee文件为javascript文件

3.    grunt-contrib-compass (v0.6.0)

采用compass方式编译sass文件

4.    grunt-contrib-compress (v0.5.2)

压缩文件或文件夹

5.    grunt-contrib-concat (v0.3.0)

文件拼接（可将多个文件合并到一个文件）

6.    grunt-contrib-copy (v0.4.1)

复制文件或文件夹

7.    grunt-contrib-cssmin (v0.6.2)

压缩CSS文件

8.    grunt-contrib-csslint (v0.1.2)

CSS文件语法检查

9.    grunt-contrib-htmlmin (v0.1.3)

压缩HTML文件

10. grunt-contrib-imagemin (v0.3.0)

PNG、JPEG图片压缩（保证质量压缩）

11. grunt-contrib-jshint (v0.6.4)

JS语法检查

12. grunt-contrib-less (v0.7.0)

将LESS编译成CSS

13. grunt-contrib-sass (v0.5.0)

把SASS编译成CSS

14. grunt-contrib-stylus (v0.8.0)

把Stylus文件编译成CSS

15. grunt-contrib-uglify (v0.2.4)

用UglifyJS方式压缩JS文件

16. grunt-contrib-watch (v0.5.3)

实时监测文件的增删改状态，状态改变时自动执行预定义任务

17. grunt-contrib-yuidoc (v0.5.0)

编译YUIDoc文档

18. grunt-contrib-connect (v0.5.0)

启动一个web服务器连接

19. grunt-contrib-jade (v0.8.0)

编译Jade模版

20. grunt-contrib-handlebars (v0.5.11)

预编译Handlebars模板到JST文件（Handlebars：结合json数据的模版）

21. grunt-contrib-jasmine (v0.5.2)

通过PhantomJS运行jasmine（PhantomJS：JS单元测试）

22. grunt-contrib-jst (v0.5.1)

预编译Underscore模板到JST文件（Underscore：JS工具库）

23. grunt-contrib-nodeunit (v0.2.1)

运行Nodeunit单元测试（NodeUnit：Node.js单元测试框架）

24. grunt-contrib-qunit (v0.3.0)

用PhantomJS对象运行QUnit单元测试

25. grunt-contrib-requirejs (v0.4.1)

用r.js优化RequireJS项目

项目目录

Gruntfile.js 配置信息：(这是一个简单的配置信息，所有的css和js列出来进行压缩或者合并)

module.exports = function(grunt) {

//配置参数

grunt.initConfig({

pkg: grunt.file.readJSON('package.json'),

concat: {

options: {

separator: ';'

},

dist: {

src: [

"js/jquery-1.10.1.min.js",

"js/materialize.min.js",

"js/jquery.raty.min.js",

"js/drawingboard.min.js",

"js/md5.min.js",

"js/Global.js",

"js/peer.min.js",

"js/mobiscroll.core-2.5.2.js",

"js/mobiscroll.core-2.5.2-zh.js",

"js/mobiscroll.datetime-2.5.1.js",

"js/mobiscroll.datetime-2.5.1-zh.js",

"js/mobiscroll.android-ics-2.5.2.js",

"js/main.js",

"js/editQuestion.js",

"js/Render.js",

"js/SocketPlayer.js",

"js/AjaxUtil.js",

"js/Utils.js",

"js/label.js",

"js/creatPeer.js",

"js/base.js",

"js/getName.js",

"js/bundle.js",

"js/Camera.js"

],

dest: "assets/js/index.js"

}

},

uglify: {

options: {

},

dist: {

files: {

'assets/js/index.min.js': ['assets/js/index.js']

}

}

},

cssmin: {

options: {

keepSpecialComments: 0,

stripBanners: true

},

compress: {

files: {

'assets/css/index.css': [

"css/materialize.min.css",

"css/bootstrap.min.css",

"css/common.css",

"css/style.css",

"css/mobiscroll.android-ics-2.5.2.css",

"css/icon.css",

"css/mobiscroll.core-2.5.2.css"

]

}

}

},

cachebreaker: {

dev: {

options: {

match: ['assets/js/index.min.js', 'assets/css/index.css'],

},

files: {

src: ['index.html']

}

}

}

// jshint: {

// all: ['assets/js/index.js']

// }

});

//载入concat和uglify插件，分别对于合并和压缩

grunt.loadNpmTasks('grunt-contrib-concat'); // 用于js合并

grunt.loadNpmTasks('grunt-contrib-cssmin');// 用于合并css

// grunt.loadNpmTasks('grunt-contrib-jshint');//是一个用于JavaScript静态语法检查的工具，它会帮助开发者在进行较为严格的语法检查

grunt.loadNpmTasks('grunt-contrib-uglify');// 用于压缩

grunt.loadNpmTasks('grunt-cache-breaker');// 用于控制浏览器缓存

//注册任务

grunt.registerTask('default', ['concat', 'uglify', 'cssmin', 'cachebreaker']);

}