npm以及gulp相關操做

　　在工做流相關的第一篇博客中,咱們安裝了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任務.

　　好了,講到這裏,咱們的文件操做已經完成了,今天的分享就到這裏,本文如有錯誤或不足,還請指正補充,謝謝!