Gulp-自動化的好幫手

忙了半年的專案告個段落,在這之前寫前端 HTML 用的都是 ERB 語言,編譯工具則是 fire.app,這次的專案因為後端是使用 Ruby on Rails,對 erb 樣板的應用又更深了,而 fire.app 提供的是比較基本的 helper。想說來換個 template 語言寫寫看,像是jadehamlslim,這些都很多人使用, haml 很常被拿來跟erb搭配,我是沒寫過,專案也是笨笨的用html寫,所以這次就來挑戰 jade。當然,這些都只是方便你編寫 HTML 的工具,他們最終都要轉回一般的 html ,node.js的套件管理工具-npm,提供了非常多程式界的神們寫好的編譯工具,這時候你會想,那要怎麼用它呢?這麼多指令常常要打不是很麻煩?,這時候就要用到我們這次要介紹的Gulp來幫忙你做這些重複要的事情,讓他可以自動化!

Gulp 簡介

簡單來說,就是運用一些別人寫好的套件,來簡化和加速前端開發流程,像是編譯檔案、minify....等,之類的任務。在 gulp 出現之前就已經有一個 grunt 跟他在做一樣的事情,那為什麼還要有 gulp 呢? 因為他效能比較好,可以參考【appleboy的Automating your workflow with Gulp.js】,文章中的簡報為2014 COSCUP的簡報。

安裝 gulp

1. 管理npm套件 - package.json

假設你都已經安裝好node.jsnpm,你要在你的專案根目錄下先建立package.json這個檔案,這是為了要管理你會使用到的npm套件,只要在你專案底下輸入:npm init,接著就依照npm要你輸入的內容輸入,完成後就會看到你專案底下多了一個package.json的檔案。

2. 安裝gulp

npm 的套件有分是安裝在專案底下的node_modules資料夾,還是安裝在全域。

◎ 首先安裝全域:

$ npm install --global gulp

備註: 這裡的--global代表全域

◎ 接著安裝在專案底下:

$ npm install --save-dev gulp

備註: 這裡的--save-dev代表記錄到package.json裡面

接著,在根目錄下建立gulpfile.js,你所有的任務(task)都是要寫在這裡面唷!~
這樣,大致上就算先完成了gulp的設定。

3. 三步驟完成任務-task、src、dest

task:每一個 task 代表一個任務。
src:選取要的檔案。
dest:輸出到哪裡?

gulp 大致上就是在用這三個操作,還有watch,watch 是當你第一次執行後,總要持續監看檔案是不是有做修正吧,如果更新了,就重新去跑某些 task ,不然每次都要回到command line去輸入 gulp 也挺麻煩的。

下面,我們就用編譯sass來做範例,我們會用 gulp-ruby-sass 這個 npm 套件來操作給大家看。

首先當然還是要安裝gulp-ruby-sass,在專案底下 cmd 輸入npm install --save-dev gulp-ruby-sass
然後回到gulpfile.js裡面去寫 task,先給大家看整個code:

// gulpfile.js


var gulp      = require('gulp'),
    scss      = require('gulp-ruby-sass');
    
// default

gulp.task('default', ['scss']);

// scss task

gulp.task('scss', ['clean'], function(){
    gulp.src('./assets/scss/**/*.scss')
    .pipe(scss())
    .on('error', function (err) { console.log(err.message); })
    .pipe(gulp.dest('./dist/assets/css'));
});

任何要用到的 npm ,在安裝後都必需require進來。

var gulp      = require('gulp'),
    scss      = require('gulp-ruby-sass');

整個 task 的撰寫,scss代表的是 task 的名稱,就像是function的名稱一樣,後面的['clean']則是相依的其他task,必須等這裡面的 task 執行完後才執行。

gulp.task('scss', ['clean'], function(){
    // do some thing

});

src是指取了哪些資源,下面這段意思是指,在根目錄下的assets/scss資料夾下,不管是什麼資料夾,只要是副檔名為.scss的檔案,如果你想知道選了什麼檔案,可以用 gulp-debug 來查看選了哪些。

gulp.src('./assets/scss/**/*.scss')

這邊則是執行我們剛剛上面 require 進來的 module,src完之後的指令用都pipe()包起來。

.pipe(scss())

這邊裡面的dest()則是檔案要輸出到哪裡。

.pipe(gulp.dest('./dist/assets/css'));

大致上task就算設定完成,接著就是在 default 這個 task 裡面要去把你剛剛寫完的 task 給include進來。

gulp.task('default', ['scss']);

Comments

comments powered by Disqus