Grunt实战

Transcript

1. Grunt实战 让优化工作更轻松 UED分享 · 交流 http://cssrain.github.io
2. 插一句 ▪ 合并文件 ▪ 压缩代码 ▪ 检查语法错误 ▪ 将Less代码转成CSS代码 ▪ … …
3. npm install -g grunt-cli nodejs 、 npm
4. node -v npm -v grunt -version
5. OK ! Are you ready !!!
6. 新建 package.json
7. { "name": "sh10086", "version": "0.1.0", "author": "Your Name", "devDependencies": { "grunt": "^0.4.5", "grunt-contrib-uglify": "^0.5.0" } }
8. npm install
9. $ npm install npm http 304 https://registry.npmjs.org/whet.extend npm http GET https://registry.npmjs.org/q npm http GET https://registry.npmjs.org/esprima npm http GET https://registry.npmjs.org/argparse npm http 304 https://registry.npmjs.org/bin-check npm http 304 https://registry.npmjs.org/download npm http 304 https://registry.npmjs.org/download npm http 304 https://registry.npmjs.org/esprima npm http 304 https://registry.npmjs.org/find-file npm http 304 https://registry.npmjs.org/argparse npm http GET https://registry.npmjs.org/decompress npm http GET https://registry.npmjs.org/each-async npm http GET https://registry.npmjs.org/get-urls npm http GET https://registry.npmjs.org/through2 npm http GET https://registry.npmjs.org/request npm http GET https://registry.npmjs.org/executable npm http 304 https://registry.npmjs.org/q npm http 304 https://registry.npmjs.org/request … …
10. 新建Gruntfile.js
11. //"wrapper"函数(包装函数) module.exports = function(grunt){ // 项目和任务配置 grunt.initConfig({ uglify: { build: { src: 'src/my-project.js', dest: 'build/out.min.js' } } }); // 加载的Grunt插件和任务 uglify grunt.loadNpmTasks('grunt-contrib-uglify'); // 默认任务,自定义任务 grunt.registerTask('default', ['uglify']); grunt.registerTask('test', ['uglify']); }
12. grunt
13. 哦也，压缩成功！
14. 让暴风雨来的更猛烈些吧 css和js的分别合并 css压缩 js压缩 js代码检测 图片压缩 css和js代码修改监听
15. { "name": "sh10086", "version": "0.1.0", "author": "Your Name", "devDependencies": { "grunt": "^0.4.5", "grunt-contrib-uglify": "^0.5.0" } } 新建 package.json
16. npm install grunt-contrib-jshint --save-dev npm install grunt-contrib-concat --save-dev npm install grunt-contrib-uglify --save-dev npm install grunt-contrib-imagemin --save-dev npm install grunt-contrib-watch --save-dev
17. { "name": "sh10086", "version": "0.1.0", "author": "Your Name", "devDependencies": { "grunt": "^0.4.5", "grunt-contrib-uglify": "^0.5.0" } } { "name": "sh10086", "version": "0.1.0", "author": "Your Name", "devDependencies": { "grunt": "^0.4.5", "grunt-contrib-uglify": "^0.5.0", "grunt-contrib-concat": "^0.4.0", "grunt-contrib-cssmin": "^0.10.0", "grunt-contrib-imagemin": "^0.7.1", "grunt-contrib-jshint": "*", "grunt-contrib-watch": "^0.6.1" } }
18. //"wrapper"函数(包装函数) module.exports = function(grunt){ // 项目和任务配置 grunt.initConfig({ cssmin: { minify: { expand: true, //如果设为true，就表示下面文件名的占位符（即*号）都要扩展成具体的文件名。 cwd: 'res/theme/', //需要处理的文件（input）所在的目录。 src: ['*.css', 'alice/*.css', '!*.min.css', '!alice/*.min.css'], //表示需要处理的文件。可以使用通配符。 dest: 'res/theme/', //表示处理后的文件名或所在目录。 ext: '.min.css' //表示处理后的文件后缀名。 }, combine: { files: { 'res/theme/out.min.css': ['res/theme/10086.min.css', 'res/theme/qijc.min.css'] } } } }); // 加载的Grunt插件和任务 cssmin grunt.loadNpmTasks('grunt-contrib-cssmin'); // 默认任务,自定义任务 grunt.registerTask('default', [‘cssmin']); grunt.registerTask('test', [‘cssmin']); } 新建Gruntfile.js
19. module.exports = function(grunt){ // 详情请看项目中的Gruntfile.js } 完整的Gruntfile.js
20. $ grunt Running "jshint:files" (jshint) task >> 4 files lint free. Running "cssmin:minify" (cssmin) task File res/theme/10086.min.css created: 5.82 kB → 5.21 kB File res/theme/qijc.min.css created: 8.4 kB → 5.86 kB File res/theme/alice/alice.min.css created: 132.46 kB → 98.9 kB Running "cssmin:combine" (cssmin) task File res/theme/out.min.css created: 11.07 kB → 11.07 kB Running "concat:js" (concat) task File res/common/out.js created. Running "uglify:target" (uglify) task File res/common/out.min.js created: 2.66 kB → 856 B Running "imagemin:dynamic" (imagemin) task ✔ images/4gzq.jpg (saved 19.59 kB - 70%) ✔ images/banner1.jpg (saved 913 B - 1%) … … Minified 24 images (saved 26.7 kB) Done, without errors.
21. 不是写程序，而是写配置
22. Gulp.js
23. 500 520 540 560 580 600 620 文件大小（KB） 文件大小优化 优化前 优化后 17 17.5 18 18.5 19 19.5 20 20.5 连接数(个) HTTP连接数优化 优化前 优化后
24. Yeoman Yo 脚手架工具 Bower 包管理器 Grunt 构建工具
25. UED分享 · 交流 http://cssrain.github.io Thank you