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" } }