摘要：

　　大部分項(xiàng)目在部署之前都需要做的就是js、css文件的壓縮、合并，以及一些文件的錯(cuò)誤檢查，甚至是將LESS文件轉(zhuǎn)換成css文件，coffeescript文件轉(zhuǎn)化成js文件等等。但是項(xiàng)目開(kāi)發(fā)是分迭代的，沒(méi)開(kāi)發(fā)完一次，上面的工作要重新做一遍。那有什么工具能幫助我們來(lái)做這些重復(fù)的工作呢？Grunt就是其中一個(gè)非常好用的工具。下面就來(lái)學(xué)習(xí)一下Grunt。

安裝：

　　Grunt是基于node.js，所以你先安裝node.js，安裝完之后，只需要執(zhí)行下面的命令就可以安裝Grunt

npm install -g grunt-cli

參數(shù)g表示全局安裝，grunt-cli表示安裝的是grunt的命令行界面。

　　安裝完成之后，他會(huì)把Grunt配置到你的系統(tǒng)路徑，允許其從任何目錄下運(yùn)行。安裝完之后并不能執(zhí)行操作，因?yàn)镚runt是基于模塊機(jī)構(gòu)，所以必須安裝模塊。模塊是局部的，是根據(jù)項(xiàng)目需求來(lái)安裝的。在項(xiàng)目的隨便一個(gè)目錄下（最好是根目錄，也可以隨便創(chuàng)建個(gè)目錄）新建一個(gè)文件---package.json(也可以通過(guò)node init來(lái)創(chuàng)建)，內(nèi)容如下：

{"name": "", // 項(xiàng)目名稱(chēng)"version": "", // 項(xiàng)目版本"private": true, // 項(xiàng)目是否私有"description": "", // 項(xiàng)目描述"main": "", // 項(xiàng)目主要文件"dependencies": {}, // 項(xiàng)目依賴(lài)的模塊"devDependencies": { // 項(xiàng)目開(kāi)發(fā)階段依賴(lài)的模塊"grunt": "0.x.x", // grunt模塊為最新的0.x.x版"grunt-contrib-clean": "~0.5.0", // clean插件不低于0.5.0"grunt-contrib-copy": "~0.5.0","grunt-contrib-less": "~0.11.0","grunt-contrib-uglify": "~0.4.0","grunt-contrib-watch": "~0.6.1","grunt-contrib-concat": "*"},"keywords": [], // 項(xiàng)目關(guān)鍵字"author": { // 作者"name": "","age": ""},"contributors": [], // 貢獻(xiàn)者 "license": "" // 版權(quán) }

?

?

然后在當(dāng)前目錄下，通過(guò)命令終端運(yùn)行npm install，這時(shí)你會(huì)發(fā)現(xiàn)多出一個(gè)node_modules文件夾，里面就是我們安裝的模塊。

配置：

　　Grunt和模塊都已經(jīng)安裝完成了，下面需要做的就是創(chuàng)建一個(gè)配置文件，來(lái)告訴Grunt需要去哪里，然后做什么等等。在上面的目錄下新建一個(gè)文件Gruntfile.js(注意大小寫(xiě))，內(nèi)容如下：

module.exports = function(grunt) {'use strict';// 配置Grunt各種模塊的參數(shù)grunt.initConfig({clean: {oldMinFiles: [],afterUglify: []},jslint: {command: "",options: ""},concat: {},uglify: {},watch: {},copy: {},less: {}});// 從node_modules目錄加載模塊文件grunt.loadNpmTasks('grunt-contrib-copy');grunt.loadNpmTasks('grunt-contrib-clean');grunt.loadNpmTasks('grunt-cmd-concat');grunt.loadNpmTasks('grunt-contrib-uglify');grunt.loadNpmTasks('grunt-contrib-less');grunt.loadNpmTasks('grunt-contrib-watch');// 定義任務(wù)grunt.registerTask('default', ['jsLint', 'concat', 'uglify']);grunt.registerTask('check', ['jslint']);};

?

?

只需要在當(dāng)前目錄執(zhí)行命令

合并文件：

grunt concat

代碼檢查：

grunt check?

?

?后期將介紹grunt的每一個(gè)模塊。

附錄：

?

grunt.initConfig

配置各模塊的參數(shù)，每項(xiàng)對(duì)應(yīng)一個(gè)同名模塊。

grunt.loadNpmTasks

加載所需的模塊。

grunt.registerTask

定義具體的任務(wù)。第一個(gè)參數(shù)為任務(wù)名，第二個(gè)參數(shù)是一個(gè)數(shù)組，表示該任務(wù)需要依次使用的模塊。default是默認(rèn)任務(wù)，即直接輸入grunt命令，后面不跟任何參數(shù)，這時(shí)所調(diào)用的模塊為default對(duì)應(yīng)的任務(wù)。

?

?

　　

?

總結(jié)

以上是生活随笔為你收集整理的自动构建工具Grunt的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。