grunt使用入門（zz）

下面介紹grunt的基本使用方法，把前端項目中的對個js文件，合併到一塊兒，並壓縮。

注意，例子用的是grunt 0.4.5版本，低版本可能在配置上有所不一樣。

工具/原料

• node

方法/步驟

1. 首先用npm在global環境安裝grunt-cli ，注意在任何目錄下 install -g都是同樣的

   npm install -g grunt-cli
2. 安裝grunt插件時項目中必定要package.json，因此在項目中加一個最簡單的package.json。否則的話插件安裝不上。
3. 在項目目錄下安裝grunt 

   npm  instal grunt --save-dev
4. 我在前端項目中常常須要concat和壓縮，因此一下只掩飾這兩個插件

   npm install grunt-contrib-concat grunt-contrib-uglify --save-dev
5. 把開發目錄下的全部js，合併到dist目錄保存爲main.js

   concat: {

           dist: {

               // the files to concatenate

               src: ['src/*.js'],

               // the location of the resulting JS file

               dest: 'dist/main.js'

           }

       }

   把合併目錄下的js，壓縮

   uglify: {

           dist: {

               files: {

                   'dist/main.min.js': ['<%= concat.dist.dest %>']

               }

           }

       }

   若是不用'<%= concat.dist.dest %>'，而是直接寫路徑dist/main.js，那極可能在壓縮時main.js尚未生成

   所有代碼以下圖
6. 運行grunt後結果以下
7. 7

   這個是dist文件夾下的內容

   
   

   來源：  http://jingyan.baidu.com/article/546ae185058da31149f28ce1.html

來自爲知筆記(Wiz)