grunt自定义任务——合并压缩css和js

npm文档:www.npmjs.com

grunt基础教程:http://www.gruntjs.net/docs/getting-started/

  http://www.w3cplus.com/tools/grunt-tutorial-start-grunt.html
  http://www.w3cplus.com/tools/grunt-tutorial-installing-grunt.html
package配置文件
  http://blog.csdn.net/woxueliuyun/article/details/39294375

    npm install grunt@0.4.5 --save-dev//安装grunt
    npm install -g grunt-cli//全局执行cli
    npm install
    grunt --version//检测

grunt执行子任务:

grunt.initConfig({
concat: {
js:{},
css:{}
}
})

以上代码,只执行合并css,可以 grunt concat:css

一、需求

1.执行grunt——默认合并压缩js和css
2.执行grunt js——合并压缩js
3.执行grunt css——合并压缩css

二、依赖插件

1.js压缩:uglify    https://github.com/gruntjs/grunt-contrib-uglify

三、代码

[GruntFile.js]

module.exports = function(grunt) {
grunt.initConfig({
timestamp:'<%= grunt.template.today("yyyymmddHHMM") %>',
jspath:'app/js/',
csspath:'app/css/',
concat: {
js:{
options: {
separator: ';'
},
src: [
"<%= jspath %>template.js",
"<%= jspath %>returnCode.js",
],
dest: '<%= jspath %>all.<%= timestamp %>.js'
},
css:{
src: [
'<%= csspath %>manage.css',
'<%= csspath %>jqpagination.css'
],
dest: '<%= csspath %>all.<%= timestamp %>.css'
}
},
uglify: {
options: {
banner: '/*! <%= concat.js.dest %> */\n'
},
dist: {
files: {
'<%= jspath %>all.min.<%= timestamp %>.js': ['<%= concat.js.dest %>']
}
}
},
cssmin: {
minify: {
expand: true,
cwd: '<%= csspath %>',
src: 'all.<%= timestamp %>.css',
dest: '<%= csspath %>',
ext: '.min.<%= timestamp %>.css'
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
//自定义任务
grunt.registerTask('default', ['concat','uglify','cssmin']);//默认
grunt.registerTask('js', ['concat:js','uglify']);
grunt.registerTask('css', ['concat:css','cssmin']);
};

[pakeage.json]

{
"name": "test",
"author": "youryida",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-concat": "^0.4.0",
"grunt-contrib-uglify": "^0.4.0",
"grunt-contrib-cssmin": "latest"
}
}
上一篇:IIS发布错误及解决


下一篇:【javascript】数据结构-集合