grunt 隨筆記

時間 2019-11-26

標籤 grunt 隨筆欄目 Node.js 简体版

原文原文鏈接

安裝CLI
先將Grunt命令行（CLI）安裝到全局環境中。安裝時可能須要使用sudo（針對OSX、*nix、BSD等系統中）權限或者做爲管理員（對於Windows環境）來執行如下命令。
npm install -g grunt-cli
準備一份新的使用Grunt 項目
通常須要在你的項目中添加兩份文件：package.json 和 Gruntfile
package.json: 此文件被npm用於存儲項目的元數據，以便將此項目發佈爲npm模塊。你能夠在此文件中列出項目依賴的grunt和Grunt插件，放置於devDependencies配置段內。
Gruntfile: 此文件被命名爲 Gruntfile.js ，用來配置或定義任務（task）並加載Grunt插件的。 css

$ npm init 初始化一個package.json配置項
建立一個gruntfile.js文件html

安裝Grunt最新版本到項目目錄中，並將其添加到devDependencies內：
npm install grunt --save-devjquery

安裝須要使用模塊
這裏舉例使用concat拼接js文件的模塊
npm install grunt-contrib-concat --save-devgit

對Gruntfile.js文件配置或定義任務（task）並加載Grunt插件的github

module.exports = function (grunt) {

    // 注意：加載插件以前必定要先安裝插件

    // 加載concat插件
    grunt.loadNpmTasks('grunt-contrib-concat');
    // 加載uglify插件
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 加載watch插件
    grunt.loadNpmTasks('grunt-contrib-watch');
    // 加載cssmin插件
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    // 加載htmlmin插件
    grunt.loadNpmTasks('grunt-contrib-htmlmin');

    // 配置任務
    grunt.initConfig({

        // 獲取配置信息對象
        pkg: grunt.file.readJSON('package.json'),

        // 鏈接文件任務
        concat: {
            // 鏈接文件的選項
            options: {
                // separator: '/*一堆分號*/',//會插入文件之間
                banner: '/*! <%= pkg.description %> - v<%= pkg.version %> - ' +
                '<%= grunt.template.today("yyyy-mm-dd") %> */',
            },

            // 具體的鏈接動做
            dist: {
                // 要鏈接的文件列表
                src: ["jquery/jquery.js", "jquery/jquery.fullscreen.js", 'js/FullScreen.js', 'js/SecondManager.js', "js/Label.js", "js/Differences.js", "js/Scene.js", "js/StartScene.js", "js/GameScene.js", "js/TimeoutScene.js", "js/CompleteScene.js", "js/Audio.js", "js/Game.js", "js/GameSceneDatas.js", "js/main.js",],
                // 鏈接後生成的文件
                dest: 'game.js',
            },
        },
        // 壓縮js文件，也能夠鏈接js文件
        uglify: {
            // 壓縮文件的選項
            options: {
                // separator: '/*一堆分號*/',//會插入文件之間
                banner: '/* <%= pkg.description %> - v<%= pkg.version %> - ' +
                '<%= grunt.template.today("yyyy-mm-dd") %> */\r\n',
            },
            // 一個具體的壓縮動做
            game: {
                // 配置壓縮文件
                files: {
                    // 壓縮後生成文件：待壓縮文件，能夠有多個
                    'game.min.js': ['game.js']
                }
            }
        },
        // 監視文件變化並自動執行任務
        watch: {
            // 一個具體的監視動做
            game: {
                // 要監視的js文件夾裏的全部js文件
                files: ["js/*.js", "Gruntfile.js"],
                // 當文件變化時要執行的任務
                tasks: ["concat", "uglify"]
            },
            css: {
                files: ["index.css"],
                tasks: ["cssmin"]
            },
            html:{
                files:["index.html"],
                tasks:["htmlmin"]
            }
        },
        // 壓縮css文件
        cssmin: {
            // 一個壓縮動做
            target: {
                // 配置壓縮文件
                files: {
                    // 壓縮後生成的文件：待壓縮列表
                    'index.min.css': ['index.css']
                }
            }
        },
        htmlmin: {
            options: {                                 
                removeComments: true,//刪除註釋
                collapseWhitespace: true//刪除空白
            },
            index: {
                files: {
                    "index.min.html": "index.html"
                }
            }
        }
    });

    // 添加註冊只需使用grunt就會自動執行如下事件，最後開始監聽
    grunt.registerTask("default",["concat","uglify","cssmin","htmlmin","watch"]);
    
}