gruntjs

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文章及項目可以將鏈接寫在回復中。謝謝。