前端资源构建-Grunt
随着前端开发的复杂度越来越高，前端页面动辄上几十个js，十几个html页面。用户打开一个页面需要加载一堆的css，js，html文件，对于有大量用户的web应用来说，既消耗服务带宽，用户加载速度也很受影响。特别是现在大量的移动端web应用涌现出来，页面加载速度至关重要，所以对前端资源做压缩是必须做的工作。grunt就是nodejs平台上一个非常优秀的前端构建工具。他可以拼接、丑化、压缩前端资源，大大提升页面访问速度
下面简要介绍grunt构建环境在windows平台的搭建过程。
1. install nodejs
nodejs for windowsdownload address
2. install npm
open nodejs cmd window
npm install -g grunt-cli
3. 创建grunt依赖文件
package.json
{
"name": "www",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "geekchow",
"license": "ISC",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-clean": "^0.6.0",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-copy": "^0.8.1",
"grunt-contrib-cssmin": "^0.14.0",
"grunt-contrib-jshint": "^0.11.2",
"grunt-contrib-requirejs": "^0.4.4",
"grunt-contrib-uglify": "^0.9.2",
"grunt-css": "latest",
"grunt-filerev": "latest",
"grunt-strip": "^0.2.1",
"grunt-usemin": "latest"
}
}
此json文件中记录了grunt构建过程中需要使用的包，放置在网站根目录
4. 安装构建依赖包
命令行去到网站目录，运行如下命令,安装所有的依赖包。
npm install
安装完后发现网站目录下多了一个叫 node_modules的目录，里面放着package.json中所引用的js包。
5. 创建构建文件Gruntfile.js
前端工程构建一把包括以下几个操作。
- concat:合并js文件，减少js文件数量。
- uglify:js、html文件去空白，js做变量混淆。
- clean: 清除构建过程中产生的中间文件。
- copy:拷贝文件，一般发布目录和开发目录是分开的，copy操作可以将文件从开发目录
- usemin:在js做完合并后，自动使用合并且混淆过的js替换原有引用。
- cssmin:样式文件去空白。
示例Gruntfile.js文件：
6.构建代码
在nodejs命令窗口下运行如下代码，执行构建任务