<為了Sass而學的Gulp>-Gulp基礎安裝及任務製作SOP

發表於 更新於 分類於 ，

前言(可以略過)

如標題，為了練習Sass，所以最近切板練習時常常用Sass來處理樣式，殊不知這是噩夢的開始。


之前在Sass基礎學習No.1-Sass簡介有介紹過幾種Sass的編譯方式，之前我自己是選擇用Prepros，但不知道是我電腦問題還是Prepros出問題了(我相信一定是我電腦太爛，該買新的了！)，導致我一直沒辦法編譯成功，又有點懶得學Gulp，我就轉戰VS code編輯器插件：Live Sass Compiler，結果更慘，每次編譯都要等好久。──這個等來等去，找問題的時間花了我快3天(心累)。
為了節省我寶貴的切版練習時間，就決定來學一下Gulp，看看編譯速度能不能快一點。

Gulp 安裝

我自己是照著Gulp官網的GET STARTED安裝的，所以大家也可以直接去官網看喔！

如果沒有安裝過Node.js的要先去安裝，這裡提供Node.js官網，拉到最下方有個To download Node.js, see。

因為我是很久以前安裝Node.js的，印象中會跟npm一起安裝。
如果沒有可以到npm下載。

要確定自己是不是有安裝過上面幾個環境，可以透過下面幾個指令碼確認。
以下有$都是在Command Line裡執行的！

  1. 確認Node版本

    1
    $ node --version

  2. 確認npm版本

    1
    $ npm --version

  3. 確認npx版本

    1
    $ npx --version

建立Gulp環境

通常$是不需要打的。

  • 建立全域的Gulp環境(一台電腦安裝一次就好)

    1
    $ npm install --global gulp-cli

  • 新建一個要使用Gulp管理工具的資料夾並進入它
    要先cd <fileName>到想要新建資料夾的地方，如果是桌面就先將目前位置cd過去，再進行下面步驟。

    1
    2
    $ mkdir project
    $ cd project

  • 建立一個儲存Node.js套件的package.json檔案
    這個package.json檔案會將所下載使用的套件資料儲存在裡面。

    1
    $ npm init

    在下完指令後，會產生一些問題，如果沒有要修改甚麼就直接一直按Enter就好。
    之後會產生一個package.json檔案，這是一些這個資料夾的相關資料(name, version, description,devDependencies,dependencies,etc)。

  • 建立儲存Gulp套件資料的資料夾(node_modules)

    1
    $ npm install --save-dev gulp

    --save-dev gulp(套件名)的意思就是下載現在的套件(gulp)並將他的版本加入到package.json檔案中的devDependencies裡。

    為什麼要把套件相關資料加入到package.json檔案中？
    這是為了在多人協作的時候，其他人可以直接下npm install，就可以依據原本設定在package.json檔案中的套件資料，下載指定版本套件。

  • 新增gulpfile.js儲存任務

    1
    $ touch gulpfile.js

    以後要執行的任務都要寫在這裡面。

    測試
    在gulpfile.js中寫下

    1
    2
    3
    4
    5
      function defaultTask(cb) {
      // place code for your default task here
      cb();
    }
      exports.default = defaultTask

    運行

    1
    $ gulp

  • 安裝Gulp套件
    可以到PLUGINS下載套件。
    安裝gulp-sass套件

    1
    2
    $ npm i --save-dev gulp-sass
    $ npm i gulp-sass

    有沒有--save-dev差異在哪裡？
    六角學院-使用 gulp 進行網頁前端自動化(可預覽)課程中有提到，當儲存套件時下--save-dev，套件相關資料儲存package.json檔案中的devDependencies裡，代表著現在這個套件供開發時使用，而沒有下--save-dev(如上圖右上方的安裝語法)或是下--save時套件相關資料儲存package.json檔案中的dependencies裡，代表著現在這個套件供產品上架時使用。
    我自己是覺得像是gulp-sass就是只在開發時才會使用到，當網頁上架之後就不會再用到了。
    課程裡面也提到像是把產品放上HeroKu時，它預設只會安裝dependencies裡的資料(也就是沒有下--save-dev或是下--save的套件)，所以假設將gulp套件安裝在devDependencies裡的話，產品需要運行gulp時，將無法運行。

Gulp任務運行

以下程式碼皆是寫在gulpfile.js裡面的喔！

如何撰寫任務

宣告並命名剛載入的PLUGIN

在gulpfile.js最上方，必須將剛剛下載的套件命名，以便之後在撰寫任務時，可以透過變數名執行該套件。
有下npm install(或npm i)所下載的套件都必須先宣告及命名，包含gulp自己本身。

1
2
var gulp = require('gulp');
var sass = require('gulp-sass');

撰寫的SOP

基本公式

function任務內容撰寫

在六角的Gulp課程中，有提到gulp將每個不同的任務用pipe連接，pipe的中文意思就是管子，也因此可以把**gulp.src(‘來源資料’)想像成水，pipe(任務)想成水會經過的管子，每根管子都有自己要做的任務，當然可以將管子不斷的增加(一直加pipe(任務))，並且最後一根管子的任務就是將水導向目的地(水桶??)，也就是pipe(gulp.dest(‘資料傳送目的地’))**，記得導向目的地是最後一根管子(pipe)的任務喔！

運行gulp

在Command Line裡執行

1
$ gulp <taskName>

以gulp sass套件為範例(自己的分析，如果有錯誤麻煩各位幫忙指出)

這篇文章的最後就來分析gulp sass的寫法，畢竟我就是為了練習Sass才學的Gulp。
其實在每個套件下面都會附上使用方法，現在就來看看gulp sass的使用方法吧！

現在來拆解它：

  • 先宣告套件的變數名。

    1
    2
    var gulp = require('gulp');
    var sass = require('gulp-sass');

  • 其他套件的宣告
    我自己的字面解釋就是，gulp-sass的編譯器是使用’node-sass’這個套件，所以把它儲存在gulp-sass物件裡。

    1
    sass.compiler = require('node-sass');

  • 製作sass檔案編譯的任務
    透過gulp套件製作一個名叫’sass’的任務，任務內容就是將sass檔案夾裡面所有子資料夾(**)裡面的所有副檔名為.scss的檔案，通過管子.pipe執行sass套件(sass())，請注意這裡的sass()是指執行剛剛所宣告及命名的gulp-sass套件，不是指這個task的任務名稱，最後通過管子將編譯完成後的檔案透過gulp.dest匯入到css檔案裡。
    補充說明：在sass()後面所接的on('error', sass.logError)指的是監控error事件，並在該事件發生時顯示錯誤資料( sass.logError)。

    1
    2
    3
    4
    5
    gulp.task('sass', function () {
    return gulp.src('./sass/**/*.scss')
      .pipe(sass().on('error', sass.logError))
      .pipe(gulp.dest('./css'));
    });

    其實寫到這裡，到Command Line去執行$ gulp sass就可以將.sass檔案編譯了！

  • 最後的watch任務，就留到下一次筆記啦！