在工作流相關的第一篇博客中,我們安裝了nodejs的環境,那么nodejs自帶的npm是一個功能十分強大的管理器,它已經不僅僅是局限於nodejs的版本管理器了,那么當現在我們可以通過npm來下載我們需要使用的各種包,我們需要知道的是,nodejs是一個模塊化的用法,它的各個功能都封裝成一個一個的模塊部分,關於模塊的詳細部分在nodejs部分再去詳細介紹.那么既然它是由模塊組成的,那么我們有時候就需要給我們本地的項目區添加各個模塊,添加完成之后,我們自己在本地用着很爽,那當項目發布的時候,或者我們給被人傳我們的代碼的時候,我們還需要將項目依賴的各個模塊一塊打包傳遞過去,這是很繁瑣費流量的一件事,所以我們可以在本地創建一個文件,文件中記錄我們項目的信息,包括這個項目依賴的各個模塊,那么別人拿到我們的的代碼的時候,就可以根據我們這個文件去下載模塊了,這時我們就需要用到一個文件package.json
具體的生成方式也很簡單,在你想要使用npm的文件夾下打開終端,輸入命令npm init,這時就會讓你初始化這個package.json文件了,
生成這個文件后我們就可以使用npm指令進行模塊的下載了,這里我們可以看到package.json中,有文件名,版本號,項目描述,項目主文件,全局依賴,項目依賴模塊,腳本scripts等組成部分,其中,我們現在需要明白的一個地方是其中的dependencies和devDevpendenies區別,前者是你生產環境需要依賴的庫,后者是你開發時候用的庫,比如測試庫,測試服務器之類的,在真實生產環境是不需要的,如果我們使用了構架工具,例如gulp之類的,打包的時候,是不會將dev庫打包進去的.那么我們有了npm,就要來看一下它的基本使用命令吧,
1,npm install <moduleNames>:安裝Node模塊, 例如: npm install gulp, npm install -g gulp //第二種為全局安裝,第一種為本地安裝,區別在於全局安裝會將模塊安裝到Node的安裝目錄下,而本地安裝時安裝到當前文件夾目錄下 2,npm uninstall <moduleName>:對應的卸載模塊 3,npm view <moduleName>:查看模塊的package.json文件 4,npm list :查看當前目錄下已安裝的node包, 5,npm help:查看幫助命令 6,npm view moduleName dependencies:查看包的依賴關系 7,npm view moduleName repository.url: 查看包的源文件地址 8,npm help folders:查看npm使用的所有文件夾 9,npm rebuild moduleName: 用於更改包內容后進行重建 10,npm outdated:檢查包是否已將過時, 11,npm update <moduleName> 用於更新node模塊 12,npm search packageName :在發布一個npm包的時候,可以檢查包名是否已經存在, 13,npm -v :查看當前npm的版本號 14,npm root :查看當前包的安裝路徑
那么接下來當我們的項目需要用到模塊或者包的時候,我們就可以npm install它,這比你去手動的去官網下載方便了好多,當你創建好一個項目的時候,我們需要對要發布的這樣項目進行好測試,打包,壓縮混淆等等一系列步驟,而這些步驟正是繁瑣無意義的,所以偉大的程序員就會去找工具來代替他,這就像人類發明其他工具是一個道理的,當我們厭倦了用手吃食物的時候,我們就發明了筷子和刀叉(印度除外).
目前比較流行的工具有grunt,gulp,yeoman等工具,其中gulp的核心設計時基於unix流的概念,利用nodejs的強大的流,不需要寫中間文件,可以更快的完成構建,讓簡單的事情繼續簡單,復雜的任務變得可管理,而且它簡單易學,它的核心API只有5個,掌握了5個API就學會了gulp,之后可以通過管道流去組件自己的任務.我們就以gulp為示例來進行一個項目的壓縮管理.
首先,我們需要通過npm下載gulp,在當前項目的文件夾下打開終端輸入命令npm install --save-dev gulp,下載完成后,我們可以在package.json中查看到dev依賴,在node_modules中也可以查看到.這時我們已經安裝好了gulp,我們還需要再當前項目的根目錄下新建一個gulpfile.js文件來進行gulp的各種任務的書寫,至於為什么這么寫,官方規定!
首先來個示例使用一下gulp,在gulpfile.js文件中寫入以下內容:
var gulp1 = require('gulp'); gulp1.task('default',function(){ console.log("默認任務執行") }); //在終端中輸入 gulp ,這時邊執行了gulp的默認任務default,輸出文字
這時我們可以看到,我們使用的require導入了gulp模塊,這時commonJS格式的,在nodejs的時候會進行詳解,我們現在要知道require后,gulp1就是gulp模塊了.這時我們已經使用了gulp的一個API了,對,就是task,它的作用是定義一個任務.
gulp.task(任務名字,任務列表,任務動作(){ //這里是任務將要執行的動作 }) //其中任務名字,和任務動作是必須的,而任務列表是非必須的,這是一個包含任務的數組,在當前任務完成后依次執行數組中的任務.
當我們有任務的時候,我們需要去給這個任務確定執行目標,這時候就引出了我們的另一個API,gulp.src();
gulp.src('src/js/*.js')
.pipe(零件1)//零件就是值要對當前文件執行的操作,例如壓縮,
.pipe(零件2)
.pipe(零件3);
//我們之前就說過,gulp是基於nodejs強大的流的,我們通過src找到文件夾js下的所有js類型的文件,
//然后這些js文件就像進入了一個流水線一樣,
//通過第一個管道來到第一個函數裝配第一個零件,然后再通過管道流向了其他配件處,直到整個工程完畢.
我們現在可以創建一個任務,然后匹配到所有的js文件,對他們進行一系列操作,那么操作完成的文件呢?比如我們將所有的js文件進行了壓縮,混淆,那這一部分文件放在哪去呢?當然不能夠將原文件變成壓縮后的文件了,這時候,我們需要將這些文件流向指定的文件夾.gulp中為我們提供了一個API,gulp.dest():
gulp.task('jsminTask',function(){
gulp.src('src/js/*.js').
pipe(gulp.dest('dist/js/'));
});
//在這個任務中,當動作執行到即將完畢的時候,
//會將當前管道中的文件流向dest()中的文件夾下,
//如果dest()中的文件夾不存在會自動創建
現在我們基本上已經可以來創建一個成形的任務了,但是,因為gulp中的api很少,而它的大部分API都是需要下載,當然我們可以使用npm下載,這里我們示例中就對於這個文件進行壓縮,混淆,打包這三個步驟,它所依賴的包分別是jsmin,uglify,concat.我們可以去npm的官網,npmjs.com中去查找我們需要的包,而且我們也不需要去死記硬背各個包的作用,因為它的包實在是太多了,多到你記不完,我么只需要記住幾個常用的包,當使用的時候可以進行查找,每個包的介紹都有用法實例,
gulp.task('jsminTask',function(){
gulp.src('src/js/*.js').
pipe(concat('all.js')). //打包成一個文件
pipe(jsmin()).//進行壓縮
pipe(uglify()).//進行混淆
pipe(gulp.dest('dist/js/'));//流向指定的文件夾下
});
//在終端輸入gulp jaminTask就會執行當前任務了,執行完任務可以去dist/js下查看是否有all.js文件夾
//我們對css的打包壓縮等操作可以去在設置一個cssminTask任務,HTML壓縮同理
我們已經算是成功的對一個項目進行了發布前的工具發操作,但是我們還發現一個問題,那就是,當我們改動了項目中的文件內容后,我們還需要手動去再執行一次任務,這顯然是很不智能的,所以便有了gulp.watch這個api,
gulp.watch('src/js/*.js',['jsminTask']);
//這個API的作用是監聽js文件,當js文件發生改變的時候,就執行jsminTask任務.
好了,講到這里,我們的文件操作已經完成了,今天的分享就到這里,本文若有錯誤或不足,還請指正補充,謝謝!