前端资源构建-Grunt环境搭建
2015-11-12 18:05
316 查看
前端资源构建-Grunt
随着前端开发的复杂度越来越高,前端页面动辄上几十个js,十几个html页面。用户打开一个页面需要加载一堆的css,js,html文件,对于有大量用户的web应用来说,既消耗服务带宽,用户加载速度也很受影响。特别是现在大量的移动端web应用涌现出来,页面加载速度至关重要,所以对前端资源做压缩是必须做的工作。grunt就是nodejs平台上一个非常优秀的前端构建工具。他可以拼接、丑化、压缩前端资源,大大提升页面访问速度下面简要介绍grunt构建环境在windows平台的搭建过程。
1. install nodejs
nodejs for windows download address2. install npm
open nodejs cmd windownpm 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命令窗口下运行如下代码,执行构建任务grunt task-name
GRUNTJS压缩前端构建
相关文章推荐
- xml解析和json解析的对比
- Node.js学习4
- jquery的has、find和filter函数的异同
- javascript基础之基本数据类型
- nodejs搭配phantomjs highcharts后台生成图表
- 杭电1015 Safecracker 暴力
- CSS控制文本自动换行
- 体验几个超酷超炫的HTML 5 Cavas应用
- HtmlAgilityPack 删除script、style以及注释标签
- 基于JQuery 改造bootstrap模态框拖动功能
- 关于json-lib 和hibernate一起使用的时候出现死循环的解决办法
- js正则表达式验证手机号码,用户名和邮箱
- HTML新标签汇总及使用详解
- mousewheel.js 和scroll api
- jQuery EasyUI Combotree 实现ComboBox的内容过滤
- js获取当前域名
- React with Webpack - 3: 内联image、font
- HtmlParseUtil
- 函数和原型
- HTML 5 Canvas应用场景