关于grunt
Grunt中文网 ： http://www.gruntjs.net/getting-started
其它参考：http://www.2cto.com/kf/201407/314975.html
说明，大多数命令是在项目根目录运行
1. 安装node环境，因为grunt基于nodejs
2. 安装grunt-cli, npm install -g grunt-cli
3. 在根目录新建package.json,
{
"name": "AngularAndRequire",
"version": "0.1.0",
"description" : "AngularAndRequire1.0",
"author": "Mario.Li",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-uglify": "~0.2.1",
"grunt-contrib-concat": "~0.1.1"
}
}
其中dep与grunt相关， 在根目录运行npm install 就按照dep安装了grunt及其插件,当然也可以一个个安装。
4. 新建Gruntfile.js
module.exports = function(grunt) {
// 配置
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
concat : { ／／任务名称是需根据插件的说明来写
libs : { //目标名称随便你起
src: ['frontend/libs/*.js', '!frontend/libs/require.js'],
dest: 'dest/libs.js'
},
custs: {
src: ['frontend/**/*.js', '!frontend/libs/*.js'],
dest: 'dest/cust.js'
}
},
uglify : {
options : {
banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
buildlibs : {
src : 'dest/libs.js',
dest : 'dest/libs.min.js'
},
buildcusts : {
src : 'dest/cust.js',
dest : 'dest/cust.min.js'
}
}
});
// 载入concat和uglify插件，分别对于合并和压缩
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
// 注册任务
grunt.registerTask('default', ['concat', 'uglify']);
};
5. 在根目录运行grunt
压缩css
需要grunt-css插件
package.json
{
"name": "AngularAndRequire",
"version": "0.1.0",
"description" : "AngularAndRequire1.0",
"author": "Mario.Li",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-uglify": "~0.2.1",
"grunt-contrib-concat": "~0.1.1",
"grunt-css": "~0.5.4"
}
}
Gruntfile.js
module.exports = function(grunt) {
// 配置
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
concat : {
libs : {
src: ['frontend/libs/*.js', '!frontend/libs/require.js'],
dest: 'dest/libs.js'
},
custs: {
src: ['frontend/**/*.js', '!frontend/libs/*.js'],
dest: 'dest/cust.js'
},
css : {//css合并 与grunt-css无关
src : ['frontend/styles/*.css', '!frontend/styles/index.css'],
dest : 'dest/custCss.css'
}
},
uglify : {
options : {
banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
buildlibs : {
src : 'dest/libs.js',
dest : 'dest/libs.min.js'
},
buildcusts : {
src : 'dest/cust.js',
dest : 'dest/cust.min.js'
},
},
cssmin : { //css压缩
buildCss : {
src : 'dest/custCss.css',
dest : 'dest/custCss.min.css'
}
}
});
// 载入concat和uglify插件，分别对于合并和压缩
grunt.loadNpmTasks('grunt-css');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
// 注册任务
grunt.registerTask('default', ['concat', 'uglify', 'cssmin']);
};