ubuntu下安裝使用grunt

最近在推動項目使用grunt。具體各步驟操做的原理網上不少詳細的，但嘗試的過程當中仍是遇到了很多坑。如今寫一寫本身的安裝使用過程

1. 安裝nodejs。sudo apt-get install nodejs

2. 安裝命令行的grunt（grunt-cli） sudo npm install -g grunt-cli （如今的nodejs版本已經自帶npm了）

3. 創建一個grunt文件夾（mkdir grunt），進入此文件夾，運行npm init ，生成package.json文件，（注意：此時配置的name值不能和文件夾同名）

4. 加載插件 npm install grunt --save-dev，npm install grunt-contrib-concat grunt-contrib-clean grunt-contrib-copy grunt-contrib-cssmin grunt-contrib-imagemin grunt-contrib-uglify grunt-rev grunt-usemin --save-dev（分別對應：合併，清除文件，拷貝文件，css壓縮，圖片壓縮，js壓縮，修改文件名，修改html頁面引用路徑）

5. 新建Gruntfile.js，寫好配置js便可運行了。

---

下面，結合我本身的項目說說Gruntfile.js的寫法。
個人項目結構：public 文件夾 + templates

首先，將public和templates複製到grunt的安裝目錄下

個人需求是：將公用的幾個css合併成一個build.css,幾個公用的js合併成一個build.js,而後對public下全部的文件壓縮，而後修改文件md5名稱，並在html頁面及CSS和js裏修改相對應的引用，最後在dist目錄下生成執行完操做後的public和templates文件夾，這樣，直接將服務器上的這兩個文件夾直接替換掉就能夠了，本地的開發環境下依然是開發的文件
Gruntfile.js:

module.exports = function(grunt) {

    grunt.config.init({
        // 清空"生產環境"文件夾的文件
        clean: {
            html: {
                src: "dist/"
            },
            js: { // 清除複製過來js文件裏已合併的js
                src: [
                    'dist/public/js/zepto.min.js',
                    'dist/public/js/des3.js',
                    'dist/public/js/pako.js',
                    'dist/public/js/public.js'
                ]
            },
            css: {
                src: [
                    'dist/public/css/WebApp_reset.css',
                    'dist/public/css/public.css',
                    'dist/public/css/main_msg.css'
                ]
            }
        },
        // 合併js和css
        concat: {
            options: {
                separator: ';',
            },
            js: {
                src: [
                    'public/js/zepto.min.js',
                    'public/js/des3.js',
                    'public/js/pako.js',
                    'public/js/public.js'
                ],
                dest: 'dist/public/js/build.js'
            },
            css: {
                src: [
                    'public/css/WebApp_reset.css',
                    'public/css/public.css',
                    'public/css/main_msg.css'
                ],
                dest: 'dist/public/css/build.css'
            }
        },
        // 準備替換
        useminPrepare: {
            html: 'templates/*.html',
            options: {
                dest: 'dist/templates'
            }
        },
        // 替換全部MD5文件名，併合並資源標籤
        usemin: {
            css: 'dist/public/css/*.css',
            js: 'dist/public/js/*.js',
            html: 'dist/templates/*.html',
            options: {
                assetsDirs: ['dist/public/**'],
                patterns: {
                    js: [
                       //  [/(\/images\/[\/\w-]+\.png)/, 'replace image in js']
                       // 網上大部分都是這個，其實並不能替換js裏的img路徑
                       
                       [/(img\/[^'"']*?\.(?:gif|jpeg|jpg|png|webp|svg|ico))/gm, 'replace image in js']
                       // 替換img目錄下的監控到的圖片變化
                    ]
                },
                blockReplacements: { // 從新書寫link標籤，加 "/"結束符
                    css: function(block) {
                        return '<link rel="stylesheet" href="' + block.dest + '"/>';
                    }
                }
            }
        },
        // 壓縮js
        uglify: {
            generated: {
                expand: true,
                //相對路徑
                cwd: 'dist/public/js',
                src: '*.js',
                dest: 'dist/public/js/'
            }
        },
        // 複製js和html文件去"生產環境"
        copy: {
            html: {
                flatten: true,
                expand: true,
                src: 'templates/*.html',
                dest: 'dist/templates'
            },
            js: {
                flatten: true,
                expand: true,
                src: 'public/js/*.js',
                dest: 'dist/public/js/'
            },
            css: {
                flatten: true,
                expand: true,
                src: 'public/css/*.css',
                dest: 'dist/public/css/'
            }
        },
        // 壓縮css
        cssmin: {
            generated: {
                expand: true,
                //相對路徑
                cwd: 'dist/public/css/',
                src: '*.css',
                dest: 'dist/public/css/'
            }
        },
        // 圖片壓縮
        imagemin: {
            start: {
                options: {
                    optimizationLevel: 3 //定義 PNG 圖片優化水平
                },
                files: [{
                    expand: true,
                    cwd: 'public/img/',
                    src: ['**/*.{png,jpg,jpeg}'], // 優化 img 目錄下全部 png/jpg/jpeg 圖片
                    dest: 'dist/public/img/' // 優化後的圖片保存位置，覆蓋舊圖片，而且不做提示
                }]
            }
        },
        // 更改本地資源文件名 + MD5
        rev: {
            options: {
                encoding: 'utf8',
                algorithm: 'md5',
                length: 8
            },
            assets: {
                files: [{
                    src: [
                        'dist/public/img/*.{jpg,jpeg,gif,png}',
                        'dist/public/css/*.css',
                        'dist/public/js/**/*.js'
                    ]
                }]
            }
        },
    });
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.loadNpmTasks('grunt-usemin');
    grunt.loadNpmTasks('grunt-rev');
    grunt.registerTask('default', [
        'clean:html',// 清除dist下全部目錄
        'concat', // 合併css，js到dist目錄
        'copy', // 複製全部的html，js，css到dist下
        'useminPrepare',
        'uglify', // 壓縮全部的js
        'cssmin', // 壓縮全部的css
        'imagemin', // 壓縮全部的image到dist下
        'clean:js', // 清除已合併的js
        'clean:css', // 清除已合併的css
        'rev', // 給dist下全部的js、css、image加MD5
        'usemin' // 替換html上的引用地址
    ]);
}

`grunt.registerTask()`裏的加載順序就是我項目的打包執行順序。
最後，在當前的命令行下輸入 `grunt` 回車就開始執行`gruntfile`裏的配置。

遇到的一些問題：

1. 若是鍵入grunt沒有反應，多是nodejs的問題，ubuntu下有一個node的npm包，和nodejs是徹底沒有關係的，可能安裝node安裝了這個沒有關係的包，這會致使grunt運行不起來，只要將這個包刪除就好 sudo spt-get remove node。

2. usemin生成的link標籤是不帶/結束標籤的，須要手動寫標籤生成規則，詳見gruntfile.js裏的usemin配置

3. html頁面的替換資源書寫規則:

須要多個合併的文件都須要按grungfile裏配置的順序書寫，其餘的單個的文件須要改md5或者壓縮的都須要些一個build，上面第二條的配置裏面的block參數就是build區域