grunt前端構建工具使用教程

grunt能幹些什麼？

grunt實際上是哆啦a夢的百寶袋，是工具集，擁有很是豐富的任務插件，能夠實現各式各樣的構建目標。

按任務目標大體可分爲四類：

文件操做型：好比合並、壓縮js和css文件等（包括）

預編譯型：好比編譯less、sass、coffeescript等

類庫項目構建型：好比 angular、ember、backbone等（這種推薦使用yeoman）

工程質量保障型：好比jshint、jasmine、mocha等

除此以外還有像 watch （監聽文件改變，自動觸發構建）等功能。

使用工具：

node： http://www.nodejs.org

安裝：

window:安裝比較傻瓜式，就兩步。

1 下載源文件 http://www.nodejs.org/download/ 選擇對應的最新msi文件。

2 雙擊進行安裝。

linux：

1 wget下載源文件

打開 http://www.nodejs.org/download/,尋找到本身要下載的文件地址

# wget 源文件路徑

2 解壓文件

# tar xvf 文件路徑

3 進入解壓目錄

# cd node-v0.8.7

4 檢查所須要配置

# ./configure

5 安裝

# make install

6 檢查是否成功安裝，輸入命令：

# node -v

配置：

npm node pakeage manage 包管理

國內的npm鏡像配置

國內的npm安裝因爲某種緣由老是比較慢，因此須要在作些配置了。

設置 npm 國內鏡像 

npm config set registry http://registry.cnpmjs.org

可選項:使用cjnpm

grunt：https://github.com/gruntjs/

安裝：

grunt的安裝須要先安裝node才能繼續安裝。grunt也就是至關於node的一個模塊。

1 npm install -g grunt-cli

裏邊的-g 安裝到全局

卸載

npm uninstall -g grunt-cli

2 npm install -g grunt-init

使用grunt-init 進行配置（待補充）

配置：

packjson介紹：用於配置須要拉取的grunt插件信息。

{

    "name": "demo",

    "version": "1.0.0",

    "devDependencies": {

        "grunt-contrib-uglify": "~0.2.0"

    }

}

  裏邊的devDependecies用於定義須要引入的插件信息，定義你要拉取的依賴模塊，上面的代碼，拉取grunt-contrib-uglify插件（用於壓縮js），字段的值~0.2.0，指明須要模塊的版本號，「~」是至少的意思。

使用：npm install 依賴拉取成功後，在demo工程中生成了node_modules目錄，該目錄就包含了grunt-contrib-uglify插件模塊的代碼。

實例：建立gruntFile.js文件

module.exports = function(grunt) {

    // 構建任務配置

    grunt.initConfig({

        //讀取package.json的內容，造成個json數據

        pkg: grunt.file.readJSON('package.json'),

        uglify: {

            //文件頭部輸出信息

            options: {

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

            },

            //具體任務配置

            build: {

                //源文件

                src: 'src/hello-grunt.js',

                //目標文件

                dest: 'build/hello-grunt-min.js'

            }

        }

    });

    // 加載指定插件任務

    grunt.loadNpmTasks('grunt-contrib-uglify');

    // 默認執行的任務

    grunt.registerTask('default', ['uglify']);

};

grunt核心方法：

grunt.initConfig(obj)

initConfig用於配置構建信息，第一個參數必須是個object。

grunt.file.readJSON(path)

讀取一個json文件，一般咱們會把構建任務的基本配置寫在獨立的json文件內，方便咱們修改。

// 構建任務配置

grunt.initConfig({

    //讀取package.json的內容，造成個json數據

    pkg: grunt.file.readJSON('package.json')

});

上面代碼，將讀取的json賦值給pkg字段，想要獲取配置的值，就可使用pkg.name這樣的形式。

grunt.loadNpmTasks(pluginName)

加載指定插件任務，示例代碼以下：

grunt.loadNpmTasks('grunt-contrib-uglify');

能夠加載多個：

grunt.loadNpmTasks('grunt-contrib-uglify');

//css壓縮

grunt.loadNpmTasks('grunt-contrib-cssmin');

grunt.registerTask(taskName,taskArray)

註冊任務，好比下面的代碼：

grunt.registerTask('default', ['uglify']);

註冊默認執行的任務，即你運行grunt命令時，觸發的任務構建。

第二個參數爲任務目標名，在initConfig()中配置：

grunt.initConfig({

    //讀取package.json的內容，造成個json數據

    pkg: grunt.file.readJSON('package.json'),

    uglify: {

        //文件頭部輸出信息

        options: {

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

        },

        //具體任務配置

        build: {

            //源文件

            src: 'src/hello-grunt.js',

            //目標文件

            dest: 'build/hello-grunt-min.js'

        }

    }

});

uglify爲任務目標名，options爲grunt-contrib-uglify插件配置參數。

banner向輸出文件打印你須要的信息。

build爲具體任務構建配置

文件的簡單正則匹配語法

文件名（目錄路徑）的匹配，基本上和ant同樣。

* 匹配除了/外的任意數量的字符，好比foo/*.js

? 匹配除了/外的單個字符

** 匹配包含/的任意數量的字符，好比foo/**/*.js

! 排除指定文件，好比src: ['foo/*.js', '!foo/bar.js']

{} 能夠理解爲「or」表達式，好比src: 'foo/{a,b}*.js'

用法舉例：

//匹配foo目錄下全部th開頭的js文件

{src: 'foo/th*.js', dest: ...}

//等價於{src: ['foo/a*.js', 'foo/b*.js'], dest: ...}

{src: 'foo/{a,b}*.js', dest: ...}

//優先處理bar.js，而後再處理其餘文件

{src: ['foo/bar.js', 'foo/*.js'], dest: ...}

//排除處理foo/bar.js文件

src: ['foo/*.js', '!foo/bar.js'], dest: ...}

grunt經常使用插件  參見：http://gruntjs.cn/

1 經常使用插件有

  grunt-contrib-concat：文件合併

  grunt-contrib-copy：用於複製文件或目錄的插件

  grunt-contrib-clean：用於刪除文件或目錄的插件

  grunt-contrib-compress：用於壓縮文件和目錄成爲zip包

  grunt-contrib-jshint：js代碼檢查

  grunt-contrib-mincss：css壓縮

  grunt-contrib-uglify：js壓縮

  grunt-contrib-watch：實時監聽插件

  grunt-contrib-imagemin，可以快速的壓縮工程內的圖片

  grunt-contrib-yuidoc：基於YUIDOC生成js API文檔

  grunt-karma：單測迴歸插件

參考網頁：http://www.36ria.com/6192

http://www.36ria.com/6226

http://www.36ria.com/6273