摘要：

　　大部分項目在部署之前都需要做的就是js、css文件的壓縮、合并，以及一些文件的錯誤檢查，甚至是將LESS文件轉換成css文件，coffeescript文件轉化成js文件等等。但是項目開發是分迭代的，沒開發完一次，上面的工作要重新做一遍。那有什么工具能幫助我們來做這些重復的工作呢？Grunt就是其中一個非常好用的工具。下面就來學習一下Grunt。

安裝：

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

npm install -g grunt-cli

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

　　安裝完成之后，他會把Grunt配置到你的系統路徑，允許其從任何目錄下運行。安裝完之后并不能執行操作，因為Grunt是基于模塊機構，所以必須安裝模塊。模塊是局部的，是根據項目需求來安裝的。在項目的隨便一個目錄下（最好是根目錄，也可以隨便創建個目錄）新建一個文件---package.json(也可以通過node init來創建)，內容如下：

{"name": "", // 項目名稱"version": "", // 項目版本"private": true, // 項目是否私有"description": "", // 項目描述"main": "", // 項目主要文件"dependencies": {}, // 項目依賴的模塊"devDependencies": { // 項目開發階段依賴的模塊"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": [], // 項目關鍵字"author": { // 作者"name": "","age": ""},"contributors": [], // 貢獻者 "license": "" // 版權 }

?

?

然后在當前目錄下，通過命令終端運行npm install，這時你會發現多出一個node_modules文件夾，里面就是我們安裝的模塊。

配置：

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

module.exports = function(grunt) {'use strict';// 配置Grunt各種模塊的參數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');// 定義任務grunt.registerTask('default', ['jsLint', 'concat', 'uglify']);grunt.registerTask('check', ['jslint']);};

?

?

只需要在當前目錄執行命令

合并文件：

grunt concat

代碼檢查：

grunt check?

?

?后期將介紹grunt的每一個模塊。

附錄：

?

grunt.initConfig

配置各模塊的參數，每項對應一個同名模塊。

grunt.loadNpmTasks

加載所需的模塊。

grunt.registerTask

定義具體的任務。第一個參數為任務名，第二個參數是一個數組，表示該任務需要依次使用的模塊。default是默認任務，即直接輸入grunt命令，后面不跟任何參數，這時所調用的模塊為default對應的任務。

?

?

　　

?

總結

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

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