`

Grunt 自动化部署之css、image、javascript、html压缩Gruntfile.js配置

 
阅读更多

转载:http://www.cnblogs.com/hubcarl/p/4095122.html

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 包依赖关系:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
{
  "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     //压缩HTML
112     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: true
123       },
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发布之前内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <title>Grunt 测试</title>
    <meta charset="utf-8">
    <!-- build:css css/main.css -->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/web.css">
    <!-- endbuild -->
 
    <!-- build:js js/main.js -->
    <script src="js/zepto.js"></script>
    <script src="js/common.js"></script>
    <script src="js/service.js"></script>
    <!-- endbuild -->
</head>
<body>
<p></p>
Hello,Grunt!
</body>
</html>
分享到:
评论

相关推荐

    Pro Grunt.js(Apress,2015)

    Pro Grunt.js gets you quickly up-to-speed with this popular JavaScript-based task runner. Author James Cryer takes you from initial installation all the way through to authoring successful plugins. ...

    grunt-sprite:一个生成 css sprite 的 grunt 插件

    咕噜声图像精灵 将图像转换为 css sprite 图像 入门 这个插件需要 Grunt。 如果您以前没有使用过 ,请务必查看指南,... 如果你的操作系统是Ubuntu|Mac os ,当你运行npm install grunt-image-sprite ,脚本会自动安装

    酷炫的爆栈网源码.zip

     --phantomjs The task to generate the image.  --readme The task to update readme.  --updatestargazers The task to update the count of the stargazers.  为什么? 大家是否想过:...

    html2canvas

    JavaScript HTML renderer The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate...

    eureka-build:利用最新的网络技术公司的基础构建项目。 grunt 控制 sass、javascript、图像精灵

    我的基础构建项目使用 NPM 和 Grunt、Sass、Compass、Image spriting JS 提示、CSS lint、JS Uglify、concat 和所有我喜欢使用的可爱工具。 入门! 确保您安装了最新版本的 Compass。 如果未安装,请访问网站更多...

    VSCode-Packs-Config:备份package.json,settings.json和product.json。 我在VSCode中使用的开源软件包列表

    Extensissons:bat clojure coffeescript配置-编辑cpp csharp css css语言功能调试-自动启动调试服务器-就绪docker emmet扩展名-编辑fsharp git git-ui go groovy grunt gulp handlebars hlsl html html ...

    Grunt-Website-Template

    LMG Grunt 网站模板 LMG 构建环境使用 Grunt 和 Compass/Sass 作为资产。 安装 NPM/节点 请参阅说明 安装指南针 请参阅说明 安装 Grunt 和依赖项 在项目目录中运行以下命令: npm install 使用指南针设置资产文件夹...

    Grunt-Boilerplate:这是一个使用 Grunt 来处理一些标准任务的项目设置,例如

    这是一个使用 Grunt 设置的项目,用于处理一些标准任务,例如:使用 RequireJS 编译基于 AMD 的模块,观察/将 Sass 编译为 CSS,观察/整理 JS 代码以及其他一些事情,例如运行单元测试。 依赖关系 gem install image...

    canvasHax:对画布进行哈希处理html500

    抽象图像播放器一个Javascript艺术应用。 您可以,也可以签出这个使用代码将节点机器人。 TODO:像素模式。 运行它:0.在imagePlayer.js 0的第28行上将“ / canvasHax / images /”更改为“ / images /”。npm安装0...

    backdrop-theme:响应式Pelican静态博客引擎主题

    此主题不使用自定义javascript,但是可以根据需要将其添加到文件js/app.js 。关于主题背景是一种响应式主题,它基于进行调整,以适应不同的屏幕和窗口大小。 它采用衬线字体和较深的颜色,看起来既现代又传统。 它...

    NHS_Questions:用户界面框架

    使用 "grunt demo"、"grunt sprint" 或 "grunt dist" 来构建这些文件夹,这些文件夹应该只包含从复制的编译后的 html、css 和 js。 要将 imageoptim 与 PNG 一起使用,您需要安装 ImageOptim ( ) 和 ImageAlpha ( ...

Global site tag (gtag.js) - Google Analytics