Grunt 5分鐘上手：合併+壓縮前端代碼

Grunt 的各類優勢這裏就不扯了，對於 新手來講 合併(concat) + 壓縮(uglify) 前端代碼的需求量應該是最大的，這裏以這倆種功能爲主作一個5分鐘的入門吧！

工做環境

$ node -v
v0.10.35
$ npm -v
2.6.1
$ express -V
3.2.2
……

若是你沒準備好那就上： 傳送門 nodeJS 菜鳥入門 甚至上 google 百度一下 nodejs ……

搭建腳手架

一、項目 目錄結構：

$ express gruntTest -e
……自動省略提示……

二、package.json 添加：

"devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-uglify": "~0.1.2",
    "grunt-contrib-concat": "~0.1.1"
}

若是： "grunt-name":"*" 那麼將安裝該插件的最高版本，

三、安裝依賴，保存 package.json 後執行

$ cd gruntTest && npm install

那麼 npm 將開始自動安裝依賴的插件，或者你也能夠手動 install 添加各個插件，如：

npm install grunt-contrib-concat --save-dev

它將自動保存到 「devDependencies」 裏面。

四、新建 Gruntfile.js （grunt 0.4.X 開始 grunt.js 重命名了）輸入 ：

module.exports = function(grunt) {
    //init初始化
    grunt.initConfig({
        //讀取 package
        pkg : grunt.file.readJSON('package.json'),
        //合併插件的 設置
        concat : {
            options : {
                stripBanners: true,
                // 正則匹配文件
                banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
                        '<%= grunt.template.today("yyyy-mm-dd") %> */',
            },
            // 原始位置，輸出位置
            dist : {
                src: ['public/javascripts/a.js', 'public/javascripts/b.js'],
                dest: 'public/assets/built.js'
            }
        },
        //壓縮插件的設置
        uglify : {
            options : {
                banner : '/*! <%= pkg.name %> '+
                         '<%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build : {
                src : 'public/assets/built.js',
                dest : 'public/assets/built.min.js'
            }
        }
    });
    //載入執行依賴
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    //註冊任務 
    grunt.registerTask('default', ['concat', 'uglify']);
};

到這裏工做環境的腳手架基本ok， build 的路徑根據實際項目來就好了，確認路徑後就能夠執行編譯了。

執行 grunt

$ grunt
Running "concat:dist" (concat) task
File "public/assets/built.js" created.

Running "uglify:build" (uglify) task
File "public/assets/built.min.js" created.
Uncompressed size: 142 bytes.
Compressed size: 46 bytes gzipped (70 bytes minified).

Done, without errors.

放一下樓主的目錄結構：

看下時間吧， 真的花了 5分鐘嗎~~~

源碼

本次練習源碼

你懂得！

---

完