最近看了下angular，順便就看到了前端自動化構(gòu)建工具grunt
Grunt和 Grunt 插件是通過 npm 安裝并管理的，npm是 Node.js 的包管理器。Grunt 0.4.x 必須配合Node.js >= 0.8.0
版本使用。

快速開始

• 安裝nodejs

brew install node

如果已經(jīng)安裝了nodejs，請確保當(dāng)前環(huán)境中所安裝的 npm 已經(jīng)是最新版本

sudo npm update -g npm

注：npm是nodejs自帶的包管理工具（類似于maven），不需要再另行安裝了

• 安裝grunt

sudo npm install -g grunt-cli

注：上述命令執(zhí)行完后，grunt 命令就被加入到你的系統(tǒng)路徑中了，以后就可以在任何目錄下執(zhí)行此命令了。注意，安裝grunt-cli并不等于安裝了 Grunt！Grunt CLI的任務(wù)很簡單：調(diào)用與Gruntfile在同一目錄中 Grunt。這樣帶來的好處是，允許你在同一個系統(tǒng)上同時安裝多個版本的 Grunt。

• 使用grunt
  • 新建文件夾, 如 grunt
  • 進入文件夾執(zhí)行

    npm init
    

Paste_Image.png

然后可以在文件夾中看到一個package.json，內(nèi)容如下：

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

注：name不能為grunt, 否則會報錯

• 安裝grunt插件

npm install <module> --save-dev

此命令不光安裝了<module>，還會自動將其添加到devDependencies配置段中，如下：

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
      "grunt-test": "file:grunt"
  }
}

npm install grunt --save-dev  #安裝Grunt最新版本到項目目錄中，并將其添加到devDependencies內(nèi)
npm install grunt-contrib-jshint --save-dev  #安裝 JSHint 任務(wù)模塊

• 新建Gruntfile.js文件，和package.json都位于項目根目錄下

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

以上是使用壓縮插件壓縮和混淆js

• 運行g(shù)runt

grunt  #在根目錄下執(zhí)行