一、了解Gurnt（http://www.open-open.com/lib/view/open1433898272036.html）

Grunt 是一個(gè)基于任務(wù)的JavaScript工程命令行構(gòu)建工具。
Grunt和Grunt插件，是通過npm安裝并管理的，npm是Node.js的包管理器。
了解Grunt前，首先要準(zhǔn)備兩件事：
1、了解npm（Node Package Manager）：npm是一個(gè)NodeJS包管理和分發(fā)工具，已經(jīng)成為了非官方的發(fā)布Node模塊（包）的標(biāo)準(zhǔn)。
2、安裝node：進(jìn)入nodejs官網(wǎng)（https://nodejs.org/），單擊INSTALL下載node安裝包，默認(rèn)安裝。安裝完成后，進(jìn)入對(duì)應(yīng)目錄，會(huì)發(fā)現(xiàn)nodejs文件夾下面有npm,直接用npm安裝相環(huán)境既可。

二、安裝Grunt

參考Grunt官網(wǎng)http://www.gruntjs.net/
安裝Grunt：npm install -g grunt-cli
注意，安裝grunt-cli并不等于安裝了Grunt！Grunt CLI的任務(wù)很簡單：調(diào)用與Gruntfile在同一目錄中 Grunt。這樣帶來的好處是，允許你在同一個(gè)系統(tǒng)上同時(shí)安裝多個(gè)版本的Grunt。

三、簡單實(shí)用Grunt

一個(gè)新的Grunt項(xiàng)目，必須在根目錄下要有兩個(gè)文件：package.json 和 Gruntfile.js
package.json: 此文件被npm用于存儲(chǔ)項(xiàng)目的元數(shù)據(jù)，以便將此項(xiàng)目發(fā)布為npm模塊。你可以在此文件中列出項(xiàng)目依賴的grunt和Grunt插件，放置于devDependencies配置段內(nèi)。
Gruntfile: 此文件被命名為 Gruntfile.js 或 Gruntfile.coffee，用來配置或定義任務(wù)（task）并加載Grunt插件的。
1. npm init命令會(huì)創(chuàng)建一個(gè)基本的package.json文件。或者手動(dòng)創(chuàng)建，如下：

{"name": "my-project-name","description":"test grunt ...","version": "0.1.0" }

2. 安裝Grunt和Grunt插件（https://github.com/gruntjs）
向已經(jīng)存在的package.json 文件中添加Grunt和grunt插件的最簡單方式是通過：
npm install <module> --save-dev。此命令不光安裝了<module>，還會(huì)自動(dòng)將其添加到devDependencies 配置段中。
3. grunt --help 命令將列出所有可用的任務(wù)

四、簡單項(xiàng)目流程示例

清空編譯工作區(qū) -> copy源文件到編譯工作區(qū) -> 合并文件 -> 壓縮文件 -> 加時(shí)間戳
clean -> copy -> concat -> min -> md5?
1. grunt-contrib-clean：Clear files and folders.
2. grunt-contrib-copy：Copy files and folders.
3. grunt-contrib-concat：Concatenate files.
4. grunt-contrib-cssmin：Compress CSS files.
? ?grunt-contrib-uglify：Minify files with UglifyJS.
? ?grunt-contrib-htmlmin：Minify HTML.
5. grunt-filerev：Static asset revisioning through file content hash
第一步：創(chuàng)建package.json

{"name":"test_grunt","description":"test grunt ...","version":"0.0.1" }

第二步：安裝對(duì)應(yīng)插件（加上--save-dev，會(huì)在package.json中加上devDependencies依賴）

npm install grunt-contrib-clean --save-dev npm install grunt-contrib-copy --save-dev npm install grunt-contrib-concat --save-dev npm install grunt-contrib-cssmin --save-dev npm install grunt-contrib-uglify --save-dev

第三步：創(chuàng)建Gruntfile.js，添加要使用插件配置

'use strict'; module.exports = function(grunt) {// 構(gòu)建的初始化配置grunt.initConfig({//配置具體任務(wù)});// 載入要使用的插件grunt.loadNpmTasks('grunt-contrib-clean');// 注冊(cè)剛配置好的任務(wù)grunt.registerTask('default', ['clean']); }

五、地址

nodejs官網(wǎng)地址：https://nodejs.org/
grunt中文官網(wǎng)地址：http://www.gruntjs.net/
grunt官網(wǎng)插件地址：https://github.com/gruntjs
六、源碼
// package.json

{"name": "test_grunt","description": "test grunt ...","version": "0.0.1","devDependencies": {"grunt": "^0.4.5","grunt-contrib-clean": "^0.6.0","grunt-contrib-concat": "^0.5.1","grunt-contrib-copy": "^0.8.0","grunt-contrib-cssmin": "^0.12.3","grunt-contrib-uglify": "^0.9.1"} }


//Gruntfile.js

'use strict'; module.exports = function(grunt) {// 構(gòu)建的初始化配置grunt.initConfig({/* 配置具體任務(wù) */pkg: grunt.file.readJSON('package.json'),dirs: {src: 'path',dest: 'dest/<%= pkg.name %>/<%= pkg.version %>',},// clean任務(wù)（刪除dest/test_grunt/0.0.1 目錄下非min的文件）clean: {js: ["<%= dirs.dest %>/*.js", "!<%= dirs.dest %>/*.min.js"],css: ["<%= dirs.dest %>/*.css", "!<%= dirs.dest %>/*.min.css"]},// copy任務(wù)（拷貝path目錄下的文件到dest目錄）copy: {main: {files: [// includes files within path{expand: true, src: ['path/*'], dest: '<%= dirs.dest %>/', filter: 'isFile'},]}},// concat任務(wù)（將dest目錄下的a.js和b.js合并為built.js）concat: {options: {separator: '\n',},concatCSS: {src: ['<%= dirs.dest %>/a.css', '<%= dirs.dest %>/path/b.css'],dest: '<%= dirs.dest %>/built.css',},concatJS: {src: ['<%= dirs.dest %>/a.js', '<%= dirs.dest %>/b.js'],dest: '<%= dirs.dest %>/built.js',}},// cssmin任務(wù)（壓縮css）cssmin: {target: {files: [{expand: true,cwd: '<%= dirs.dest %>',src: ['*.css', '!*.min.css'],dest: '<%= dirs.dest %>',ext: '.min.css'}]}},// uglify任務(wù)（壓縮js）uglify: {options: {mangle: {except: ['jQuery', 'Backbone']}},my_target: {files: {'<%= dirs.dest %>/bulit.min.js': ['<%= dirs.dest %>/*.js']}}}});// 載入要使用的插件grunt.loadNpmTasks('grunt-contrib-clean');grunt.loadNpmTasks('grunt-contrib-copy');grunt.loadNpmTasks('grunt-contrib-concat');grunt.loadNpmTasks('grunt-contrib-cssmin');grunt.loadNpmTasks('grunt-contrib-uglify');// 注冊(cè)剛配置好的任務(wù)grunt.registerTask('cls', ['clean']);grunt.registerTask('cpy', ['copy']);grunt.registerTask('con', ['concat']);grunt.registerTask('cmpCSS', ['cssmin']);grunt.registerTask('cmpJS', ['uglify']);grunt.registerTask('default', ['copy','concat','cssmin','uglify','clean']); }

PS：
1. ?自己配置的任務(wù)名稱，不能和插件名稱一樣，否則會(huì)造成無限循環(huán)

2. ?插件名稱，除最外層外，中間層名稱可自定義

轉(zhuǎn)載于:https://www.cnblogs.com/aliwa/p/6888718.html

總結(jié)

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

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