首页 > 代码库 > Grunt 自动化部署之css、image、javascript、html压缩Gruntfile.js配置
Grunt 自动化部署之css、image、javascript、html压缩Gruntfile.js配置
grunt.initConfig方法
用于模块配置，它接受一个对象作为参数。该对象的成员与使用的同名模块一一对应。
每个目标的具体设置，需要参考该模板的文档。就cssmin来讲，minify目标的参数具体含义如下：
- expand：如果设为true，就表示下面文件名的占位符（即*号）都要扩展成具体的文件名。
- cwd：需要处理的文件（input）所在的目录。
- src：表示需要处理的文件。如果采用数组形式，数组的每一项就是一个文件名，可以使用通配符。
- dest：表示处理后的文件名或所在目录。
- ext：表示处理后的文件后缀名。
grunt常用函数说明：
grunt.initConfig：定义各种模块的参数，每一个成员项对应一个同名模块。
grunt.loadNpmTasks：加载完成任务所需的模块。
grunt.registerTask：定义具体的任务。第一个参数为任务名，第二个参数是一个数组， 表示该任务需要依次使用的模块。
grunt常用模块：
- grunt-contrib-clean：删除文件。
- grunt-contrib-compass：使用compass编译sass文件。
- grunt-contrib-concat：合并文件。
- grunt-contrib-copy：复制文件。
- grunt-contrib-cssmin：压缩以及合并CSS文件。
- grunt-contrib-imagemin：图像压缩模块。
- grunt-contrib-jshint：检查JavaScript语法。
- grunt-contrib-uglify：压缩以及合并JavaScript文件。
- grunt-contrib-watch：监视文件变动，做出相应动作。
package.json 包依赖关系：
{ "name": "grunt-study", "version": "1.0.0", "description": "study", "main": "index.js", "scripts": { "test": "test" }, "repository": { "type": "git", "url": "https://github.com/hubcarl" }, "devDependencies":{ "matchdep": "latest", "shelljs": "latest", "ngmshell": "latest", "grunt": "latest", "grunt-contrib-clean": "latest", "grunt-contrib-concat": "latest", "grunt-contrib-copy": "latest", "grunt-contrib-connect": "latest", "grunt-contrib-htmlmin": "latest", "grunt-contrib-cssmin": "latest", "grunt-contrib-imagemin": "latest", "grunt-contrib-uglify": "latest", "grunt-contrib-watch": "latest", "grunt-usemin": "latest", "connect-livereload": "latest" }, "keywords": [ "grunt" ], "author": "bluesky", "license": "BSD-2-Clause", "bugs": { "url": "https://github.com/hubcarl" }}
Gruntfile.js配置css、image、javascript、html压缩
1 module.exports = function (grunt) { 2 3 require(‘matchdep‘).filterDev(‘grunt-*‘).forEach(grunt.loadNpmTasks); 4 5 grunt.initConfig({ 6 7 //清除目录 8 clean: { 9 all: [‘dist/html/**‘, ‘dist/*.*‘], 10 image: ‘dist/html/images‘, 11 css: ‘dist/html/css‘, 12 html: ‘dist/html/**/*‘ 13 }, 14 15 copy: { 16 src: { 17 files: [ 18 {expand: true, cwd: ‘src‘, src: [‘*.html‘], dest: ‘dist/html‘} 19 ] 20 }, 21 image: { 22 files: [ 23 {expand: true, cwd: ‘src‘, src: [‘images/*.{png,jpg,jpeg,gif}‘], dest: ‘dist/html‘} 24 ] 25 } 26 }, 27 28 // 文件合并 29 concat: { 30 options: { 31 separator: ‘;‘, 32 stripBanners: true 33 }, 34 js: { 35 src: [ 36 "src/js/*.js" 37 ], 38 dest: "dist/html/js/app.js" 39 }, 40 css:{ 41 src: [ 42 "src/css/*.css" 43 ], 44 dest: "dist/html/css/main.css" 45 } 46 }, 47 48 //压缩JS 49 uglify: { 50 prod: { 51 options: { 52 mangle: { 53 except: [‘require‘, ‘exports‘, ‘module‘, ‘window‘] 54 }, 55 compress: { 56 global_defs: { 57 PROD: true 58 }, 59 dead_code: true, 60 pure_funcs: [ 61 "console.log", 62 "console.info" 63 ] 64 } 65 }, 66 67 files: [{ 68 expand: true, 69 cwd: ‘dist/html‘, 70 src: [‘js/*.js‘, ‘!js/*.min.js‘], 71 dest: ‘dist/html‘ 72 }] 73 } 74 }, 75 76 //压缩CSS 77 cssmin: { 78 prod: { 79 options: { 80 report: ‘gzip‘ 81 }, 82 files: [ 83 { 84 expand: true, 85 cwd: ‘dist/html‘, 86 src: [‘css/*.css‘], 87 dest: ‘dist/html‘ 88 } 89 ] 90 } 91 }, 92 93 //压缩图片 94 imagemin: { 95 prod: { 96 options: { 97 optimizationLevel: 7, 98 pngquant: true 99 },100 files: [101 {expand: true, cwd: ‘dist/html‘, src: [‘images/*.{png,jpg,jpeg,gif,webp,svg}‘], dest: ‘dist/html‘}102 ]103 }104 },105 106 // 处理html中css、js 引入合并问题107 usemin: {108 html: ‘dist/html/*.html‘109 },110 111 //压缩HTML112 htmlmin: {113 options: {114 removeComments: true,115 removeCommentsFromCDATA: true,116 collapseWhitespace: true,117 collapseBooleanAttributes: true,118 removeAttributeQuotes: true,119 removeRedundantAttributes: true,120 useShortDoctype: true,121 removeEmptyAttributes: true,122 removeOptionalTags: true123 },124 html: {125 files: [126 {expand: true, cwd: ‘dist/html‘, src: [‘*.html‘], dest: ‘dist/html‘}127 ]128 }129 }130 131 });132 133 134 grunt.registerTask(‘prod‘, [135 ‘copy‘, //复制文件136 ‘concat‘, //合并文件137 ‘imagemin‘, //图片压缩138 ‘cssmin‘, //CSS压缩139 ‘uglify‘, //JS压缩140 ‘usemin‘, //HTML处理141 ‘htmlmin‘ //HTML压缩142 ]);143 144 grunt.registerTask(‘publish‘, [‘clean‘, ‘prod‘]);145 };
index.html发布之前内容：
<!DOCTYPE html><html><head> <title>Grunt 测试</title> <meta charset="utf-8"> <!-- build:css css/main.css --> <link rel="stylesheet" href="http://www.mamicode.com/css/common.css"> <link rel="stylesheet" href="http://www.mamicode.com/css/web.css"> <!-- endbuild --> <!-- build:js js/main.js --> <script src="http://www.mamicode.com/js/zepto.js"></script> <script src="http://www.mamicode.com/js/common.js"></script> <script src="http://www.mamicode.com/js/service.js"></script> <!-- endbuild --></head><body><p></p>Hello,Grunt!</body></html>
执行grunt publish之后：
<!DOCTYPE html><html><head><title>Grunt 测试</title><meta charset=utf-8><link rel=stylesheet href=http://www.mamicode.com/css/main.css><script src=js/main.js></script><body>
Hello,Grunt<body>
主页：http://appshow.sinaapp.com/
Grunt 自动化部署之css、image、javascript、html压缩Gruntfile.js配置
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。