gruntjs
gruntjs是构建前端可维护性的项目，如自动化、文件压缩、合并及单元测试等等。
关于package.json和Gruntfile.js基础介绍
1、在项目的当前目录下，新建packjson.json文件
{ "name":"mtest", "version":"0.1.0", "engines": { "node": ">= 0.8.0" }, "dependencies": { "async": "~0.1.22", "coffee-script": "~1.3.3", "colors": "~0.6.0-1", "dateformat": "1.0.2-1.2.3", "glob": "~3.1.21", "underscore.string": "~2.2.0rc", "which": "~1.0.5", "jade":"~1.3.3", "less":"~0.30.0" }, "devDependencies": { "grunt": "~0.4.0", "grunt-contrib-jshint": "~0.1.1", "grunt-contrib-uglify": "~0.1.2", "grunt-contrib-concat": "~0.1.1" } }
备注：
基础模板：grunt init:jquery
强制覆盖基础模板：grunt init:jquery --force
2、在项目的当前目录下，新建Gruntfile.js文件
module.exports = function(grunt) { //配置 grunt.initConfig({ pkg : grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } }, concat: { css: { src: ['src/style/lib/*.css'], dest: 'build/style/basic.css' }, js: { src: 'src/js/lib/*.js', dest: 'src/js/base.min.js' } }, cssmin: { css: { src: 'build/style/base.css', dest: 'build/style/base.min.css' } }, jade: { release: { options: { data: { debug: false }, compiler: 'compiler', pretty: true }, files: { "view/test.html": "view/test.jade" } } }, less: { production: { options: { yuicompress: true }, files: { "build/style/result.css": "build/style/source.less" } } } }); //载入插件 grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-css'); grunt.loadNpmTasks('grunt-contrib-jade'); grunt.loadNpmTasks('grunt-contrib-less'); //默认任务 grunt.registerTask('default', ['uglify' ,'concat', 'cssmin', 'jade', 'less']); }
备注：
配置、载入插件、任务
配置：
js文件压缩：uglify
css文件压缩：cssmin
js和css文件合并：concat
jade模板的使用：jade
less模板的使用：less
可以在option为其设置相应参数
载入对应的插件：
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-css');
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.loadNpmTasks('grunt-contrib-less');
任务：
grunt.registerTask('default', ['uglify' ,'concat', 'cssmin', 'jade', 'less']);
运行：
在当前项目下执行grunt命令
参考：
gruntjs_documentation
JavaScript 项目构建工具 Grunt 实践：合并文件
JavaScript 项目构建工具 Grunt 实践：安装和创建项目框架
使用GruntJS构建Web程序 (3)
利用 Grunt （几乎）无痛地做前端开发 (一)
如果有相关gruntjs文章及项目可以将链接写在回复中。谢谢。
