# Grunt 快速入門

Grunt 是JS的任務自動化工具。假設咱們使用它來作js文件的混淆，咱們須要以下組件：

grunt-cli 命令行
grunt     grunt組件
grunt-contrib-uglify-es 代碼混淆組件
複製代碼

首先安裝在繼續學習前，你須要先將Grunt命令行（CLI）安裝到全局環境中，把另外兩個加入到本地開發依賴中：

npm install -g grunt-cli
npm install grunt  --save-dev
npm install grunt-contrib-uglify-es --save-dev
複製代碼

項目練手

假定你有一個項目，應該有一個配置好package.json，咱們可使用以下命令生成此文件：

npm init -y
複製代碼

假設一個action.js文件，內容以下：

console.log(`42`)
複製代碼

Gruntfile文件案例

想要把任務自動化跑起來，還須要一個Grunt配置文件：

touch Gruntfile.js
複製代碼

Grunt 配置中， grunt-contrib-uglify 插件中的uglify 任務:

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'action.js',
                dest: 'action.min.js'
            }
        }
    });
    // 加載包含 "uglify" 任務的插件。
    grunt.loadNpmTasks('grunt-contrib-uglify-es');
    // 默認被執行的任務列表。
    grunt.registerTask('default', ['uglify']);
};
複製代碼

前面已經向你展現了整個 Gruntfile，接下來將詳細解釋其中的每一部分。

如今能夠指定grunt命令了：

grunt
複製代碼

你能夠在當前目錄內發現生成的action.min.js文件。它是action.js的混淆版本。你能夠試試：

node action.min.js
複製代碼

和： node action.js

你會發現它們的執行效果是同樣的。

包裝函數

你所書寫的做爲配置的代碼，都必須放在此函數內：

module.exports = function(grunt) {
    // 你的代碼
};
複製代碼

###項目和任務配置

若是任務須要引用package.json的話，可使用：

grunt.file.readJSON('package.json')
複製代碼

將存儲在package.json文件中配置引入進來。而後就能夠經過形如<% %>的模板字符串來引用配置屬性：

banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
複製代碼

與大多數task同樣，grunt-contrib-uglify-es 插件中的uglify 任務要求它的配置被指定在一個同名屬性中。也就是uglify內

build: {
            src: 'src/<%= pkg.name %>.js',
            dest: 'build/<%= pkg.name %>.min.js'
        }
    }
複製代碼

build內的src指定了uglify任務的源文件，dest指定uglify的目的文件。

加載 Grunt 插件和任務

只要在 package.json 文件中被列爲依賴包，並經過npm install安裝以後，均可以在Gruntfile中以簡單命令的形式使用：

// 加載可以提供"uglify"任務的插件。
grunt.loadNpmTasks('grunt-contrib-uglify-es');
複製代碼

自定義任務

經過定義 default 任務，可讓Grunt默認執行一個或多個任務:

// Default task(s).
grunt.registerTask('default', ['uglify']);
複製代碼

更多插件

相似grunt-contrib-uglify這些經常使用的任務，都已經以grunt插件的形式被開發出來了：

concatenation 文件鏈接工具
minification  文件壓縮工具
linting       代碼規範工具
複製代碼

用法都是相似的。