Grunt 5分钟上手:合并+压缩前端代码
2015-04-16 13:50
441 查看
Grunt 的各种优点这里就不扯了,对于 新手来说 合并(concat) + 压缩(uglify) 前端代码的需求量应该是最大的,这里以这俩种功能为主做一个5分钟的入门吧!
如果你没准备好那就上: 传送门 nodeJS 菜鸟入门 甚至上 google 百度一下 nodejs ……
2、package.json 添加:
如果:
3、安装依赖,保存 package.json 后执行
那么 npm 将开始自动安装依赖的插件,或者你也可以手动 install 添加各个插件,如:
它将自动保存到 “devDependencies” 里面。
4、新建
到这里工作环境的脚手架基本ok, build 的路径根据实际项目来就行了,确认路径后就可以执行编译了。
放一下楼主的目录结构:
看下时间吧, 真的花了 5分钟吗~~~
你懂得!
完
工作环境
$ node -v v0.10.35 $ npm -v 2.6.1 $ express -V 3.2.2 ……
如果你没准备好那就上: 传送门 nodeJS 菜鸟入门 甚至上 google 百度一下 nodejs ……
搭建脚手架
1、项目 目录结构:$ express gruntTest -e ……自动省略提示……
2、package.json 添加:
"devDependencies": { "grunt": "~0.4.0", "grunt-contrib-uglify": "~0.1.2", "grunt-contrib-concat": "~0.1.1" }
如果:
"grunt-name":"*"那么将安装该插件的最高版本,
3、安装依赖,保存 package.json 后执行
$ cd gruntTest && npm install
那么 npm 将开始自动安装依赖的插件,或者你也可以手动 install 添加各个插件,如:
npm install grunt-contrib-concat --save-dev
它将自动保存到 “devDependencies” 里面。
4、新建
Gruntfile.js(grunt 0.4.X 开始 grunt.js 重命名了)输入 :
module.exports = function(grunt) { //init初始化 grunt.initConfig({ //读取 package pkg : grunt.file.readJSON('package.json'), //合并插件的 设置 concat : { options : { stripBanners: true, // 正则匹配文件 banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %> */', }, // 原始位置,输出位置 dist : { src: ['public/javascripts/a.js', 'public/javascripts/b.js'], dest: 'public/assets/built.js' } }, //压缩插件的设置 uglify : { options : { banner : '/*! <%= pkg.name %> '+ '<%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build : { src : 'public/assets/built.js', dest : 'public/assets/built.min.js' } } }); //载入执行依赖 grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); //注册任务 grunt.registerTask('default', ['concat', 'uglify']); };
到这里工作环境的脚手架基本ok, build 的路径根据实际项目来就行了,确认路径后就可以执行编译了。
执行 grunt
$ grunt Running "concat:dist" (concat) task File "public/assets/built.js" created. Running "uglify:build" (uglify) task File "public/assets/built.min.js" created. Uncompressed size: 142 bytes. Compressed size: 46 bytes gzipped (70 bytes minified). Done, without errors.
放一下楼主的目录结构:
看下时间吧, 真的花了 5分钟吗~~~
源码
本次练习源码你懂得!
完
相关文章推荐
- 使用grunt压缩,合并前端代码
- Web前端开发最佳实践(3):前端代码和资源的压缩与合并
- Grunt插件之uglify--js代码压缩与合并
- 自动审核js代码,合并,压缩,跑单元测试 —— grunt.js
- 前端代码和资源的压缩与合并
- 前端js和css的压缩合并之grunt
- grunt压缩合并代码
- gulp入坑系列(2)——初试JS代码合并与压缩
- PHP 配合JSmin库进行压缩前端JS代码进行合并访问,减少前端访问请求。
- 使用Grunt进行前端模块自动压缩构建
- grunt构建项目压缩文件和合并文件
- 【grunt整合版】30分钟学会使用grunt打包前端代码
- Grunt插件之cssmin--ccs压缩与合并
- grunt构建&文件合并&压缩
- 【grunt整合版】学会使用grunt打包前端代码
- 【grunt整合版】30分钟学会使用grunt打包前端代码
- 关于requirejs和grunt压缩合并是否矛盾
- Grunt打包前端代码教程
- grunt 合并压缩任务
- Grunt的配置及使用(压缩合并js/css)