grunt
是一套前端自動化工具，一個基于nodeJs的命令行工具，一般用于： ① 壓縮文件 ② 合并文件 ③ 簡單語法檢查
對于其他用法，我還不太清楚，我們這里簡單介紹下grunt的壓縮、合并文件，初學(xué)，有誤請包涵
準(zhǔn)備階段
1、nodeJs環(huán)境
因為grunt是基于nodeJs的，所以首先各位需要安裝nodeJS環(huán)境，這塊我們便不管了 http://www.cnblogs.com/yexiaochai/p/3527418.html
2、安裝grunt
有了nodeJs環(huán)境后，我們便可以開始搞grunt了，因為我們可能在任何目錄下運行打包程序，所以我們需要安裝CLI 官方推薦在全局安裝CLI（grunt的命令行接口）
npm install -g grunt-cli 這條命令將會把grunt命令植入系統(tǒng)路徑，這樣就能在任意目錄運行他，原因是
每次運行g(shù)runt時，它都會使用node的require查找本地是否安裝grunt，如果找到CLI便加載這個本地grunt庫 然后應(yīng)用我們項目中的GruntFile配置，并執(zhí)行任務(wù) PS：這段先不要管，安裝完了往下看
實例學(xué)習(xí)：打包zepto
一些東西說多了都是淚，直接先上實例吧，實例結(jié)束后再說其它的 首先在D盤新建一個項目（文件夾就好） 在里面新增兩個文件（不要問為什么，搞進(jìn)去先）
① package.json
復(fù)制代碼 { "name": "demo", "file": "zepto", "version": "0.1.0", "description": "demo", "license": "MIT", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.6.3", "grunt-contrib-uglify": "~0.2.1", "grunt-contrib-requirejs": "~0.4.1", "grunt-contrib-copy": "~0.4.1", "grunt-contrib-clean": "~0.5.0", "grunt-strip": "~0.2.1" }, "dependencies": { "express": "3.x" } } 復(fù)制代碼 ② Gruntfile.js
完了我們需要在grunt目錄下執(zhí)行 npm install將相關(guān)的文件下載下來：
$ cd d: $ cd grunt

然后我們的目錄就會多一點東西：


多了很多東西，先別管事干什么的，我們后面都會用到，這個時候在目錄下新建src文件夾，并且搞一個zepto進(jìn)去


然后在Gruntfile中新增以下代碼（先別管，增加再說）
復(fù)制代碼 module.exports = function (grunt) { // 項目配置 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build: { src: 'src/<%=pkg.file %>.js', dest: 'dest/<%= pkg.file %>.min.js' } } }); // 加載提供"uglify"任務(wù)的插件 grunt.loadNpmTasks('grunt-contrib-uglify'); // 默認(rèn)任務(wù) grunt.registerTask('default', ['uglify']); } 復(fù)制代碼 然后運行 grunt命令后
grunt

嗯嗯，多了一個文件，并且是壓縮的，不差！！！第一步結(jié)束
認(rèn)識Gruntdile與package.json
不出意外，每一個gurnt都會需要這兩個文件，并且很可能就只有這兩個文件（復(fù)雜的情況有所不同）
package.json
這個文件用來存儲npm模塊的依賴項（比如我們的打包若是依賴requireJS的插件，這里就需要配置） 然后，我們會在里面配置一些不一樣的信息，比如我們上面的file，這些數(shù)據(jù)都會放到package中 對于package的靈活配置，我們會在后面提到
Gruntfile
這個文件尤其關(guān)鍵，他一般干兩件事情： ① 讀取package信息 ② 插件加載、注冊任務(wù)，運行任務(wù)（grunt對外的接口全部寫在這里面）
Gruntfile一般由四個部分組成 ① 包裝函數(shù) 這個包裝函數(shù)沒什么東西，意思就是我們所有的代碼必須放到這個函數(shù)里面
module.exports = function (grunt) { //你的代碼 } 這個不用知道為什么，直接將代碼放入即可
② 項目/任務(wù)配置 我們在Gruntfile一般第一個用到的就是initConfig方法配置依賴信息
pkg: grunt.file.readJSON('package.json') 這里的 grunt.file.readJSON就會將我們的配置文件讀出，并且轉(zhuǎn)換為json對象
然后我們在后面的地方就可以采用pkg.XXX的方式訪問其中的數(shù)據(jù)了 值得注意的是這里使用的是underscore模板引擎，所以你在這里可以寫很多東西
uglify是一個插件的，我們在package依賴項進(jìn)行了配置，這個時候我們?yōu)橄到y(tǒng)配置了一個任務(wù) uglify（壓縮），他會干這幾個事情：
① 在src中找到zepto進(jìn)行壓縮（具體名字在package中找到） ② 找到dest目錄，沒有就新建，然后將壓縮文件搞進(jìn)去 ③ 在上面加幾個描述語言
這個任務(wù)配置其實就是一個方法接口調(diào)用，按照規(guī)范來就好，暫時不予關(guān)注，內(nèi)幕后期來 這里只是定義了相關(guān)參數(shù)，但是并未加載實際函數(shù)，所以后面馬上就有一句：
grunt.loadNpmTasks('grunt-contrib-uglify'); 用于加載相關(guān)插件
最后注冊一個自定義任務(wù)（其實也是默認(rèn)任務(wù)），所以我們下面的命令行是等效的：
grunt == grunt uglify 至此，我們就簡單解析了一番grunt的整個操作，下面來合并文件的例子
合并文件
合并文件依賴于grunt-contrib-concat插件，所以我們的package依賴項要新增一項
復(fù)制代碼 "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.6.3", "grunt-contrib-concat": "~0.3.0", "grunt-contrib-uglify": "~0.2.1", "grunt-contrib-requirejs": "~0.4.1", "grunt-contrib-copy": "~0.4.1", "grunt-contrib-clean": "~0.5.0", "grunt-strip": "~0.2.1" }, 復(fù)制代碼 然后再將代碼寫成這個樣子
復(fù)制代碼 module.exports = function (grunt) { // 項目配置 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { options: { separator: ';' }, dist: { src: ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'], dest: 'dest/libs.js' } } }); grunt.loadNpmTasks('grunt-contrib-concat'); // 默認(rèn)任務(wù) grunt.registerTask('default', ['concat']); } 復(fù)制代碼 運行后，神奇的一幕發(fā)生了：


三個文件被壓縮成了一個，但是沒有壓縮，所以，我們這里再加一步操作，將之壓縮后再合并
復(fù)制代碼 module.exports = function (grunt) { // 項目配置 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { options: { separator: ';' }, dist: { src: ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'], dest: 'dest/libs.js' } }, uglify: { build: { src: 'dest/libs.js', dest: 'dest/libs.min.js' } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-concat'); // 默認(rèn)任務(wù) grunt.registerTask('default', ['concat', 'uglify']); } 復(fù)制代碼 我這里的做法是先合并形成一個libs，然后再將libs壓縮成libs.min.js


所以我們這里換個做法，先壓縮再合并，其實unglify已經(jīng)干了這些事情了
復(fù)制代碼 module.exports = function (grunt) { // 項目配置 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { "my_target": { "files": { 'dest/libs.min.js': ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'] } } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); // 默認(rèn)任務(wù) grunt.registerTask('default', ['uglify']); } 復(fù)制代碼 所以，我們就暫時不去關(guān)注concat了
最后，今天時間不早了，我們最后研究下grunt配合require于是便結(jié)束今天的學(xué)習(xí)吧
合并requireJS管理的文件
有了前面基礎(chǔ)后，我們來干一件平時很頭疼的事情，便是將require管理的所有js文件給壓縮了合并為一個文件 首先我們建立一個簡單的程序，里面使用了zepto、backbone、underscore（事實上我并未使用什么）


在main.js中新增代碼：
復(fù)制代碼 require.config({ baseUrl: '', shim: { $: { exports: 'zepto' }, _: { exports: '_' }, B: { deps: [ '_', '$' ], exports: 'Backbone' } }, paths: { '$': 'src/zepto', '_': 'src/underscore', 'B': 'src/backbone' } }); requirejs(['B'], function (b) { }); 復(fù)制代碼 這樣的話運行會自動加載幾個文件，我們現(xiàn)在希望將之合并為一個libs.js該怎么干呢？？？
我們這里使用自定義任務(wù)方法來做，因為我們好像沒有介紹他
要使用requireJS相關(guān)需要插件?
grunt.loadNpmTasks('grunt-contrib-requirejs'); 因為我們以后可能存在配置文件存在各個項目文件的情況，所以我們這里將requireJs相關(guān)的配置放入gruntCfg.json中
這樣我們的package.json就沒有什么實際意義了：
復(fù)制代碼 { "name": "demo", "version": "0.1.0", "description": "demo", "license": "MIT", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.6.3", "grunt-contrib-concat": "~0.3.0", "grunt-contrib-uglify": "~0.2.1", "grunt-contrib-requirejs": "~0.4.1", "grunt-contrib-copy": "~0.4.1", "grunt-contrib-clean": "~0.5.0", "grunt-strip": "~0.2.1" }, "dependencies": { "express": "3.x" } } 復(fù)制代碼 我們這里設(shè)置的require相關(guān)的grunt配置文件如下（gruntCfg.json）：
復(fù)制代碼 { "requirejs": { "main": { "options": { "baseUrl": "", "paths": { "$": "src/zepto", "_": "src/underscore", "B": "src/backbone", "Test": "src/Test" }, "web": { "include": [ "$", "_", "B", "Test" ], "out": "dest/libs.js" } } } } } 復(fù)制代碼 這里我們要打包這些文件搞到dest的libs.js文件中，這個文件照做就行，最后核心代碼如下：
復(fù)制代碼 module.exports = function (grunt) { grunt.loadNpmTasks('grunt-contrib-requirejs'); //為了介紹自定義任務(wù)搞了一個這個 grunt.registerTask('build', 'require demo', function () { //任務(wù)列表 var tasks = ['requirejs']; //源碼文件 var srcDir = 'src'; //目標(biāo)文件 var destDir = 'dest'; //設(shè)置參數(shù) grunt.config.set('config', { srcDir: srcDir, destDir: destDir }); //設(shè)置requireJs的信息 var taskCfg = grunt.file.readJSON('gruntCfg.json'); var options = taskCfg.requirejs.main.options, platformCfg = options.web, includes = platformCfg.include, paths = options.paths; var pos = -1; var requireTask = taskCfg.requirejs; options.path = paths; options.out = platformCfg.out; options.include = includes; //運行任務(wù) grunt.task.run(tasks); grunt.config.set("requirejs", requireTask); }); } 復(fù)制代碼 搞完了運行就好：grunt build
grunt build



最后發(fā)現(xiàn)葉小釵三字，我就放心了，安全！！！！！！
配置任務(wù)/grunt.initConfig
前面我們簡單的介紹了grunt相關(guān)的知識，這里我們這里還需要再熟悉下Gruntfile相關(guān)的知識點，比如說配置任務(wù)
grunt的任務(wù)配置都是在Gruntfile中的grunt.initConfig方法中指定的，這個配置主要都是一些命名性屬性 比如我們上次用到的合并以及壓縮的任務(wù)配置：
復(fù)制代碼 grunt.initConfig({ concat: { //這里是concat任務(wù)的配置信息 }, uglify: { //這里是uglify任務(wù)的配置信息 }, //任意非任務(wù)特定屬性 my_property: 'whatever', my_src_file: ['foo/*.js', 'bar/*.js'] }); 復(fù)制代碼 其中的my_property完全可能讀取外部json配置文件，然后在上面任務(wù)配置中便可以，比如我們要壓縮的文件為準(zhǔn)或者最后要放到哪里，便可以在此配置
我們使用grunt的時候，主要工作就是配置任務(wù)或者創(chuàng)建任務(wù)，實際上就是做一個事件注冊，然后由我們觸發(fā)之，所以grunt的核心還是事件注冊 每次運行g(shù)runt時，我們可以指定運行一個或者多個任務(wù)，通過任務(wù)決定要做什么，比如我們同時要壓縮和合并還要做代碼檢查
grunt.registerTask('default', ['jshint','qunit','concat','uglify']); 當(dāng)運行一個基本任務(wù)時，grunt并不會查找配置和檢查運行環(huán)境，他僅僅運行指定的任務(wù)函數(shù)，可以傳遞冒號分割參數(shù)，比如：
復(fù)制代碼 grunt.registerTask('foo', 'A sample task that logs stuff.', function (arg1, arg2) { if (arguments.length === 0) { grunt.log.writeln(this.name + ", no args"); } else { grunt.log.writeln(this.name + ", " + arg1 + " " + arg2); } }); 復(fù)制代碼 運行結(jié)果如下：
復(fù)制代碼 $ grunt foo:testing:123 Running "foo:testing:123" (foo) task foo, testing 123
$ grunt foo:testing Running "foo:testing" (foo) task foo, testing undefined
$ grunt foo Running "foo" task foo, no args 復(fù)制代碼 這里有個多任務(wù)的情況，就是一個任務(wù)里面實際上第一了多個東東，這個時候就有所不同
復(fù)制代碼 grunt.initConfig({ log: { demo01: [1,2,3], demo02: 'hello world', demo03: false } }); grunt.registerTask('log','log stuff.', function(){ grunt.log.writeln(this.target + ': ' + this.data); }); 復(fù)制代碼 如果我們運行，運行情況如下：
???????
更多時候，我們實際場景中都會需要自定義任務(wù)，而在我們?nèi)蝿?wù)內(nèi)部使用 grunt.task.run({}) 運行任務(wù) 這塊的知識點，我們后面以實際例子說明
grunt插件
學(xué)習(xí)grunt主要就是學(xué)習(xí)grunt的插件使用，所以我們今天先來學(xué)習(xí)常用的幾個插件
grunt-contrib-unglify
我們?nèi)匀灰院唵卫訉W(xué)習(xí)
復(fù)制代碼 module.exports = function (grunt) { grunt.initConfig({ uglify: { my_target: { files: { 'dest/libs.min.js': ['src/zepto.js', 'src/underscoce.js'] } } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); } 復(fù)制代碼 這樣會將src里面的zepto等文件打包值dest的lib.min.js中
壓縮一個文件夾的所有文件
然后這段代碼非常有意思，他會將一個文件目錄里面的所有js文件打包到另一個文件夾
復(fù)制代碼 module.exports = function (grunt) { grunt.initConfig({ uglify: { my_target: { files: [{ expand: true, cwd: 'src', src: '**/*.js', dest: 'dest' }] } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); } 復(fù)制代碼

若是你希望給你文件的頭部加一段注釋性語言配置banner信息即可
復(fù)制代碼 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! 注釋信息 */' }, my_target: { files: { 'dest/output.min.js': ['src/input.js'] } } } }); 復(fù)制代碼 grunt-contrib-concat
該插件主要用于代碼合并，將多個文件合并為一個，我們前面的uglify也提供了一定合并的功能 在可選屬性中我們可以設(shè)置以下屬性： ① separator 用于分割各個文件的文字， ② banner 前面說到的文件頭注釋信息，只會出現(xiàn)一次 ③ footer 文件尾信息，只會出現(xiàn)一次 ④ stripBanners去掉源代碼注釋信息（只會清楚/**/這種注釋）
一個簡單的例子：
復(fù)制代碼 module.exports = function (grunt) { grunt.initConfig({ concat: { options: { separator: '/*分割*/', banner: '/*測試*/', footer: '/*footer*/' }, dist: { src: ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'], dest: 'dist/built.js', } } }); grunt.loadNpmTasks('grunt-contrib-concat'); } 復(fù)制代碼 合并三個文件為一個，這種在我們源碼調(diào)試時候很有意義
構(gòu)建兩個文件夾
有時候我們可能需要將合并的代碼放到不同的文件，這個時候可以這樣干
復(fù)制代碼 module.exports = function (grunt) { grunt.initConfig({ concat: { basic: { src: ['src/zepto.js'], dest: 'dest/basic.js' }, extras: { src: ['src/underscore.js', 'src/backbone.js'], dest: 'dest/with_extras.js' } } }); grunt.loadNpmTasks('grunt-contrib-concat'); } 復(fù)制代碼 這種功能還有這樣的寫法：
復(fù)制代碼 module.exports = function (grunt) { grunt.initConfig({ concat: { basic_and_extras: { files: { 'dist/basic.js': ['src/test.js', 'src/zepto.js'], 'dist/with_extras.js': ['src/underscore.js', 'src/backbone.js'] } } } }); grunt.loadNpmTasks('grunt-contrib-concat'); } 復(fù)制代碼 第二種寫法便于使用配置文件，具體各位選取吧，至于讀取配置文件的東西我們這里就先不關(guān)注了
grunt-contrib-jshint
該插件用于檢測文件中的js語法問題，比如我test.js是這樣寫的：
alert('我是葉小釵') 復(fù)制代碼 module.exports = function (grunt) { grunt.initConfig({ jshint: {? all: ['src/test.js'] } }); grunt.loadNpmTasks('grunt-contrib-jshint'); } 復(fù)制代碼 運行結(jié)果是：
$ grunt jshint Running "jshint:all" (jshint) task Linting src/test.js ...ERROR [L1:C15] W033: Missing semicolon. alert('我是葉小釵') 說我缺少一個分號，好像確實缺少.....如果在里面寫明顯的BUG的話會報錯 多數(shù)時候，我們認(rèn)為沒有分號無傷大雅，所以，我們文件會忽略這個錯誤：
復(fù)制代碼 jshint: { options: { '-W033': true }, all: ['src/test.js'] } 復(fù)制代碼 這里有一個稍微復(fù)雜的應(yīng)用，就是我們合并之前做一次檢查，合并之后再做一次檢查，我們可以這樣寫
復(fù)制代碼 module.exports = function (grunt) { grunt.initConfig({ concat: { dist: { src: ['src/test01.js', 'src/test02.js'], dest: 'dist/output.js' } }, jshint: { options: { '-W033': true? }, pre: ['src/test01.js', 'src/test02.js'], after: ['dist/output.js'] } }); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-jshint'); } 復(fù)制代碼 復(fù)制代碼 $ grunt jshint:pre concat jshint:after Running "jshint:pre" (jshint) task >> 2 files lint free. Running "concat:dist" (concat) task File "dist/output.js" created. Running "jshint:after" (jshint) task >> 1 file lint free. 復(fù)制代碼 這里連續(xù)運行了三個任務(wù)，先做檢查再合并，然后做檢測，我這里寫了兩個簡單的文件，如果將jquery搞進(jìn)去的話，好像還出了不少BUG...... 所以真的要用它還要自定一些規(guī)范，我們這里暫時到這里，先進(jìn)入下一個插件學(xué)習(xí)
grunt-contrib-requirejs
我們的grunt打包程序極有可能與requirejs一起使用，但是幾個插件學(xué)習(xí)下來又屬requireJs的使用最為麻煩，因為網(wǎng)上資源很少，搞到這一段耗掉了我很多精力
這個時候你就會感嘆，英語好不一定編程好，英語差想成為高手還是不簡單啊！！！
復(fù)制代碼 requirejs: { compile: { options: { baseUrl: "path/to/base", mainConfigFile: "path/to/config.js", name: "path/to/almond", // assumes a production build using almond out: "path/to/optimized.js" } } } 復(fù)制代碼 官方的例子首先就是這幾個屬性：
baseUrl 代表所有的js文件都會相對于這個目錄
mainConfigFile 配置文件目錄
name ？？？
out 輸出文件
一些參數(shù)我們不太了解，這個時候就只能以例子破之了
復(fù)制代碼 module.exports = function (grunt) { grunt.initConfig({ requirejs: { compile: { "options": { "baseUrl": "./", "paths": { "$": "src/zepto", "_": "src/underscore", "B": "src/backbone", "Test": "src/Test01" }, "include": [ "$", "_", "B", "Test" ], "out": "dest/libs.js" } } } }); grunt.loadNpmTasks('grunt-contrib-requirejs'); } 復(fù)制代碼

這樣配置后，會將include里面的文件打包為out對應(yīng)的文件，paths的本身意義不大，就是用于配置include里面的指向
這個時候我們來加個name看看有神馬作用：
復(fù)制代碼 module.exports = function (grunt) { grunt.initConfig({ requirejs: { compile: { "options": { "baseUrl": "./", "name": 'src/test02.js', "paths": { "$": "src/zepto", "_": "src/underscore", "B": "src/backbone", "Test": "src/Test01" }, "include": [ "$", "_", "B", "Test" ], "out": "dest/libs.js" } } } }); grunt.loadNpmTasks('grunt-contrib-requirejs'); } 復(fù)制代碼 這樣的話，會將name對應(yīng)文件壓縮到壓縮文件的最前面，但是具體是干什么的，還是不太清楚，其英文注釋說是單個文件或者其依賴項優(yōu)化，不知道優(yōu)化什么啊。。。囧！！！
requireJS基本的用法就是這樣了，其詳細(xì)信息，我們過段時間再來看看，下面說一下requireJS的其它用法
我們這里將requireJS的配置信息放在外面，而Gruntfile采用自定義任務(wù)的方式完成上面的功能
配置文件/cfg.json
復(fù)制代碼 {requirejs: { "options": { "baseUrl": "./", "paths": { "$": "src/zepto", "_": "src/underscore", "B": "src/backbone", "Test": "src/Test01" }, "include": [ "$", "_", "B", "Test" ], "out": "dest/libs.js" } }} 復(fù)制代碼 然后，這里我們便不是有initConfig的做法了，直接使用自定義任務(wù)
復(fù)制代碼 module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.registerTask('build', 'require demo', function () {
//第一步，讀取配置信息 var cfg = grunt.file.readJSON('cfg.json'); cfg = cfg.requirejs; grunt.config.set('requirejs', { test: cfg });
//第二步，設(shè)置參數(shù) grunt.log.debug('參數(shù)：' + JSON.stringify(grunt.config()));
//第三步跑任務(wù) grunt.task.run(['requirejs']); });
} 復(fù)制代碼 復(fù)制代碼 $ grunt build --debug Running "build" task [D] Task source: d:\grunt\Gruntfile.js [D] 參數(shù)：{"requirejs":{"test":{"options":{"baseUrl":"./","paths":{"$":"src/zept o","_":"src/underscore","B":"src/backbone","Test":"src/Test01"},"include":["$"," _","B","Test"],"out":"dest/libs.js"}}}}
Running "requirejs:test" (requirejs) task [D] Task source: d:\grunt\node_modules\grunt-contrib-requirejs\tasks\requirejs.j s >> Tracing dependencies for: d:/grunt/dest/libs.js >> Uglifying file: d:/grunt/dest/libs.js >> d:/grunt/dest/libs.js >> ---------------- >> d:/grunt/src/zepto.js >> d:/grunt/src/underscore.js >> d:/grunt/src/backbone.js >> d:/grunt/src/Test01.js 復(fù)制代碼 效果還是有的，最后我們介紹下requireJS打包模板文件
require與模板文件
我們知道，模板文件一般都是html，比如我們這里的demo01.html，對于這個文件我們應(yīng)該怎么打包呢？其實很簡單......
需要干兩件事情：
① 引入require.text
② 加入模板文件
復(fù)制代碼 { "requirejs": { "options": { "baseUrl": "./", "paths": { "$": "src/zepto", "_": "src/underscore", "B": "src/backbone", "test": "src/test01", "text": "src/require.text"
}, "include": [ "$", "_", "B", "test", "text!src/demo01.html" ], "out": "dest/libs.js" } } } 復(fù)制代碼 于是，我們便成功將模板打入了
復(fù)制代碼 $ grunt build --debug Running "build" task [D] Task source: d:\grunt\Gruntfile.js [D] 參數(shù)：{"requirejs":{"test":{"options":{"baseUrl":"./","paths":{"$":"src/zept o","_":"src/underscore","B":"src/backbone","test":"src/test01","text":"src/requi re.text"},"include":["$","_","B","test","text!src/demo01.html"],"out":"dest/libs .js"}}}}
Running "requirejs:test" (requirejs) task [D] Task source: d:\grunt\node_modules\grunt-contrib-requirejs\tasks\requirejs.j s >> Tracing dependencies for: d:/grunt/dest/libs.js >> Uglifying file: d:/grunt/dest/libs.js >> d:/grunt/dest/libs.js >> ---------------- >> d:/grunt/src/zepto.js >> d:/grunt/src/underscore.js >> d:/grunt/src/backbone.js >> d:/grunt/src/test01.js >> d:/grunt/src/require.text.js >> text!src/demo01.html 復(fù)制代碼 在文件中我們引用方式是：
"text!src/demo01.html" => '具體文件' 過濾關(guān)鍵字
1 module.exports = function (grunt) { 2 ? grunt.initConfig({ 3 ? ? requirejs: { 4 ? ? ? compile: { 5 ? ? ? ? "options": { 6 ? ? ? ? ? optimize: 'uglify2', 7 ? ? ? ? ? uglify2: { 8 ? ? ? ? ? ? mangle: { 9 ? ? ? ? ? ? ? except: ["$super"] 10 ? ? ? ? ? ? } 11 ? ? ? ? ? }, 12 ? ? ? ? ? "baseUrl": "./", 13 ? ? ? ? ? "paths": { 14 ? ? ? ? ? ? "UIAbstractView": "ui_beta/ui.abstract.view", 15 ? ? ? ? ? ? "UILayer": "ui_beta/ui.layer" 16 ? ? ? ? ? }, 17 ? ? ? ? ? "include": [ 18 ? ? ? ? ? ? "UIAbstractView" 19 ? ? ? ? ? ], 20 ? ? ? ? ? "out": "dest/libs.js" 21 ? ? ? ? } 22 ? ? ? } 23 ? ? } 24 ? }); 25 ? grunt.loadNpmTasks('grunt-contrib-requirejs'); 26 ? grunt.registerTask('default', ['requirejs']); 打包樣式文件
樣式文件的打包方式與js不太一樣，這里我們下載css-min插件，并且在package.json中新增依賴項
{ "name": "demo", "version": ? ? ? ? "0.1.0", "description": ? ? "demo", "license": ? ? ? ? "MIT", "devDependencies": { "grunt": ? ? ? ? ? ? ? ? ? "~0.4.1", "grunt-contrib-jshint": ? ?"~0.6.3", "grunt-contrib-concat": ? ?"~0.3.0", "grunt-contrib-uglify": ? ?"~0.2.1", "grunt-contrib-requirejs": "~0.4.1", "grunt-contrib-copy": ? ? ?"~0.4.1", "grunt-contrib-clean": ? ? "~0.5.0", "grunt-strip": ? ? ? ? ? ? "~0.2.1", "grunt-contrib-watch": "~0.6.0", "grunt-contrib-cssmin": "~0.5.0" }, "dependencies": ? ?{ "express": "3.x" } } module.exports = function (grunt) { grunt.initConfig({ cssmin: { compress: { files: { 'dest/car.min.css': [ "src/car.css", "src/car01.css" ] } } } });
grunt.loadNpmTasks('grunt-contrib-cssmin');
} 如此一來我們便可以壓縮合并CSS文件了：
$ grunt cssmin --debug Running "cssmin:compress" (cssmin) task [D] Task source: d:\grunt\node_modules\grunt-contrib-cssmin\tasks\cssmin.js File dest/car.min.css created. 移動打包文件
其實，grunt本身具有這樣的功能，但是我們實際項目重會出現(xiàn)這種可能：
我們核心框架會有一套壓縮代碼，并且會在對應(yīng)目錄生成文件用于發(fā)布，但是這個地方的權(quán)限對各個頻道團(tuán)隊是不可見的
所以，我們在各個頻道的公共文件夾內(nèi)應(yīng)該將剛剛的文件給復(fù)制過去，這塊代碼其實很簡單，不需要任何新知識都能實現(xiàn)：
我們這里依舊采用昨天的require相關(guān)的代碼，但是一有個不同的地方就是，我們要同時在D盤的common文件夾中生成該文件
這個代碼其實比較簡單，這里我們先介紹一個新的插件copy
grunt-contrib-copy
該插件用于復(fù)制文件到你想要的文件夾處
grunt.initConfig({ copy: { main: { flatten: true, src: 'src/*.js', dest: 'dest/' } } }); 這段代碼就會將src中的js文件搞到dest里面，并且新建src文件夾：
$ grunt copy Running "copy:main" (copy) task Copied 7 files

若是不想復(fù)制文件夾只要文件應(yīng)該這樣干：
grunt.initConfig({ copy: { main: { flatten: true, // ? ?filter: 'isFile', expand: true, src: 'src/**.js', dest: 'dest/' } } }); 這塊完了，我們就來移動打包文件至D盤了
移動打包文件
這個時候代碼這樣寫就好（也許移動前我們還想將其文件夾里面的東西銷毀，暫時不考慮了）
module.exports = function (grunt) {
grunt.initConfig({ copy: { main: { // ? ? ?flatten: true, // ? ? ?expand: true, src: 'dest/**.js', dest: 'd:/common/' } } });
grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.registerTask('build', 'require demo', function () {
//第一步，讀取配置信息 var cfg = grunt.file.readJSON('cfg.json'); cfg = cfg.requirejs; grunt.config.set('requirejs', { test: cfg });
//第二步，設(shè)置參數(shù) grunt.log.debug('參數(shù)：' + JSON.stringify(grunt.config()));
//第三步跑任務(wù) grunt.task.run(['requirejs']);
});
grunt.registerTask('default', 'test demo', ['build', 'copy']);
} Running "build" task
Running "requirejs:test" (requirejs) task >> Tracing dependencies for: d:/grunt/dest/libs.js >> Uglifying file: d:/grunt/dest/libs.js >> d:/grunt/dest/libs.js >> ---------------- >> d:/grunt/src/zepto.js >> d:/grunt/src/underscore.js >> d:/grunt/src/backbone.js >> d:/grunt/src/test01.js >> d:/grunt/src/require.text.js >> text!src/demo01.html
Running "copy:main" (copy) task Copied 8 files

關(guān)于移動相關(guān)的知識點暫時介紹到這里，我們進(jìn)入下一話題
分支/頻道處理
我們在實際項目重會遇到這種情況，我們一個主干分支上可能拉出很多分支完成不同的功能，而各個分支就有那么一點點不同，那么這個時候打包工具該怎么辦呢？
我們一般是這樣處理的：
① 首先全局只會有一個打包工具
② 其次每一個分支都會有一個gruntCfg.json的配置文件，存儲相關(guān)的打包信息
③ 每次打包時候便把響應(yīng)的分支打印到各自的dest目錄里面
為了模擬這一情況我們將grunt打包相關(guān)的文件放到D盤的grunt目錄里面，并在D盤新建gruntDemo目錄
然后我們在gruntDemo中建立一個項目，并且為這個項目拉一個分支，比如現(xiàn)在項目是地demo01與demo02
現(xiàn)在文件結(jié)構(gòu)如下：
D:\GRUNTDEMO ├─demo01 │ ?│ ?gruntCfg.json │ ?│ │ ?└─src │ ? ? ? ? ?backbone.js │ ? ? ? ? ?require.js │ ? ? ? ? ?require.text.js │ ? ? ? ? ?test01.js │ ? ? ? ? ?test02.js │ ? ? ? ? ?underscore.js │ ? ? ? ? ?zepto.js │ └─demo02 │ ?gruntCfg.json │ └─src backbone.js require.js require.text.js test01.js test02.js underscore.js zepto.js 這個時候，要實現(xiàn)功能最好的方法就是寫自定義任務(wù)了，其它方案不好使，這個時候起配置文件也需要有一定修改，比如其中的路徑需要加入?yún)?shù)信息
{ "requirejs": { "options": { "baseUrl": "<%= config.srcDir %>", "paths": { "$": "src/zepto", "_": "src/underscore", "B": "src/backbone", "test": "src/test01", "text": "src/require.text"
}, "include": [ "$", "_", "B", "test", "text!src/demo01.html" ], "out": "<%= config.destDir %>/libs.js" } } } 這個時候initConfig相關(guān)信息時候，首先得傳入path依賴的文件目錄，以及輸出的文件目錄
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-requirejs');
//channel為頻道名稱，project為項目名稱，這里對應(yīng)gruntDemo，branch為其分支，默認(rèn)與grunt目錄為平行關(guān)系，佛則package.json里面應(yīng)該有配置信息 grunt.registerTask('build', 'require demo', function (channel, project, branch) {
var path = '../' + channel + '/' + project + branch; grunt.log.debug('path: ' + path);
//第一步，讀取配置信息 var cfg = grunt.file.readJSON(path + '/gruntCfg.json'); cfg = cfg.requirejs;
grunt.config.set('config', { srcDir: path, destDir: path + '/dest' });
grunt.config.set('requirejs', { main: cfg });
//第二步，設(shè)置參數(shù) grunt.log.debug('param: ' + JSON.stringify(grunt.config()));
//第三步跑任務(wù) grunt.task.run(['requirejs']);
});
grunt.registerTask('default', 'test demo', ['build', 'copy']);
} 于是我們第一步工作成功了：
$ grunt build:gruntDemo:demo:02 --debug Running "build:gruntDemo:demo:02" (build) task [D] Task source: d:\grunt\Gruntfile.js [D] path: ../gruntDemo/demo02 [D] param: {"config":{"srcDir":"../gruntDemo/demo02","destDir":"../gruntDemo/dem o02/dest"},"requirejs":{"main":{"options":{"baseUrl":"../gruntDemo/demo02","path s":{"$":"src/zepto","_":"src/underscore","B":"src/backbone","test":"src/test01", "text":"src/require.text"},"include":["$","_","B","test","text!src/demo01.html"] ,"out":"../gruntDemo/demo02/dest/libs.js"}}}}
Running "requirejs:main" (requirejs) task [D] Task source: d:\grunt\node_modules\grunt-contrib-requirejs\tasks\requirejs.j s >> Tracing dependencies for: d:/gruntDemo/demo02/dest/libs.js >> Uglifying file: d:/gruntDemo/demo02/dest/libs.js >> d:/gruntDemo/demo02/dest/libs.js >> ---------------- >> d:/gruntDemo/demo02/src/zepto.js >> d:/gruntDemo/demo02/src/underscore.js >> d:/gruntDemo/demo02/src/backbone.js >> d:/gruntDemo/demo02/src/test01.js >> d:/gruntDemo/demo02/src/require.text.js >> text!src/demo01.html

如果改變一下任務(wù)命令呢：
grunt build:gruntDemo:demo:01 --debug 結(jié)果證明也是沒有問題的，這個地方我就不貼出來了，各位自己去試試，我們分支處理一塊暫時到這里
頻道處理其實我們這里已經(jīng)做了，第一個參數(shù)是頻道，第二個參數(shù)是項目，第三個參數(shù)為分支，所以頻道相關(guān)我們暫時就不說了
native與HTML5打包
最后讓我們來看看如何打包native文件，native文件的打包其實與打包HTML5的方式類似，只不過我們這里需要一點點配置，讓一個項目可以打包成不同的效果
仍然以上面demo01為例，他的配置文件可能就需要做一定調(diào)整：
{ "requirejs": { "options": { "baseUrl": "<%= config.srcDir %>",? "paths": { "$": "src/zepto",? "_": "src/underscore",? "B": "src/backbone",? "test": "src/test01",? "text": "src/require.text" },? "web": { "include": [ "$",? "_",? "B",? "test" ],? "out": "<%= config.destDir %>/libs.js" },? "app": { "include": [ "$",? "_",? "B",? "test",? "text!src/demo01.html" ],? "out": "<%= config.destDir %>/libs_app.js" } } } } 這里為了表現(xiàn)一點web與native的不同，我特意將web中少包含一個text文件，具體還得各位項目中去實踐
如此一來，我們的代碼需要做些許調(diào)整：
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-requirejs');
//type 打包app包還是web包，channel為頻道名稱，project為項目名稱，這里對應(yīng)gruntDemo，branch為其分支，默認(rèn)與grunt目錄為平行關(guān)系，佛則package.json里面應(yīng)該有配置信息 grunt.registerTask('build', 'require demo', function (type, channel, project, branch) {
var path = '../' + channel + '/' + project + branch; grunt.log.debug('path: ' + path);
//第一步，讀取配置信息 var cfg = grunt.file.readJSON(path + '/gruntCfg.json'); cfg = cfg.requirejs.options;
grunt.config.set('config', { srcDir: path, destDir: path + '/dest' });
grunt.log.debug('param: ' + JSON.stringify(cfg)); grunt.log.debug('param: ' + cfg[type]['include']);

var taskCfg = {}; taskCfg.options = {}; taskCfg.options.baseUrl = cfg.baseUrl; taskCfg.options.paths = cfg.paths; taskCfg.options['include'] = cfg[type]['include']; taskCfg.options.out = cfg[type].out;

grunt.config.set('requirejs', { main: taskCfg });
//第二步，設(shè)置參數(shù) grunt.log.debug('param: ' + JSON.stringify(grunt.config()));
//第三步跑任務(wù) grunt.task.run(['requirejs']);
});
grunt.registerTask('default', 'test demo', ['build', 'copy']);
} 于是便可以運行了！！！
$ grunt build:app:gruntDemo:demo:01 --debug Running "build:app:gruntDemo:demo:01" (build) task [D] Task source: d:\grunt\Gruntfile.js [D] path: ../gruntDemo/demo01 [D] param: {"baseUrl":"<%= config.srcDir %>","paths":{"$":"src/zepto","_":"src/u nderscore","B":"src/backbone","test":"src/test01","text":"src/require.text"},"we b":{"include":["$","_","B","test"],"out":"<%= config.destDir %>/libs.js"},"app": {"include":["$","_","B","test","text!src/demo01.html"],"out":"<%= config.destDir %>/libs_app.js"}} [D] param: $,_,B,test,text!src/demo01.html [D] param: {"config":{"srcDir":"../gruntDemo/demo01","destDir":"../gruntDemo/dem o01/dest"},"requirejs":{"main":{"options":{"baseUrl":"../gruntDemo/demo01","path s":{"$":"src/zepto","_":"src/underscore","B":"src/backbone","test":"src/test01", "text":"src/require.text"},"include":["$","_","B","test","text!src/demo01.html"] ,"out":"../gruntDemo/demo01/dest/libs_app.js"}}}}
Running "requirejs:main" (requirejs) task [D] Task source: d:\grunt\node_modules\grunt-contrib-requirejs\tasks\requirejs.j s >> Tracing dependencies for: d:/gruntDemo/demo01/dest/libs_app.js >> Uglifying file: d:/gruntDemo/demo01/dest/libs_app.js >> d:/gruntDemo/demo01/dest/libs_app.js >> ---------------- >> d:/gruntDemo/demo01/src/zepto.js >> d:/gruntDemo/demo01/src/underscore.js >> d:/gruntDemo/demo01/src/backbone.js >> d:/gruntDemo/demo01/src/test01.js >> d:/gruntDemo/demo01/src/require.text.js >> text!src/demo01.html 結(jié)語
我們這個星期花了三天時間一起學(xué)習(xí)了grunt打包相關(guān)的知識點，需要這些知識對您有用，搞這個東西還花費了不少心血呢！！！
若是文中有誤請一并提出，后續(xù)若是這塊有所得我們再一起總結(jié)吧
原來是分成三段，這里將之合一方便各位連貫閱讀，篇幅大，記得點贊！
本文轉(zhuǎn)自葉小釵博客園博客，原文鏈接http://www.cnblogs.com/yexiaochai/p/3603389.html，如需轉(zhuǎn)載請自行聯(lián)系原作者

總結(jié)

以上是生活随笔為你收集整理的【grunt整合版】30分钟学会使用grunt打包前端代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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