grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：
① 压缩文件
② 合并文件
③ 简单语法检查
安装
npm install -g grunt-cli
设置配置文件
在使用grunt的项目中, 都有个Gruntfile.js的配置文件
- 参考如下:
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
//Read the package.json (optional)
pkg: grunt.file.readJSON('package.json'),
// Metadata.
meta: {
basePath: './',
srcJsPath: './public/js/', //js目录地址
srcSassPath: './public/css/', //sass文件目录地址
srcImgPath: './public/images/', //images目录地址
destPath: './public/dist/' //目标目录地址
},
// js文件合并与压缩
uglify: {
compressjs: {
files: {
'<%= meta.destPath %>base.min.js': ['<%= meta.srcJsPath %>zepto.min.js', '<%= meta.srcJsPath %>base.js']
}
}
},
// sass编译与压缩
sass: {
dist: {
options: {
style: 'compressed',
sourcemap: 'none' //是否生成sass map
},
files: [
{'<%= meta.destPath %>style.min.css': '<%= meta.srcSassPath %>style.scss'}
]
}
},
// 自动雪碧图
sprite: {
options: {
// sprite背景图源文件夹，只有匹配此路径才会处理，默认 images/slice/
imagepath: '<%= meta.srcImgPath %>slice/',
// 映射CSS中背景路径，支持函数和数组，默认为 null
imagepath_map: null,
// 雪碧图输出目录，注意，会覆盖之前文件！默认 images/
spritedest: '<%= meta.destPath %>/images/',
// 替换后的背景路径，默认 ../images/
spritepath: '../images/',
// 各图片间间距，如果设置为奇数，会强制+1以保证生成的2x图片为偶数宽高，默认 0
padding: 0,
// 是否使用 image-set 作为2x图片实现，默认不使用
useimageset: false,
// 是否以时间戳为文件名生成新的雪碧图文件，如果启用请注意清理之前生成的文件，默认不生成新文件
newsprite: false,
// 给雪碧图追加时间戳，默认不追加
spritestamp: false,
// 在CSS文件末尾追加时间戳，默认不追加
cssstamp: true,
// 默认使用二叉树最优排列算法
algorithm: 'binary-tree',
// 默认使用`pixelsmith`图像处理引擎
engine: 'pixelsmith'
},
autoSprite: {
files: [{
// 启用动态扩展
expand: true,
// css文件源的文件夹
cwd: '<%= meta.destPath %>',
// 匹配规则
src: '*.css',
// 导出css和sprite的路径地址
dist: '<%= meta.destPath %>css/',
// 导出的css名
ext: '.sprite.css'
}]
}
},
// 监听文件变化, 自动编译
watch: {
build: {
files: [
'<%= meta.srcJsPath %>*.js', '<%= meta.srcSassPath %>*.scss'
],
tasks: ['uglify', 'sass', 'sprite']
}
}
});
//添加任务依赖
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-css-sprite');
// 默认被执行的任务列表。
grunt.registerTask('default', ['uglify', 'sass', 'sprite', 'watch']);
};
- 类似的文件目录结构
├── public/
│ ├── dist/ # build files
│ │ └── ...
│ ├── css/ # scss files
│ │ └── ...
│ ├── js/ # js files
│ │ └── ...
│ └── images/ # images files
│ └── ...
├── Gruntfile.js/ # grunt setting
├── index.html # index.html template
├── package.json # build scripts and dependencies
└── ... # others
