Grunt： 拼接代碼，js醜化（壓縮），css壓縮，html壓縮，觀察文件，拷貝文件，刪除文件，壓縮文件

準備工做

grunt 基於nodeJs因此 nodeJs須要的基礎配置都須要安裝

 

1.Grunt 安裝

npm install -g grunt-cli 這是全局安裝

2.在當前文件下npm init

配置package.json文件

3.安裝了grunt，這個只是一個框架，裏面會用不少插件，具體能夠去官網查看，這裏記錄了8種簡單的用法。

3.1 把指定的文件所有拼接變爲一個文件，插件名稱：grunt-contrib-concat。
3.2 把js醜化也就是壓縮，函數名稱廣泛變成a，b，c，d，e，f等通常狀況是沒法再看懂的。 插件名稱 grunt-contrib-uglify。
3.3 css壓縮，把css統一壓縮在一行。插件名稱 grunt-contrib-cssmin。
3.4 html壓縮，同上和css差很少。插件名稱 grunt-contrib-htmlmin。
3.5 觀察指定的文件，當這個文件內部發生變化的時候，執行某些操做。插件名稱 grunt-contrib-watch。
3.6 拷貝文件，把一個指定文件拷貝指定的位置。插件名稱 grunt-contrib-copy。
3.7 刪除一個指定文件。插件名稱 grunt-contrib-clean。
3.8 壓縮文件，指定的文件壓縮。至關於右鍵壓縮插件名稱 grunt-contrib-compress。

這些都是nodeJs包。

安裝以前須要安裝 grunt ，安裝： npm install grunt --save ，若是全局安裝過了 就不須要安裝

安裝某個插件： npm install (某個插件名稱) --save 來進行安裝，須要哪些安裝哪些，此處安裝上面說到的8個插件。

安裝完成以後，準備工做就差很少了。接下來須要進行配置

4.配置文件，配置文件名稱爲：Gruntfile.js 。

5.在這個 Gruntfile.js 文件裏面進行配置，須要在module.exports = function(grunt){在這個函數裏面進行配置，整體分三步}。

第一步 導入也就是加載插件  grunt.loadNpmTasks('grunt-contrib-concat');

第二步 進行配置任務，須要在grunt.initConfig({這個裏面來進行配置})，配置內容根據需求，配置不一樣

第三步 指定任務調取代碼 grunt.registerTask('指定調取命令', ["配置名稱"]);  能夠單獨執行一個任務，也能夠組合執行任務 grunt.registerTask('指定調取命令', ["配置名稱"，"配置名稱"，"配置名稱"]); 

至此配置完成。

6.調取： grunt 指定調取命令

 

Gruntfile.js 文件中具體代碼以下：這裏進行了一次性配置這個八個插件

module.exports = function (grunt) {
    // 使用的插件導入進來加載插件
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-htmlmin');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-compress');
    // 配置任務
    grunt.initConfig({
        // 讀取package.json的內容，下面用到時候能夠進行調用
        pkg: grunt.file.readJSON('package.json'),

        // 鏈接文件 concat配置名稱
        concat: {
            // 鏈接文件的選項
            options: {
                // 分割符會插入到每個文件和下一個文件之間，自定義
                separator: "/*<===========>*/"
                // 通常會插入到拼接後文件的起始位置，相似於一個標題，這個符號能夠書寫變量<%=變量%>，也能夠直接寫字符串。自定義
                banner: '/*!<%=pkg.description%> - - <%=grunt.template.today("yyyy-mm-dd")%> */'
            },
            // 列出
            dist: {
                // 要鏈接的文件，是個數組根據本身的文件位置以及文件來進行書寫
                src: [
                    "js/jquery.js",
                    "js/jquery.fullscreen.js",
                    "js/FullScreen.js",
                    "js/SecondManager.js"
                ],
                // 鏈接後生成的文件，文件名稱自定義。
                dest: 'game.js'
            }
        },

        // 壓縮js
        uglify: {
            options: {
                banner: '/*這裏能夠本身定義文字 也能夠穿參數*/'
            },
            game: {
                files: {
                    // 壓縮後產生的文件以及位置（文件地址名稱自定義） ： 待壓縮文件，能夠多個
                    "dist/game.js": ["game.js"]
                }
            }
        },

        // 監視文件
        watch: {
            // 一個具體的監視
            game: {
                // 要監視的文件 當下面的文件中內容發生改變時候調用tasks裏面的任務，一個*表示這個文件不包括文件夾的全部文件，兩個**表示所有文件
                files: ['js/*.js', "Gruntfile.js"],
                // 當文件發生變化的時候要執行的任務
                tasks: [
                    'concat',
                    'uglify'
                ]
            }
        },

        // 壓縮css
        cssmin: {
            index: {
                // 壓縮文件
                files: {
                    // 壓縮後生成文件以及地址 （自定義）：等待壓縮文件，數組類型，可書寫多個
                    'dist/index.css': ["index.css"]
                }
            }
        },

        // 壓縮html
        htmlmin: {
            options: {
                // 是否清楚註釋
                removeComments: true,
                // 是否清楚空白行
                collapseWhitespace: true
            },
            index: {
                files: {

                   // 壓縮後生成文件以及地址 （自定義）：等待壓縮文件，數組類型，可書寫多個
                    'dist/index.html': "index.html"
                }
            }
        },

        // copy
        copy: {
            dist: {
                // 要複製的文件列表
                files: [
                    {
                        // 擴展，擴展了什麼也不是很清楚
                        expand: true,
                        // 要拷貝的文件地址 一個*表示當前文件下直屬的 內部若還有文件不進行拷貝，兩個**表示所有拷貝
                        src: ["images/*", "mp3/**"],
                        // 要拷貝到的地址
                        dest: "dist/",
                        // 過濾對拷貝內容進行篩選
                        filter: "isFile"
                    },
                ]
            }
        },

        // 刪除文件
        clean: {
            // 先去進行查找，指定文件夾下的指定文件
            dist: ["dist/", "Grunt.zip"],
            // 而後再進行刪除
            clear: ["dist/", "Grunt.zip"]
        },

        // 壓縮文件 compress配置名稱
        compress: {
            dist: {
                options: {
                    // 名稱
                    archive: "Grunt.zip"
                },
                files: [

                     // expend擴展，擴展了什麼也不是很清楚。

                     // 把dist/下的全部文件壓縮，src 兩個* 表明全部文件。
                    { expand: true, cwd: "dist/", src: ['**'] }
                ]
            }
        }

    });

// 以上爲配置，都是些簡單配置，還有豐富配置，例如增長標題等等，這裏沒有書寫。能夠去查這些插件的文檔能夠搜索到。

// 指定任務
 // 能夠組合任務 也能夠單獨執行一個

 // 單獨指定一個任務，（"調取名稱"，["配置名稱"]），根據需求能夠自定指定

 // 指定一個拼接任務

    grunt.registerTask('cle', ["concat"]);

// 指定一個壓縮任務
    grunt.registerTask('com', ["compress"]);

// 指定一個刪除任務
    grunt.registerTask('cle', ["clean"]);

 

// 組合任務 ，（"調取名稱"，["配置名稱"，"配置名稱"，"配置名稱"，"配置名稱"]） 中括號爲數組，能夠配置多個名稱，當調用以後逐個執行。

    grunt.registerTask('all', ["concat", "uglify", "cssmin", "htmlmin", "copy"]);

    grunt.registerTask('build', ["concat", "uglify", "cssmin", "htmlmin"]);

// 多重組合 （"調取名稱"，["以前定義的調取名稱"，"配置名稱"]）能夠添加以前定義的調取名稱，當到執行調用名稱時候，進入以前定義的這個名稱的任務進行執行，當執行完成以後，回到當前任務繼續執行下去。

    grunt.registerTask('default', ["build", "watch"]);  先去執行build這個任務，而後再執行watch監視任務。

    grunt.registerTask('dist', ["clean", "build", "copy", "compress"]); 先執行刪除任務，在執行build任務，而後拷貝，而後壓縮。

// 根據需求組合能夠多樣組合

 

調用 ：grunt 調取名稱

例如 ：grunt dist

grunt all 等等就能夠進行你指定的操做

 

當你以爲一次配置8個插件，裏面有些你不須要的 那個你就能夠單獨進行配置 配置你須要的 而後進行調取，整體步驟和上面同樣，只是導入插件只須要你需求的插件，配置只需配置你需求的配置就能夠了。例如：

module.exports = function (grunt) {
    // 使用的插件導入進來 加載插件
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    // 配置任務
    grunt.initConfig({
        // 讀取package.json的內容，這裏調取就無關緊要。
        pkg: grunt.file.readJSON('package.json'),
        // 壓縮css
        cssmin: {
            index: {
                // 壓縮文件
                files: {
                    // 壓縮後生成文件以及地址 ：等待壓縮文件
                    'dist/index.css': ["index.css"]
                }
            }
        },
    });
    // 指定任務
    grunt.registerTask('css', ["cssmin"])
}

調用 ：grunt 調取名稱 

grunt css 就能夠壓縮指定css

 

錯誤歸類：

當出現錯誤時候，通常都會提示，根據提示能夠查看進行修改，通常常見的一些錯誤如：

1.使用插件是否進行了下載安裝，grunt在全局安裝後，在當前文件可能未安裝須要從新安裝等。

2.package.json 依賴設置。

3.插件是否引入，引入是否正確。

4.配置任務關鍵詞是否錯誤。

5.存儲位置設置是否合理，命名是否衝突

6.是否指定任務，指定任務順序是否合理。

固然還有一些其餘的，根據錯誤提示來進行相應的更改。

以上是本身寫的一些總結~有什麼不足之處，還望補充，謝謝各位看官~~