Using Grunt to Concatenate and Minify JS

使用Grunt來自動合併縮小Javascript

這篇是如何用Grunt來合併縮小多個Javascript,至於範例在我的Github

需要的Plugins

1. grunt-contrib-concat  (用來合併檔案用)
2. grunt-contrib-uglify  (用來壓縮你的js的內容,內容並且會醜化讓你認不得是你寫的 XD)
3. grunt-contrib-htmlmin (用來壓縮html的檔案)
4. grunt-usemin          (用來整合concat跟uglify plugin)

測試環境

我這次測試的目的是將在index.html中的多個js檔案做合併跟縮小,然後將會自動改成main.js
以下是我的測試架構
    ├── dist       (最後要合併縮小js的輸出目的地,這個目錄底下的檔案都是grunt產生的)
    │   ├── index.html
    │   └── js
    │       └── main.js
    ├── Gruntfile.js     (自動化執行的js file)
    ├── index.html       (阿 這個應該不用講了)
    ├── js               (所有js file的目錄 XD 一眼就看得出來了吧)
    │   ├── jquery.js
    │   └── modernizr.js
    ├── package.json     
    └── README.md
index.html
在index.html你會看到我用了<!-- build:js js/main.js --><!-- endbuild -->
來將jquery跟modernizr來包住並且指定他最後會被合併跟縮小成main.js
 <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!-- build:js js/main.js -->
            <script src="js/jquery.js"> </script>
            <script src="js/modernizr.js"> </script>
        <!-- endbuild -->
    </head>
    <body>
    </body>
</html>
Gruntfile.js
我的grunt中只有建立build這個task,以下的檔案不要直接複製來用,請直接到我的Github下載
module.exports = function(grunt) {
    var appConfig = {
        dist: 'dist',
        app: '.'
    };
    grunt.initConfig({
        app: appConfig,
        pkg: grunt.file.readJSON('package.json'),
        htmlmin: {
            dist: {
                files: [{
                    expand: true,
                    cwd: '<%= app.app %>',      (切換到你要的目錄下,我這邊設定還是原來的目錄)
                    src: ['*.html'],            (來源的檔案跟cwd有關)
                    dest: '<%= app.dist %>'     (處理完的檔案要放的地方)
                }]
            }
        },
        useminPrepare: {        (從index.html中的<build:js>的標籤找出要處理的js檔案,並且設定好參數)
            html: 'index.html',
            options: {
                dest: '<%= app.dist %>'
            }
        },
        usemin: {                               
            html: ['dist/{,*/}*.html'],         (要處理的html檔案位置)
            options: {
                assetsDirs: ['<%= app.dist %>'],
                debugInfo: true                (秀出更多訊息)
            }
        }
    });

    require('load-grunt-tasks')(grunt);
    grunt.registerTask('build', [       (grunt的task build)
        'useminPrepare',
        'concat',
        'uglify',
        'htmlmin',
        'usemin'
    ]);
};
最後你設定完之後只要下grunt build這個command就可以看到dist/index.htmldist/js/main.js
以下是dist/index.html的內容
 <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/main.js"></script>
    </head>
    <body>

    </body>
</html> 
張貼留言

這個網誌中的熱門文章

Unions 在C語言的簡單介紹

解釋scope.$apply用來做什麼? -- AngularJS

JavaScript的Timer用法