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.jsonpkg: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——前端自动化测试工具