本例配置了一个较为常用grunt插件配置,以满足基本的前端开发需求:
基本的安装与配置可以参考:http://blog.csdn.net/xwlyun/article/details/42076125
package.json:
{
"name":"demo",
"version":"0.1.0",
"author":"xwl",
"private":true,
"devDependencies":{
"grunt":"~0.4.0",
"grunt-contrib-cssmin":"*",
"grunt-contrib-uglify":"*",
"grunt-contrib-watch":"*"
}
}
cssmin:css压缩与合并;
uglify:js压缩与合并;
watch:文件监控自动执行任务;
Gruntfile.js:
module.exports = function(grunt){
// 加载所有模块grunt-*,需要npm intall matchdep
//require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.initConfig({
pkg:grunt.file.readJSON('package.json'),
// js压缩
uglify: {
options: {
// 添加banner
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
// 压缩一个js文件
build: {
files: {
'style/hello.min.js': ['style/hello.js']
}
},
// 分别压缩所有js文件
build_all: {
expand: true, // 启用下面的选项
cwd: 'style/', // 待压缩的文件路径
src: ['*.js','!*.min.css','!jquery*.js'], // 匹配所有.js文件,排除.min.js文件,排除juery*.js文件
dest: 'style/', // 生成的压缩文件存放路径
ext: '.min.js' // 生成的文件后缀名为.min.js
},
// 压缩并合并js文件
release: {
files: {
'style/<%= pkg.name %>.min.js': [
'style/*.js',
'!style/*.min.js',
'!style/jquery*.js'
]
}
}
},
// css压缩
cssmin: {
options: {
// 添加banner
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
release: {
files: {
'style/<%= pkg.name %>.min.css': [
'style/*.css',
'!style/*.min.css'
]
}
}
},
// 监控
watch: {
js: {
files: [
'style/*.js',
'!style/*.min.js',
'!style/jquery*.js'
],
tasks: ['uglify:release']
},
css: {
files: [
'style/*.css',
'!style/*.min.css'
],
tasks: ['cssmin:release']
}
}
});
grunt.registerTask('default',[]);
};
cmd到项目根目录,执行grunt watch,开始执行grunt任务: