【grunt第一彈】30分鐘學會使用grunt打包前端程式碼
前言
以現在前端js激增的態勢,一個專案下來幾十個js檔案輕輕鬆鬆
對於複雜一點的單頁應用來說,檔案上百簡直是家常便飯,那麼這個時候我們的js檔案應該怎麼處理呢?
另外,對於css檔案,又該如何處理呢??
這些都是我們實際工作中要遇到的問題,比如我們現在框架使用zepto、backbone、underscore
我們要如何將他們合成一個libs檔案,這都是令人頭疼的問題
但是grunt的出現卻讓這些事情變得優雅起來!
簡單一鍵,打包結束,尼瑪不是不可能啊!
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
最後發現葉小釵三字,我就放心了,安全!!!!!!
下集預告
1 HTML檔案打包
2 樣式檔案打包
3 移動打包檔案
我們的開發版本與使用版本可能不在一個位置哦
4 分支處理
不同分支打包
5 native包與HTML5包
在HTML5嵌入webview的時代,我們當然存在一次打包既要形成網站檔案也要形成app檔案
6 分頻道打包
當然可能存在分頻道分分支打包的情況
今日到此為止,待續......
相關推薦
【grunt第一彈】30分鐘學會使用grunt打包前端程式碼
前言 以現在前端js激增的態勢,一個專案下來幾十個js檔案輕輕鬆鬆對於複雜一點的單頁應用來說,檔案上百簡直是家常便飯,那麼這個時候我們的js檔案應該怎麼處理呢?另外,對於css檔案,又該如何處理呢??這些都是我們實際工作中要遇到的問題,比如我們現在框架使用zepto、backbone、underscore我
【grunt整合版】30分鐘學會使用grunt打包前端程式碼
grunt 是一套前端自動化工具,一個基於nodeJs的命令列工具,一般用於:① 壓縮檔案② 合併檔案③ 簡單語法檢查 對於其他用法,我還不太清楚,我們這裡簡單介紹下grunt的壓縮、合併檔案,初學,有誤請包涵 準備階段 1、nodeJs環境 因為grunt是基於nodeJs的,所以首先各位需要安裝
【公眾號系列】兩分鐘學會SAP F1技巧
origin 根據 http 想要 www. 繼續 內容 應該 logs 公眾號:SAP Technical 本文作者:matinal 原文出處:http://www.cnblogs.com/SAPmatinal/ 原文鏈接:【公眾號系列】兩分鐘學會SAP F1技巧
【網站搭建】30分鐘輕鬆搭建網站應用
30分鐘輕鬆搭建網站應用 今天給大家分享如何30分鐘快速搭建網站。使用免費開源個人部落格建站工具WordPress部署部落格網站,最終實現:管理員-部署網站並進行日常運維、訪客-通過網際網路訪問部落格、瀏覽文章等。 先看看簡單的網站部署架構示意圖: 具體的應用部署分為以下幾個大的步驟。
【C++11】30分鐘瞭解C++11新特性
什麼是C++11 C++11是曾經被叫做C++0x,是對目前C++語言的擴充套件和修正,C++11不僅包含核心語言的新機能,而且擴充套件了C++的標準程式庫(STL),併入了大部分的C++ Technical Report 1(TR1)程式庫(數學的特殊函式除外)。 C++11包括大量的新特性
【原創】30分鐘入門 github
很久沒更新了,這篇文章重點在github的入門使用,讀者可以下載github for windows shell,邊看邊操作,加深印象。 好了,30分鐘的愉快之旅開始吧: 一、github使用的注意事項: 1.對於某一次更新提交,必須要有這次操作的commit操作,git commit -m
30分鐘學會如何使用Shiro
springmvc+mybatis dubbo+zookeeper restful redis分布式緩存 shiro kafka 一、架構要學習如何使用Shiro必須先從它的架構談起,作為一款安全框架Shiro的設計相當精妙。Shiro的應用不依賴任何容器,它也可以在JavaSE下使用。但
30分鐘學會如何使用Shiro(轉)
字段 col inf lan getc 含義 掌握 ide 包含 本文轉自http://www.cnblogs.com/learnhow/p/5694876.html 感謝作者 本篇內容大多總結自張開濤的《跟我學Shiro》原文地址:http://jinnianshilo
【 全幹貨 】5 分鐘帶你看懂 Docker !
service stop 技術分享 address article 快速 停止 容量 rom 歡迎大家前往騰訊雲社區,獲取更多騰訊海量技術實踐幹貨哦~ 作者丨唐文廣:騰訊工程師,負責無線研發部地圖測試。 導語:Docker,近兩年才流行起來的超輕量級虛擬機,它可以讓你輕松
30分鐘學會如何使用Shiro(轉)
dex user false fin hiberna bean overflow getc mis 本篇內容大多總結自張開濤的《跟我學Shiro》原文地址:http://jinnianshilongnian.iteye.com/blog/2018936我並沒有全部看完,只是
小白30分鐘學會網頁采集基礎教程
網頁采集首先,以某個多頁(需要自動翻頁)表格數據的采集為例,先演示一次網頁采集的完整的過程:點擊從頭播放完整動圖演示這裏使用的是八爪魚,依次點擊表格某一行的每個字段,可以自動識別出其他所有數據行,並自動創建循環列表;點擊翻頁按鈕,選擇“循環點擊下一頁”動作,就能自動創建翻頁循環。網頁信息爪取相關的工具有很多,
30分鐘學會iOS 11開發環境xcode 9圖文教程
iOS 11關註微信公眾號【異步圖書】每周送書Xcode是一款功能全面的應用程序,通過此工具可以輕松輸入、編譯、調試並執行Objective-C程序。如果想在Mac上快速開發iOS應用程序,則必須學會使用這個強大的工具的方法。在本文容中,將詳細講解Xcode 9開發工具的基本知識,為讀者步入本書後面知識的學習
30分鐘學會EventBus3.0詳解(一)(引入和初始化EventBus3.0) 30分鐘學會EventBus3.0詳解(二)(EventBus3.0的詳細使用) 30分鐘學會EventBus3.0詳解(一)(引入和初始化EventBus3.0) 30分鐘學會EventBus3.0詳解(二)(Ev
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
【博弈論第一篇】三姬分金(帝王為何殺功臣)
帝王為何殺功臣,大副如何謀位船長,傻B的另一種解釋…… 三姬分金 假設有A,B,C三個人,分100枚金幣。怎麼分呢?我們定一個規則,按順序提議,就是A先提議,B,再C,並且如果未超半數以上,不包括半數,同意提議,自己也有投票權。 前提假設: 三人很聰明,追求
【全網第一篇】Gibson Env 搭建復現和使用解讀
專案網址:http://gibson.vision 論文:http://gibson.vision/Gibson_CVPR2018.pdf 官方github連結:https://github.com/StanfordVL/GibsonEnv 入選 CVPR2018 年的專案 Gibs
【MySQL技術內幕】30-B+樹索引的使用
1、不同應用中B+樹索引的使用 在瞭解了B+樹索引的本質和實現後,下一個需要考慮的問題是怎樣正確地使用B+樹索引,這不是一個簡單的問題。這裡所總結的可能並不適用於所有的應用場合。我所能做的只是概括一個大概的方向。在實際的生產環境使用中,每個DBA和開發人員,還是需要根據自己
【2018第一題】標題統計
題目描述 凱凱剛寫了一篇美妙的作文,請問這篇作文的標題中有多少個字元? 注意:標題中可能包含大、小寫英文字母、數字字元、空格和換行符。統計標題字 符數時,空格和換行符不計算在內。 輸入輸出格式 輸入格式 輸入檔案只有一行,一個字串 ss。 輸出格式 輸出檔案只有
【[USACO12DEC]第一!First!】
一個串不能成為第一的情況有兩種 另外一個單詞是它的字首 在分配字母表大小關係的時候出現了矛盾的情況 第一種很好判斷,一旦我們在一個單詞沒有匹配完之前遇到一個結束標誌,那麼就說明另外一個單詞是它的字首 至於第二種,看到大小關係和是否矛盾我們很容易就聯想到了拓撲排序 於是我們匹配的時候,發現
【python 協程】10分鐘瞭解下協程
協程 協程,又稱微執行緒,纖程。英文名Coroutine。 子程式,或者稱為函式,在所有語言中都是層級呼叫,比如A呼叫B,B在執行過程中又呼叫了C,C執行完畢返回,B執行完畢返回,最後是A執行完畢。所以子程式呼叫是通過棧實現的,一個執行緒就是執行一個子程式。
微信小程式之30分鐘學會開發小程式(小程式總覽)
一.註冊小程式賬號,下載IDE 1.官網註冊https://mp.weixin.qq.com/,並下載IDE。 2.官方文件一向都是最好的學習資料。 注意: (1)註冊賬號之後會有一個appid,新建專案的時候需要填上,不然很多功能是用不了的,比如不能預覽,不能上傳程式碼等等。