web 开发自动化grunt
现在web开发自动化已很流行，如何进行压缩文件，如何进行测试js是否正确，如何进行
检测html文件是否规范等等都可以通过web自动化技术进行实现，只要打一个命令即可。
本文主要是通过grunt进行实现。
grunt如何安装请参看Grunt中文网 "http://gruntjs.cn/"
如果要添加其他组件利用nodejs的npm包管理工具进行安装:"npm install grunt-contrib-quint --save-dev"
命令执行完后会自动在package.json中添加
在项目文件中要添加"package.json"和"Gruntfile.js"文件。
"package.json"：是项目信息。
"Gruntfile.js"：项目所加载的自动化处理组件。
"pageage.json"文件内容如下：
{ "name": "gruntdemo", "version": "0.1.0", "description": "grungdemo", "author": "tom", "devDependencies": { "grunt": "^0.4.5", "grunt-contrib-clean": "^0.5.0", "grunt-contrib-concat": "^0.4.0", "grunt-contrib-imagemin": "^0.7.1", "grunt-contrib-uglify": "^0.5.0" } }
"Gruntfile.js"文件内容如下：
module.exports = function (grunt) {
'use strict';
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
banner:'/*<%=pkg.author%>*/\n',
clean:{
src:['dist']
},
concat:{
options:{
banner:'<%=banner%>',
stripBanners:true
},
dist:{
src:['src/*.js'],
dest:'dist/<%=pkg.name%>.js'
}
},
uglify:{
options:{
banner:'<%=banner%>'
},
/* dist:{
src:'<%=concat.dist.dest%>',
dest:'dist/t<%=pkg.name%>.min.js'
}*/
/*dist:{
files:{
'dist/t<%=pkg.name%>.min.js':['<%=concat.dist.dest%>']
}
}*/
dist:{
files:[
{
src:'<%=concat.dist.dest%>',
dest:'dist/t<%=pkg.name%>.min.js'
}
]
}
},
imagemin: {
/* 压缩图片大小 */
dist: {
options: {
optimizationLevel: 3 //定义 PNG 图片优化水平
},
files: [
{
expand: true,
cwd: 'img/',
src: ['**/*.{png,jpg,jpeg}'], // 优化 img 目录下所有 png/jpg/jpeg 图片
dest: 'img/' // 优化后的图片保存位置，覆盖旧图片，并且不作提示
}
]
}
}
});
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
//grunt.registerTask('img', ['imagemin']);
grunt.registerTask('default',['clean','concat','uglify']);
};
现在通过grunt命令即可，实现js的压缩和图片的压缩。