GRUNT安装与配置

安装 CLI

npm install -g grunt-cli//全局安装

npm init //初始化package.json

 

npm init   命令会创建一个基本的package.json文件。

1 2 3

npm install grunt --save-dev   npm install grunt-contrib-jshint --save-dev

　　

.......//安装你需要的依赖

安装完以后在package.json的同级创建一个Gruntfile.js配置文件

配置如下

  1 module.exports = function(grunt) {
  2 var timestamp = new Date().getTime();
  3 grunt.initConfig({
  4 pkg: grunt.file.readJSON(‘package.json‘),
  5 //文件合并
  6 concat: {
  7 options: {
  8 //定义一个用于插入合并输出文件之间的字符
  9 seperator: ‘;‘
 10 },
 11 build: {
 12 //将要合并的文件
 13 // src:[‘src/**/*.js‘],
 14 //合并后的js文件的存放位置
 15 // dest:[‘build/<%= pkg.name %>.js‘]
 16 files: { // Dictionary of files 
 17 ‘dist/css/main.css‘: [‘src/**/*.css‘, ‘!src/**/*.min.css‘],
 18 ‘dist/js/index.js‘: ‘src/**/*.js‘
 19 //‘src/sass/all.scss‘:‘src/sass/*.scss‘
 20 }
 21 },
 22 concatsass: {
 23 files: {
 24 ‘src/sass/all.scss‘: ‘src/sass/*.scss‘
 25 }
 26 }
 27 },
 28 //压缩js
 29 uglify: {
 30 options: {
 31 banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘
 32 },
 33 /*dist:{
 34 files:{
 35 ‘dist/<%= pkg.name %>.min.js‘:[‘<%= concat.dist.dest %>‘]
 36 }
 37 }*/
 38 build: {
 39 src: ‘dist/js/index.js‘,
 40 dest: ‘dist/js/index.min.js‘
 41 }
 42 },
 43 //压缩html
 44 htmlmin: {
 45 
 46 options: { // Target options 
 47 removeComments: true,
 48 removeCommentsFromCDATA: true
 49 // collapseWhitespace: true,
 50 // minifyCSS:true
 51 // collapseBooleanAttributes: true,
 52 // removeAttributeQuotes: true,
 53 // removeRedundantAttributes: true,
 54 // useShortDoctype: true,
 55 // removeEmptyAttributes: true,
 56 // removeOptionalTags: true
 57 },
 58 html: {
 59 files: [{ // Dictionary of files
 60 expand: true,
 61 cwd: ‘dist‘,
 62 src: [‘**/*.html‘],
 63 dest: ‘dist‘ //‘destination‘:‘source‘
 64 }]
 65 }
 66 },
 67 //js的语法检测
 68 jshint: {
 69 files: [‘Gruntfile.js‘, ‘src/**/*.js‘, ‘test/**/*.js‘, ‘!src/**/*.min.js‘],
 70 options: {
 71 //这里是覆盖JSHint默认配置的选项
 72 globals: {
 73 jQuery: true,
 74 console: true,
 75 module: true,
 76 document: true
 77 }
 78 }
 79 },
 80 //css压缩
 81 cssmin: {
 82 options: {
 83 //shorthandCompactiong:false,
 84 roundingPercision: -1 //这个属性应该是将样式相同的都提取出来
 85 },
 86 build: {
 87 files: {
 88 // ‘dist/css/main.css‘: ‘dist/css/main.css‘
 89 }
 90 }
 91 },
 92 //
 93 // qunit:{
 94 // files:[‘test/**/*.html‘]
 95 // },
 96 //监听事件
 97 watch: {
 98 build: {
 99 files: [‘<%= jshint.files %>‘, ‘src/**/*.css‘],
100 tasks: [‘jshint‘, ‘qunit‘],
101 options: { spawn: false }
102 }
103 
104 },
105 //处理html中css、js 引入合并问题
106 usemin: {
107 html: ‘dist/**/*.html‘,
108 options: {
109 blockReplacements: {
110 js: function(block) {
111 return ‘<script type="text/javascript" src="‘ + block.dest + ‘?t=‘ + timestamp + ‘"></script>‘;
112 },
113 css: function(block) {
114 return ‘<link rel="stylesheet" type="text/css" href="‘ + block.dest + ‘?t=‘ + timestamp + ‘"/>‘;
115 }
116 }
117 }
118 },
119 //
120 
121 //copy
122 copy: {
123 src: {
124 files: [
125 { expand: true, cwd: ‘src‘, src: [‘**/*.html‘], dest: ‘dist‘ }, //设置的相对于哪个路径找文件就是cwd的值，这里我写的html在test文件里，所以设置成test;所有的源文件路径，都是相对于cwd
126 //dist 目标路径
127 { expand: true, cwd: ‘src/css‘, src: [‘*.min.css‘], dest: ‘dist/css‘ },
128 { expand: true, cwd: ‘src/js‘, src: [‘*.min.js‘], dest: ‘dist/js‘ }
129 ]
130 },
131 image: {
132 files: [
133 { expand: true, cwd: ‘src‘, src: [‘images/**/*.{png,jpg,jpeg,gif}‘], dest: ‘dist‘ }
134 ]
135 },
136 robots: {
137 files: [
138 { expand: true, cwd: ‘src‘, src: [‘robots.txt‘], dest: ‘dist‘ }
139 ]
140 }
141 },
142 //图片压缩
143 imagemin: {
144 static: { // Target 
145 options: { // Target options 
146 optimizationLevel: 3,
147 svgoPlugins: [{ removeViewBox: false }],
148 use: []
149 },
150 files: { // Dictionary of files 
151 // ‘dist/img.png‘: ‘src/img.png‘, // ‘destination‘: ‘source‘ 
152 // ‘dist/img.jpg‘: ‘src/img.jpg‘,
153 // ‘dist/img.gif‘: ‘src/img.gif‘
154 }
155 },
156 dynamic: { // Another target 
157 files: [{
158 expand: true, // Enable dynamic expansion 
159 cwd: ‘src/‘, // Src matches are relative to this path 
160 src: [‘**/*.{png,jpg,gif}‘], // Actual patterns to match 
161 dest: ‘dist‘ // Destination path prefix 
162 }]
163 }
164 },
165 //requirejs 打包
166 requirejs: {
167 options: {
168 baseUrl: ‘‘,
169 paths: {
170 "$": ‘src/zepto‘,
171 "_": ‘src/underscore‘,
172 "B": ‘src/backbone‘
173 },
174 include: [‘$‘, ‘_‘, ‘B‘],
175 
176 out: ‘dist/libs.js‘ //会将include里面的文件打包为out对应的文件，paths的本身意义不大，就是用于配置include里面的指向
177 }
178 },
179 //sprite 雪碧图 //grunt-spritesmith
180 sprite: {
181 options: {
182 //追加时间戳，默认不追加
183 spritestamp: true
184 },
185 //image-set 示例
186 all: {
187 src: ‘src/images/*.jpg‘,
188 dest: ‘dist/images/spritesheet.png‘,
189 destCss: ‘dist/css/sprites.css‘
190 }
191 },
192 sass: {
193 dist: {
194 // src:‘src/**/*.scss‘,
195 // dest:‘dist/css/compiled.css‘
196 options: { // Target options 
197 style: ‘expanded‘
198 },
199 files: {
200 ‘src/css/all.css‘: ‘src/sass/all.scss‘
201 }
202 }
203 
204 },
205 //清理文件
206 clean: {
207 html: [‘dist/**/*.html‘],
208 sass: [‘src/sass/all.scss‘],
209 css: [‘dist/css/*.css‘],
210 js: [‘dist/js/*.js‘],
211 images: [‘dist/images/**/*.{png,jpg,jpeg,gif}‘]
212 },
213 //合并 html
214 includereplace: {
215 dist: {
216 files: [
217 { src: [‘**/*.html‘], dest: ‘dist‘, expand: true, cwd: ‘src‘ }
218 ]
219 }
220 }
221 
222 });
223 
224 //加载包含"uglify" 任务的插件
225 grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
226 grunt.loadNpmTasks(‘grunt-contrib-copy‘);
227 grunt.loadNpmTasks(‘grunt-contrib-jshint‘);
228 //grunt.loadNpmTasks(‘grunt-contrib-qunit‘);
229 grunt.loadNpmTasks(‘grunt-contrib-htmlmin‘);
230 grunt.loadNpmTasks(‘grunt-contrib-cssmin‘);
231 grunt.loadNpmTasks(‘grunt-contrib-watch‘);
232 grunt.loadNpmTasks(‘grunt-contrib-concat‘);
233 grunt.loadNpmTasks(‘grunt-contrib-imagemin‘);
234 grunt.loadNpmTasks(‘grunt-usemin‘);
235 grunt.loadNpmTasks(‘grunt-contrib-requirejs‘);
236 grunt.loadNpmTasks(‘grunt-spritesmith‘);
237 grunt.loadNpmTasks(‘grunt-contrib-sass‘);
238 grunt.loadNpmTasks(‘grunt-contrib-clean‘);
239 grunt.loadNpmTasks(‘grunt-include-replace‘);
240 
241 //默认被执行的任务列表
242 //grunt.registerTask(‘dev‘,[‘clean‘,‘copy‘,‘concat‘,‘sass‘,‘uglify‘,‘copy‘,‘usemin‘,‘htmlmin‘]);
243 grunt.registerTask(‘dev‘, [‘clean‘, ‘jshint‘, ‘copy‘, ‘concat:concatsass‘, ‘sass‘, ‘concat:build‘, ‘uglify‘, ‘includereplace‘, ‘usemin‘]);
244 grunt.registerTask(‘dist‘, [‘clean‘, ‘jshint‘, ‘copy‘, ‘concat:concatsass‘, ‘sass‘, ‘concat:build‘, ‘uglify‘, ‘cssmin‘, ‘includereplace‘, ‘usemin‘]);
245 };