grunt
是一套前端自動化工具,一個基於nodeJs的命令行工具,一般用於:
① 壓縮文件
② 合併文件
③ 簡單語法檢查
對於其他用法,我還不太清楚,我們這裏簡單介紹下grunt的壓縮、合併文件,初學,有誤請包涵
準備階段
1、nodeJs環境
因爲grunt是基於nodeJs的,所以首先各位需要安裝nodeJS環境,這塊我們便不管了
http://www.cnblogs.com/yexiaochai/p/3527418.html
2、安裝grunt
有了nodeJs環境後,我們便可以開始搞grunt了,因爲我們可能在任何目錄下運行打包程序,所以我們需要安裝CLI
官方推薦在全局安裝CLI(grunt的命令行接口)
npm install -g grunt-cli
這條命令將會把grunt命令植入系統路徑,這樣就能在任意目錄運行他,原因是
每次運行grunt時,它都會使用node的require查找本地是否安裝grunt,如果找到CLI便加載這個本地grunt庫
然後應用我們項目中的GruntFile配置,並執行任務
PS:這段先不要管,安裝完了往下看
實例學習:打包zepto
一些東西說多了都是淚,直接先上實例吧,實例結束後再說其它的
首先在D盤新建一個項目(文件夾就好)
在裏面新增兩個文件(不要問爲什麼,搞進去先)
① package.json
{ "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" } }
② Gruntfile.js
完了我們需要在grunt目錄下執行 npm install將相關的文件下載下來:
$ cd d:
$ cd grunt
然後我們的目錄就會多一點東西:
多了很多東西,先別管事幹什麼的,我們後面都會用到,這個時候在目錄下新建src文件夾,並且搞一個zepto進去
然後在Gruntfile中新增以下代碼(先別管,增加再說)
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"任務的插件 grunt.loadNpmTasks('grunt-contrib-uglify'); // 默認任務 grunt.registerTask('default', ['uglify']); }
然後運行 grunt命令後
grunt
嗯嗯,多了一個文件,並且是壓縮的,不差!!!第一步結束
認識Gruntdile與package.json
不出意外,每一個gurnt都會需要這兩個文件,並且很可能就只有這兩個文件(複雜的情況有所不同)
package.json
這個文件用來存儲npm模塊的依賴項(比如我們的打包若是依賴requireJS的插件,這裏就需要配置)
然後,我們會在裏面配置一些不一樣的信息,比如我們上面的file,這些數據都會放到package中
對於package的靈活配置,我們會在後面提到
Gruntfile
這個文件尤其關鍵,他一般幹兩件事情:
① 讀取package信息
② 插件加載、註冊任務,運行任務(grunt對外的接口全部寫在這裏面)
Gruntfile一般由四個部分組成
① 包裝函數
這個包裝函數沒什麼東西,意思就是我們所有的代碼必須放到這個函數裏面
module.exports = function (grunt) { //你的代碼 }
這個不用知道爲什麼,直接將代碼放入即可
② 項目/任務配置
我們在Gruntfile一般第一個用到的就是initConfig方法配置依賴信息
pkg: grunt.file.readJSON('package.json')
這裏的 grunt.file.readJSON就會將我們的配置文件讀出,並且轉換爲json對象
然後我們在後面的地方就可以採用pkg.XXX的方式訪問其中的數據了
值得注意的是這裏使用的是underscore模板引擎,所以你在這裏可以寫很多東西
uglify是一個插件的,我們在package依賴項進行了配置,這個時候我們爲系統配置了一個任務
uglify(壓縮),他會幹這幾個事情:
① 在src中找到zepto進行壓縮(具體名字在package中找到)
② 找到dest目錄,沒有就新建,然後將壓縮文件搞進去
③ 在上面加幾個描述語言
這個任務配置其實就是一個方法接口調用,按照規範來就好,暫時不予關注,內幕後期來
這裏只是定義了相關參數,但是並未加載實際函數,所以後面馬上就有一句:
grunt.loadNpmTasks('grunt-contrib-uglify');
用於加載相關插件
最後註冊一個自定義任務(其實也是默認任務),所以我們下面的命令行是等效的:
grunt == grunt uglify
至此,我們就簡單解析了一番grunt的整個操作,下面來合併文件的例子
合併文件
合併文件依賴於grunt-contrib-concat插件,所以我們的package依賴項要新增一項
"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" },
然後再將代碼寫成這個樣子
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'); // 默認任務 grunt.registerTask('default', ['concat']); }
運行後,神奇的一幕發生了:
三個文件被壓縮成了一個,但是沒有壓縮,所以,我們這裏再加一步操作,將之壓縮後再合併
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'); // 默認任務 grunt.registerTask('default', ['concat', 'uglify']); }
我這裏的做法是先合併形成一個libs,然後再將libs壓縮成libs.min.js
所以我們這裏換個做法,先壓縮再合併,其實unglify已經幹了這些事情了
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'); // 默認任務 grunt.registerTask('default', ['uglify']); }
所以,我們就暫時不去關注concat了
最後,今天時間不早了,我們最後研究下grunt配合require於是便結束今天的學習吧
合併requireJS管理的文件
有了前面基礎後,我們來幹一件平時很頭疼的事情,便是將require管理的所有js文件給壓縮了合併爲一個文件
首先我們建立一個簡單的程序,裏面使用了zepto、backbone、underscore(事實上我並未使用什麼)
在main.js中新增代碼:
require.config({ baseUrl: '', shim: { $: { exports: 'zepto' }, _: { exports: '_' }, B: { deps: [ '_', '$' ], exports: 'Backbone' } }, paths: { '$': 'src/zepto', '_': 'src/underscore', 'B': 'src/backbone' } }); requirejs(['B'], function (b) { });
這樣的話運行會自動加載幾個文件,我們現在希望將之合併爲一個libs.js該怎麼幹呢???
我們這裏使用自定義任務方法來做,因爲我們好像沒有介紹他
要使用requireJS相關需要插件
grunt.loadNpmTasks('grunt-contrib-requirejs');
因爲我們以後可能存在配置文件存在各個項目文件的情況,所以我們這裏將requireJs相關的配置放入gruntCfg.json中
這樣我們的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" }, "dependencies": { "express": "3.x" } }
我們這裏設置的require相關的grunt配置文件如下(gruntCfg.json):
{ "requirejs": { "main": { "options": { "baseUrl": "", "paths": { "$": "src/zepto", "_": "src/underscore", "B": "src/backbone", "Test": "src/Test" }, "web": { "include": [ "$", "_", "B", "Test" ], "out": "dest/libs.js" } } } } }
這裏我們要打包這些文件搞到dest的libs.js文件中,這個文件照做就行,最後核心代碼如下:
module.exports = function (grunt) { grunt.loadNpmTasks('grunt-contrib-requirejs'); //爲了介紹自定義任務搞了一個這個 grunt.registerTask('build', 'require demo', function () { //任務列表 var tasks = ['requirejs']; //源碼文件 var srcDir = 'src'; //目標文件 var destDir = 'dest'; //設置參數 grunt.config.set('config', { srcDir: srcDir, destDir: destDir }); //設置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; //運行任務 grunt.task.run(tasks); grunt.config.set("requirejs", requireTask); }); }
搞完了運行就好:grunt build
grunt build
最後發現葉小釵三字,我就放心了,安全!!!!!!
配置任務/grunt.initConfig
前面我們簡單的介紹了grunt相關的知識,這裏我們這裏還需要再熟悉下Gruntfile相關的知識點,比如說配置任務
grunt的任務配置都是在Gruntfile中的grunt.initConfig方法中指定的,這個配置主要都是一些命名性屬性
比如我們上次用到的合併以及壓縮的任務配置:
grunt.initConfig({ concat: { //這裏是concat任務的配置信息 }, uglify: { //這裏是uglify任務的配置信息 }, //任意非任務特定屬性 my_property: 'whatever', my_src_file: ['foo/*.js', 'bar/*.js'] });
其中的my_property完全可能讀取外部json配置文件,然後在上面任務配置中便可以,比如我們要壓縮的文件爲準或者最後要放到哪裏,便可以在此配置
我們使用grunt的時候,主要工作就是配置任務或者創建任務,實際上就是做一個事件註冊,然後由我們觸發之,所以grunt的核心還是事件註冊
每次運行grunt時,我們可以指定運行一個或者多個任務,通過任務決定要做什麼,比如我們同時要壓縮和合並還要做代碼檢查
grunt.registerTask('default', ['jshint','qunit','concat','uglify']);
當運行一個基本任務時,grunt並不會查找配置和檢查運行環境,他僅僅運行指定的任務函數,可以傳遞冒號分割參數,比如:
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); } });
運行結果如下:
$ 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
這裏有個多任務的情況,就是一個任務裏面實際上第一了多個東東,這個時候就有所不同
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); });
如果我們運行,運行情況如下:
???????
更多時候,我們實際場景中都會需要自定義任務,而在我們任務內部使用 grunt.task.run({}) 運行任務
這塊的知識點,我們後面以實際例子說明
grunt插件
學習grunt主要就是學習grunt的插件使用,所以我們今天先來學習常用的幾個插件
grunt-contrib-unglify
我們仍然以簡單例子學習
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'); }
這樣會將src裏面的zepto等文件打包值dest的lib.min.js中
壓縮一個文件夾的所有文件
然後這段代碼非常有意思,他會將一個文件目錄裏面的所有js文件打包到另一個文件夾
module.exports = function (grunt) { grunt.initConfig({ uglify: { my_target: { files: [{ expand: true, cwd: 'src', src: '**/*.js', dest: 'dest' }] } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); }
若是你希望給你文件的頭部加一段註釋性語言配置banner信息即可
grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! 註釋信息 */' }, my_target: { files: { 'dest/output.min.js': ['src/input.js'] } } } });
grunt-contrib-concat
該插件主要用於代碼合併,將多個文件合併爲一個,我們前面的uglify也提供了一定合併的功能
在可選屬性中我們可以設置以下屬性:
① separator 用於分割各個文件的文字,
② banner 前面說到的文件頭註釋信息,只會出現一次
③ footer 文件尾信息,只會出現一次
④ stripBanners去掉源代碼註釋信息(只會清楚/**/這種註釋)
一個簡單的例子:
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'); }
合併三個文件爲一個,這種在我們源碼調試時候很有意義
構建兩個文件夾
有時候我們可能需要將合併的代碼放到不同的文件,這個時候可以這樣幹
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'); }
這種功能還有這樣的寫法:
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'); }
第二種寫法便於使用配置文件,具體各位選取吧,至於讀取配置文件的東西我們這裏就先不關注了
grunt-contrib-jshint
該插件用於檢測文件中的js語法問題,比如我test.js是這樣寫的:
alert('我是葉小釵')
module.exports = function (grunt) { grunt.initConfig({ jshint: { all: ['src/test.js'] } }); grunt.loadNpmTasks('grunt-contrib-jshint'); }
運行結果是:
$ grunt jshint Running "jshint:all" (jshint) task Linting src/test.js ...ERROR [L1:C15] W033: Missing semicolon. alert('我是葉小釵')
說我缺少一個分號,好像確實缺少.....如果在裏面寫明顯的BUG的話會報錯
多數時候,我們認爲沒有分號無傷大雅,所以,我們文件會忽略這個錯誤:
jshint: { options: { '-W033': true }, all: ['src/test.js'] }
這裏有一個稍微複雜的應用,就是我們合併之前做一次檢查,合併之後再做一次檢查,我們可以這樣寫
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'); }
$ 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.
這裏連續運行了三個任務,先做檢查再合併,然後做檢測,我這裏寫了兩個簡單的文件,如果將jquery搞進去的話,好像還出了不少BUG......
所以真的要用它還要自定一些規範,我們這裏暫時到這裏,先進入下一個插件學習
grunt-contrib-requirejs
我們的grunt打包程序極有可能與requirejs一起使用,但是幾個插件學習下來又屬requireJs的使用最爲麻煩,因爲網上資源很少,搞到這一段耗掉了我很多精力
這個時候你就會感嘆,英語好不一定編程好,英語差想成爲高手還是不簡單啊!!!
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" } } }
官方的例子首先就是這幾個屬性:
baseUrl 代表所有的js文件都會相對於這個目錄
mainConfigFile 配置文件目錄
name ???
out 輸出文件
一些參數我們不太瞭解,這個時候就只能以例子破之了
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'); }
這樣配置後,會將include裏面的文件打包爲out對應的文件,paths的本身意義不大,就是用於配置include裏面的指向
這個時候我們來加個name看看有神馬作用:
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'); }
這樣的話,會將name對應文件壓縮到壓縮文件的最前面,但是具體是幹什麼的,還是不太清楚,其英文註釋說是單個文件或者其依賴項優化,不知道優化什麼啊。。。囧!!!
requireJS基本的用法就是這樣了,其詳細信息,我們過段時間再來看看,下面說一下requireJS的其它用法
我們這裏將requireJS的配置信息放在外面,而Gruntfile採用自定義任務的方式完成上面的功能
配置文件/cfg.json
{requirejs: { "options": { "baseUrl": "./", "paths": { "$": "src/zepto", "_": "src/underscore", "B": "src/backbone", "Test": "src/Test01" }, "include": [ "$", "_", "B", "Test" ], "out": "dest/libs.js" } }}
然後,這裏我們便不是有initConfig的做法了,直接使用自定義任務
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 }); //第二步,設置參數 grunt.log.debug('參數:' + JSON.stringify(grunt.config())); //第三步跑任務 grunt.task.run(['requirejs']); }); }
$ grunt build --debug Running "build" task [D] Task source: d:\grunt\Gruntfile.js [D] 參數:{"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
效果還是有的,最後我們介紹下requireJS打包模板文件
require與模板文件
我們知道,模板文件一般都是html,比如我們這裏的demo01.html,對於這個文件我們應該怎麼打包呢?其實很簡單......
需要幹兩件事情:
① 引入require.text
② 加入模板文件
{ "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" } } }
於是,我們便成功將模板打入了
$ grunt build --debug Running "build" task [D] Task source: d:\grunt\Gruntfile.js [D] 參數:{"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
在文件中我們引用方式是:
"text!src/demo01.html" => '具體文件'
過濾關鍵字
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本身具有這樣的功能,但是我們實際項目重會出現這種可能:
我們核心框架會有一套壓縮代碼,並且會在對應目錄生成文件用於發佈,但是這個地方的權限對各個頻道團隊是不可見的
所以,我們在各個頻道的公共文件夾內應該將剛剛的文件給複製過去,這塊代碼其實很簡單,不需要任何新知識都能實現:
我們這裏依舊採用昨天的require相關的代碼,但是一有個不同的地方就是,我們要同時在D盤的common文件夾中生成該文件
這個代碼其實比較簡單,這裏我們先介紹一個新的插件copy
grunt-contrib-copy
該插件用於複製文件到你想要的文件夾處
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
若是不想複製文件夾只要文件應該這樣幹:
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 }); //第二步,設置參數 grunt.log.debug('參數:' + JSON.stringify(grunt.config())); //第三步跑任務 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
關於移動相關的知識點暫時介紹到這裏,我們進入下一話題
分支/頻道處理
我們在實際項目重會遇到這種情況,我們一個主幹分支上可能拉出很多分支完成不同的功能,而各個分支就有那麼一點點不同,那麼這個時候打包工具該怎麼辦呢?
我們一般是這樣處理的:
① 首先全局只會有一個打包工具
② 其次每一個分支都會有一個gruntCfg.json的配置文件,存儲相關的打包信息
③ 每次打包時候便把響應的分支打印到各自的dest目錄裏面
爲了模擬這一情況我們將grunt打包相關的文件放到D盤的grunt目錄裏面,並在D盤新建gruntDemo目錄
然後我們在gruntDemo中建立一個項目,並且爲這個項目拉一個分支,比如現在項目是地demo01與demo02
現在文件結構如下:
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
這個時候,要實現功能最好的方法就是寫自定義任務了,其它方案不好使,這個時候起配置文件也需要有一定修改,比如其中的路徑需要加入參數信息
{ "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相關信息時候,首先得傳入path依賴的文件目錄,以及輸出的文件目錄
module.exports = function (grunt) { grunt.loadNpmTasks('grunt-contrib-requirejs'); //channel爲頻道名稱,project爲項目名稱,這裏對應gruntDemo,branch爲其分支,默認與grunt目錄爲平行關係,佛則package.json裏面應該有配置信息 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 }); //第二步,設置參數 grunt.log.debug('param: ' + JSON.stringify(grunt.config())); //第三步跑任務 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
如果改變一下任務命令呢:
grunt build:gruntDemo:demo:01 --debug
結果證明也是沒有問題的,這個地方我就不貼出來了,各位自己去試試,我們分支處理一塊暫時到這裏
頻道處理其實我們這裏已經做了,第一個參數是頻道,第二個參數是項目,第三個參數爲分支,所以頻道相關我們暫時就不說了
native與HTML5打包
最後讓我們來看看如何打包native文件,native文件的打包其實與打包HTML5的方式類似,只不過我們這裏需要一點點配置,讓一個項目可以打包成不同的效果
仍然以上面demo01爲例,他的配置文件可能就需要做一定調整:
{ "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" } } } }
這裏爲了表現一點web與native的不同,我特意將web中少包含一個text文件,具體還得各位項目中去實踐
如此一來,我們的代碼需要做些許調整:
module.exports = function (grunt) { grunt.loadNpmTasks('grunt-contrib-requirejs'); //type 打包app包還是web包,channel爲頻道名稱,project爲項目名稱,這裏對應gruntDemo,branch爲其分支,默認與grunt目錄爲平行關係,佛則package.json裏面應該有配置信息 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 }); //第二步,設置參數 grunt.log.debug('param: ' + JSON.stringify(grunt.config())); //第三步跑任務 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
結語
我們這個星期花了三天時間一起學習了grunt打包相關的知識點,需要這些知識對您有用,搞這個東西還花費了不少心血呢!!!
若是文中有誤請一併提出,後續若是這塊有所得我們再一起總結吧
原文鏈接:http://www.cnblogs.com/yexiaochai/p/3603389.html