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

轉載于:https://www.cnblogs.com/fyking/p/3842421.html

總結

以上是生活随笔為你收集整理的grunt前端构建工具使用教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。