我沒接觸過grunt，也是第一次學gulp，所以邊學邊做便寫下筆記，gulp真的很方便，可以做的內容包含將js與css最小化，還可以當web server，看其他還有提到可以壓縮圖片等等功能，學會了之後可以讓開發更方便。
下面開始是整個安裝流程：
安裝Gulp.js
透過npm安裝gulp，安裝完成後才能在terminal下gulp指令
npm install -g gulp
接著將terminal切換至新增的gulpProject資料夾內。
定義package.json
在terminal輸入npm init
按照提示輸入內容，可以建立起簡單的package.json。{ "name": "gulp-project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }定義相依套件
在package.json最後加入dependencies，定義這個專案會用到的套件與套件版本，可以透過npm info {packageName} version
指令來得知版本資訊。這邊會用到的gulp相關package分別有gulp, gulp-concat, gulp-uglify, gulp-uglifycss四個，gulp-concat為gulp用來合併檔案用的，可以合併javascript或是css；gulp-uglify為將javascript程式碼最小化與混淆程式碼用；gulp-uglifycss為將css碼最小化，同時也有混肴程式碼的效果。
所以最後變成{ "name": "gulp-project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "gulp":"3.9.1", "gulp-concat":"2.6.0", "gulp-uglify":"1.5.4", "gulp-uglifycss":"1.0.6" } }安裝相依模組
在package.json定義好所有相依的套件後，在terminal輸入npm install
就會直接安裝node js相關的module到資料夾內，安裝完成後會發現目錄下多一個node_modules。
檢驗安裝
安裝好了後可以嘗試在terminal輸入gulp --version
如果有出現version資訊，表示完成gulp package的安裝。
壓縮javascript
直接以將javascript 最小化的功能來看，首先在gulpProject資料夾下新增src資料夾，內層再建立js資料夾，並放入兩個js檔，分別叫做hello1.js與hello2.js，內容分別為/**
Hello
*/
alert('Hello');
與
alert('Im Joseph');
//test comment
在程式碼上加上註解，這樣可以比較原本程式碼與最小化後的程式碼，步驟如下：
定義gulpfile.js
在目錄資料夾下建立一個gulpfile.js檔，用來定義所有要讓gulp執行的task與載入所需要的gulp套件。在gulpfile內載入所需gulp package
var gulp=require('gulp'); var uglify=require('gulp-uglify');定義task
定義格式為：gulp.task(taskName, [dependencies], function(){});
參數一為task名稱；參數二可有可無，傳入的是一個陣列，裡面定義了許多task，代表著目前定義的task必須要在dependencies內所有task完成後才執行；參數三則是要執行的動作。
一般定義task只需要taskName與function就好，定義方式：gulp.task('task1', function(){ //do something })
假設目前已經定義好task1, task2, task3，如今有一個task4，必須等到task1, task2, task3完成後才執行，就必須用到第二個參數，傳入一個陣列，這時可以這樣定義：gulp.task('task4' , ['task1' ,'task2', 'task3'], function(){ // do something })
現在要將js最小化，這邊定義方式如下：gulp.task("task1", function(){ return gulp.src('src/js/*') .pipe(uglify()) .pipe(gulp.dest('dist/js')) })
上面的gulp.src是指檔案來源位置
pipe可以視為接續前一個動作後接著執行的動作，每個動作都是透過pipe來連接。
uglify()為將指定的javascript最小化。
gulp.dest是指完成後的檔案要輸出至什麼位置。執行task
在terminal輸入gulp task1
即可看見運作的task，結束後會在gulpProject自動建立dist與js資料夾，剛剛task1 src所涵蓋到的所有 js檔都會輸出至dist/js內，而且可以發現註解被移除了，只剩下程式碼，為檔案省了一些空間。
壓縮css
在gulpfile內載入所需gulp package
首先要載入gulp-uglifycss套件。
var uglifycss=require('gulp-uglifycss');加入css
在gulp/src下建立一個css資料夾，同時產生css1.css.與css2.css。
css1內容：
h1 { color: orange; text-align: center; }
css2內容：body { background-color: #d0e4fe; }
- 定義task
方法與壓縮javascript相似，只是改成用gulifycss與輸出目錄不同。gulp.task('task2', function(){ return gulp.src('src/css/*').pipe(uglifycss()).pipe(gulp.dest('dist/css')) }); - 執行task2
gulp task2
執行完後，到dist/css資料夾可以看見css1與css2已經被壓縮過(至少沒有換行了 XD )
合併檔案
為了減低多次檔案請求造成的網路效能降低，所以一般會將多個不同的js檔在最小化後合併成一個js檔，在傳輸時可以從多次的請求變成一次的請求，效能會比較好。gulp也可以做到這件事，透過gulp-concat即可做到。
定義task：
gulp.task("task1", function(){ return gulp.src('src/js/*') .pipe(uglify()) .pipe(concat('hello.min.js')) .pipe(gulp.dest('dist/js')) }) gulp.task('task2', function(){ return gulp.src('src/css/*') .pipe(uglifycss()) .pipe(concat('style.css')) .pipe(gulp.dest('dist/css')) });
透過gulp.src來指定js對象所在目錄， uglify將涵蓋到的js檔最小化；uglifycss將css最小化，concat( fileName)將所有涵蓋到的js檔與css檔合併，同時指定合併後的檔名，最後dest指定輸出位置。執行task
gulp task1
執行完後可以發現dist/js 目錄下多了hello.min.js，打開來看可以看見被壓縮過且合併後的hello1.js與hello2.js。
gulp task2
執行完後也可以發現dist/css 目錄下多了style.css。
實際測試
現在實際將前面產生的檔案拿到瀏覽器來跑一次，看合併與最小化後的js是否可以運行。建立index.html
在src資料夾下建立index.html，並載入壓縮過後的js檔與css，將來源路徑設定為dist目錄，因為之後要將所有html也一併輸出到dist目錄下。
<link rel="stylesheet" type="text/css" href="css/style.css"> <!DOCTYPE html> <html> <head> <title></title> </head> <body> <h1>Hello world.</h1> </body> </html> <script src="js/hello.min.js"></script>
接著再定義一個task將html從src輸出到dist目錄下。gulp.task('task3', function(){ return gulp.src('src/*.html') .pipe(gulp.dest('dist')); });
完成後，執行task3就可以看見dist下多了剛剛新增的index.html，如果要執行javascript與html，則必須先建立server才可，以往可能得在電腦上裝http server，現在npm上有許多套件都有這樣的效果，其中gulp可以透過gulp-connect的套件達到效果。安裝gulp-connect套件
要額外加入gulp-connect，首先在 package.json內的dependencies內加入"gulp-connect": "4.1.0"
接著執行npm install
如此便完成gulp-connect套件的安裝。執行gulp-connect
在啟動server前必須在先定義執行server工作的task，回到gulpfile內，首先載入gulp-connect套件，接著定義一個新的task，透過gulp.connect來啟動servervar connect=require('gulp-connect'); gulp.task('serverTask', function(){ connect.server({ root:'dist' }); });
一般其實只要connect.server()就可以啟動server，在這邊另外設定了server的根目錄為dist資料夾，讓localhost:8080預設存取dist目錄下的內容。還有其他設定可以調整，可以參考官方文件。
接著在terminal執行gulp serverTask
這時打開瀏覽器，輸入localhost:8080就會出現js內的alert視窗，可以確定js檔案合併成功。
最後，串連整個流程下來，總共執行了三個task，一個負責壓縮與合併javascript檔案，一個則css，最後一個是將index輸出至dist資料夾，如果每次都得一個一個去執行task也很麻煩，所以gulp可以一次讓多個task依序執行。
如果說我們最後一個task是啟動server的serverTask，則在啟動前要先完成將src內所有檔案佈至dist資料夾，我們必須先執行task1、task2、task3，所以可以調整serverTask，讓我們在呼叫這個task時，自動先完成前三個task，方法就是用task內第二個參數gulp.task(taskName, [dependencies], function(){});
直接修改serverTask成gulp.task('serverTask',['task1','task2','task3'] ,function(){ connect.server({ root:'dist' }); });
這樣在執行serverTask時就會先執行前三個task，最後再執行serverTask內的工作。
如果要再輕鬆一點，在定義好上面的task後，可以額外再定義一個default task，在terminal直接打上gulp，按下enter，其實gulp預設是會去執行名稱為default的task，所以我們可以在gulfpfile內定義default task，讓這個task去呼叫serverTask，再讓serverTask去執行，所以在gulpTask內可以再加上gulp.task('default', ['serverTask']);
如此在terminal只要打上gulp，就會執行所有項目了。
到最後目錄資料夾結構會長這樣
參考資料：
Gulp 入門教學 - 壓縮 JavaScript 與 CSS
gulp-connect文件
gulp文件
沒有留言:
張貼留言