Grunt简单应用

Grunt是JavaScript的构建工具，构建工具官方给出的解释是：对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动完成大部分无聊的工作。

Grunt的使用：

1.安装CLI（命令行：command lines）

  下载NodeJS（http://nodejs.cn/），然后打开电脑中的命令提示符输入cmd（window+r），在窗口中输入node -v，查看当前版本，同时也可以检测node是否正确安装。

我们可以使用cnpm替代默认的npm： npm install
-g cnpm--registry=https://registry.npm.taobao.org

将CLI加入全局环境中去，这样可以调用与Gruntfile在同一目录中 Grunt: cnpm
install -g grunt-cli

2.创建package.json文件

package.json放置于项目的根目录中，与grunt在同一目录中，并且应该与项目的源代码一起被提交。在package.json所在目录中运行cnpm
install将依据package.json文件中所列出的每个依赖来自动安装适当版本的依赖。

{
"name": "grunt-test",
"version": "1.0.0",
"devDependencies": {

}
}
3.安装grunt

进入网站的根目录：cd 根目录名

安装grunt：在package.json中的“devDependencies”中就会存储开发依赖项

cnpm install grunt --save-dev

打开package.json文件：

{
"name": "grunt-test",
"version": "1.0.0",
"devDependencies": {
"grunt": "^1.0.1",
}
}
在根目录中会出现node_modules文件：存储grunt源文件的地方

4.配置grunt：例如我们使用uglify插件进行JS代码压缩

创建一个src文件夹，在src文件夹下创建一个js文件：test.js做实验

(function(window,undefined){
function add(a,b){
return a+b;
}
add(10,100);
})(window);
安装uglify插件：cnpm install grunt-contrib-uglify --save-dev

新建Gruntfile.js：配置插件

module.exports = function(grunt){
//任务配置 所有插件的配置信息
grunt.initConfig({
//获取package.json
pkg:grunt.file.readJSON('package.json'),
//uglify插件的配置信息
uglify:{
options:{
stripBanners:true,//生成的压缩文件第一行加一句话说明
//说明的内容
banner:'/*! <%=pkg.name%>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd") %>*/\n'
},
build:{
src:'src/test.js',//源文件：将test.js压缩
dest:'build/<%=pkg.name%>-<%=pkg.version%>.js.min.js'//目标文件：压缩格式以及存放的目录
}
},
});
//使用插件
grunt.loadNpmTasks('grunt-contrib-uglify');
//在终端输入grunt时执行的插件
grunt.registerTask('default',['uglify']);
}
在控制台输入：grunt

然后在build文件夹下我们得到一个压缩后的test.js文件

/*! grunt-test-1.0.0.js 2016-11-18*/
!function(a,b){function c(a,b){return a+b}c(10,100)}(window);
大功告成~~

grunt插件类型有很多，类似以上用法，http://www.gruntjs.net/plugins

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