安装 CLI

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

npm init //初始化package.json

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

npm install grunt --save-dev

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

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

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

配置如下

module.exports = function(grunt) {
var timestamp = new Date().getTime();
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json‘),
//文件合并
concat: {
options: {
//定义一个用于插入合并输出文件之间的字符
seperator: ‘;‘
},
build: {
//将要合并的文件
// src:[‘src/**/*.js‘],
//合并后的js文件的存放位置
// dest:[‘build/<%= pkg.name %>.js‘]
files: { // Dictionary of files
‘dist/css/main.css‘: [‘src/**/*.css‘, ‘!src/**/*.min.css‘],
‘dist/js/index.js‘: ‘src/**/*.js‘
//‘src/sass/all.scss‘:‘src/sass/*.scss‘
}
},
concatsass: {
files: {
‘src/sass/all.scss‘: ‘src/sass/*.scss‘
}
}
},
//压缩js
uglify: {
options: {
banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘
},
/*dist:{
files:{
‘dist/<%= pkg.name %>.min.js‘:[‘<%= concat.dist.dest %>‘]
}
}*/
build: {
src: ‘dist/js/index.js‘,
dest: ‘dist/js/index.min.js‘
}
},
//压缩html
htmlmin: {

options: { // Target options
removeComments: true,
removeCommentsFromCDATA: true
// collapseWhitespace: true,
// minifyCSS:true
// collapseBooleanAttributes: true,
// removeAttributeQuotes: true,
// removeRedundantAttributes: true,
// useShortDoctype: true,
// removeEmptyAttributes: true,
// removeOptionalTags: true
},
html: {
files: [{ // Dictionary of files
expand: true,
cwd: ‘dist‘,
src: [‘**/*.html‘],
dest: ‘dist‘ //‘destination‘:‘source‘
}]
}
},
//js的语法检测
jshint: {
files: [‘Gruntfile.js‘, ‘src/**/*.js‘, ‘test/**/*.js‘, ‘!src/**/*.min.js‘],
options: {
//这里是覆盖JSHint默认配置的选项
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
},
//css压缩
cssmin: {
options: {
//shorthandCompactiong:false,
roundingPercision: -1 //这个属性应该是将样式相同的都提取出来
},
build: {
files: {
// ‘dist/css/main.css‘: ‘dist/css/main.css‘
}
}
},
//
// qunit:{
// files:[‘test/**/*.html‘]
// },
//监听事件
watch: {
build: {
files: [‘<%= jshint.files %>‘, ‘src/**/*.css‘],
tasks: [‘jshint‘, ‘qunit‘],
options: { spawn: false }
}

},
//处理html中css、js 引入合并问题
usemin: {
html: ‘dist/**/*.html‘,
options: {
blockReplacements: {
js: function(block) {
return ‘<script type="text/javascript" src="‘ + block.dest + ‘?t=‘ + timestamp + ‘"></script>‘;
},
css: function(block) {
return ‘<link rel="stylesheet" type="text/css" href="‘ + block.dest + ‘?t=‘ + timestamp + ‘"/>‘;
}
}
}
},
//

//copy
copy: {
src: {
files: [
{ expand: true, cwd: ‘src‘, src: [‘**/*.html‘], dest: ‘dist‘ }, //设置的相对于哪个路径找文件就是cwd的值，这里我写的html在test文件里，所以设置成test;所有的源文件路径，都是相对于cwd
//dist 目标路径
{ expand: true, cwd: ‘src/css‘, src: [‘*.min.css‘], dest: ‘dist/css‘ },
{ expand: true, cwd: ‘src/js‘, src: [‘*.min.js‘], dest: ‘dist/js‘ }
]
},
image: {
files: [
{ expand: true, cwd: ‘src‘, src: [‘images/**/*.{png,jpg,jpeg,gif}‘], dest: ‘dist‘ }
]
},
robots: {
files: [
{ expand: true, cwd: ‘src‘, src: [‘robots.txt‘], dest: ‘dist‘ }
]
}
},
//图片压缩
imagemin: {
static: { // Target
options: { // Target options
optimizationLevel: 3,
svgoPlugins: [{ removeViewBox: false }],
use: []
},
files: { // Dictionary of files
// ‘dist/img.png‘: ‘src/img.png‘, // ‘destination‘: ‘source‘
// ‘dist/img.jpg‘: ‘src/img.jpg‘,
// ‘dist/img.gif‘: ‘src/img.gif‘
}
},
dynamic: { // Another target
files: [{
expand: true, // Enable dynamic expansion
cwd: ‘src/‘, // Src matches are relative to this path
src: [‘**/*.{png,jpg,gif}‘], // Actual patterns to match
dest: ‘dist‘ // Destination path prefix
}]
}
},
//requirejs 打包
requirejs: {
options: {
baseUrl: ‘‘,
paths: {
"$": ‘src/zepto‘,
"_": ‘src/underscore‘,
"B": ‘src/backbone‘
},
include: [‘$‘, ‘_‘, ‘B‘],

out: ‘dist/libs.js‘ //会将include里面的文件打包为out对应的文件，paths的本身意义不大，就是用于配置include里面的指向
}
},
//sprite 雪碧图 //grunt-spritesmith
sprite: {
options: {
//追加时间戳，默认不追加
spritestamp: true
},
//image-set 示例
all: {
src: ‘src/images/*.jpg‘,
dest: ‘dist/images/spritesheet.png‘,
destCss: ‘dist/css/sprites.css‘
}
},
sass: {
dist: {
// src:‘src/**/*.scss‘,
// dest:‘dist/css/compiled.css‘
options: { // Target options
style: ‘expanded‘
},
files: {
‘src/css/all.css‘: ‘src/sass/all.scss‘
}
}

},
//清理文件
clean: {
html: [‘dist/**/*.html‘],
sass: [‘src/sass/all.scss‘],
css: [‘dist/css/*.css‘],
js: [‘dist/js/*.js‘],
images: [‘dist/images/**/*.{png,jpg,jpeg,gif}‘]
},
//合并 html
includereplace: {
dist: {
files: [
{ src: [‘**/*.html‘], dest: ‘dist‘, expand: true, cwd: ‘src‘ }
]
}
}

});

//加载包含"uglify" 任务的插件
grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
grunt.loadNpmTasks(‘grunt-contrib-copy‘);
grunt.loadNpmTasks(‘grunt-contrib-jshint‘);
//grunt.loadNpmTasks(‘grunt-contrib-qunit‘);
grunt.loadNpmTasks(‘grunt-contrib-htmlmin‘);
grunt.loadNpmTasks(‘grunt-contrib-cssmin‘);
grunt.loadNpmTasks(‘grunt-contrib-watch‘);
grunt.loadNpmTasks(‘grunt-contrib-concat‘);
grunt.loadNpmTasks(‘grunt-contrib-imagemin‘);
grunt.loadNpmTasks(‘grunt-usemin‘);
grunt.loadNpmTasks(‘grunt-contrib-requirejs‘);
grunt.loadNpmTasks(‘grunt-spritesmith‘);
grunt.loadNpmTasks(‘grunt-contrib-sass‘);
grunt.loadNpmTasks(‘grunt-contrib-clean‘);
grunt.loadNpmTasks(‘grunt-include-replace‘);

//默认被执行的任务列表
//grunt.registerTask(‘dev‘,[‘clean‘,‘copy‘,‘concat‘,‘sass‘,‘uglify‘,‘copy‘,‘usemin‘,‘htmlmin‘]);
grunt.registerTask(‘dev‘, [‘clean‘, ‘jshint‘, ‘copy‘, ‘concat:concatsass‘, ‘sass‘, ‘concat:build‘, ‘uglify‘, ‘includereplace‘, ‘usemin‘]);
grunt.registerTask(‘dist‘, [‘clean‘, ‘jshint‘, ‘copy‘, ‘concat:concatsass‘, ‘sass‘, ‘concat:build‘, ‘uglify‘, ‘cssmin‘, ‘includereplace‘, ‘usemin‘]);
};