Grunt usemin前端自动化打包流程
2015-06-30 10:37
399 查看
前端优化是尽量减少http请求,所以我们需要尽量合并压缩文件,然后调用压缩后的文件,比如多个css文件压缩成一个,多个js文件合并压缩等,usemin能够自动在html中使用压缩后的文件,达到上面的目的。
上图是完整打包后的文件目录,原始目录是assets,打包发布的文件是dist.
gruntfile.js文件内容:
原始的index.html
打包后的index.html
上图是完整打包后的文件目录,原始目录是assets,打包发布的文件是dist.
gruntfile.js文件内容:
module.exports = function(grunt) { grunt.config.init({ clean:{ src:"dist/" }, useminPrepare: { html: 'index.html', options: { dest: 'dist' } }, usemin: { html: ['dist/index.html'] }, uglify: { 'dist/js/app.min.js': ['assets/js/*.js'] }, copy: { html: { src: './index.html', dest: 'dist/index.html' } }, cssmin:{ 'dist/css/app.min.css': ['assets/css/*.css'] } }); grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-usemin'); grunt.registerTask('default',[ 'clean', 'copy:html', 'useminPrepare', 'uglify', 'cssmin', 'usemin' ]); }
原始的index.html
<!DOCTYPE html> <html> <head> <title>Usemin test</title> <!-- build:css dist/css/app.min.css --> <link rel="stylesheet" type="text/css" href="./assets/css/style.css" media="screen" /> <!-- endbuild --> </head> <body> </body> <!-- build:js dist/js/app.min.js --> <script src="./assets/js/foo.js"></script> <script src="./assets/js/bar.js"></script> <!-- endbuild --> </html>
打包后的index.html
<!DOCTYPE html> <html> <head> <title>Usemin test</title> <link rel="stylesheet" href="dist/css/app.min.css" media="screen"/> </head> <body> </body> <script src="dist/js/app.min.js"></script> </html>
相关文章推荐
- JavaScript学习11:事件入门
- JSON 分析数据格式
- Jquery---checkbox的全选或者全部取消
- jquery提交表单错误
- javaScript注意技巧
- 在js中使用createElement创建HTML对象和元素
- 深入探究使JavaScript动画流畅的一些方法
- jsp页面运行错误的问题解决方式
- 动态修改 NodeJS 程序中的变量值
- 各项技巧总结:css/js/正则等(Editplus版)
- CSS常用属性
- jquery鼠标随意移动div
- jsp页面乱码问题的解决
- dyld: Library not loaded: @rpath/XCTest.framework/XCTest Referenced from: /private/var/mobile/Conta
- LESS CSS 框架简介
- 非预期效果CSS集合
- angular学习
- 剑指offer: 矩形覆盖(循环与递归)
- jpcap 配置方法,问题解决,模拟sniffer程序。(附JAVA程序,jar,dll包等环境)
- jQuery入门:避免和其他库冲突