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文章及项目可以将链接写在回复中。谢谢。