iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 10
0
Modern Web

CSS 實戰心法系列 第 10

Gulp 與 Sass 開發環境

Gulp 是我目前最使用的自動化工具,在先前一篇也有介紹有哪些自動化工具,這篇開始會介紹 Gulp 自動化工具如何使用、有哪些推薦的工具以及一些經驗上的分享。而本次系列文都是著重在 CSS 的開發,所以不會介紹 Javascript 的自動化工具。

Gulp 可以做什麼?

Gulp 是一個前端任務管理工具,它可以做到如Fire.app、Prepros、Grunt等等所能做的事情,簡單內容如下:

  • 編譯 SASS、Coffeescript
  • 壓縮 .CSS, .JS, 甚至圖檔
  • web server with Livereload
  • 享受自己動手做Task工具的快感
  • others..

雖然很多工具,都能做到類似的功能,但是如果需求不足的時候,就要開另一個工具來幫忙;另外許多專案已經在執行中或者是老專案,有些工具就會顯得限制太多,那麼就可以用gulp客製化屬於該專案使用的工具。

快速建置

在開始使用 Gulp 前,需要先安裝 Node.js,Node.js 是一個讓 Javascript 運行在服務端的開發平台。
另外還有 npm,是由 Node.js 官方提供的第三方管理工具,並且是一種在 Node.js 應用程式中建立、分享、重複使用模組,而 npm 在目前的版本,都會隨著 Node.js 的安裝同時安裝好 npm。

簡而言之,我們使用 Node.js 的服務以及透過 npm 管理工具。

這一部分網路上有相當多的文章,本篇就不再贅述。

透過範例來了解如何運行

這邊我準備了一個很簡單的 Gulp Sass 案例:

https://github.com/Wcc723/ironman-gulp-sass/tree/v0.1.sass

下載後,在 Terminal 打開這個專案,並輸入以下指令:

npm install gulp -g
npm install

這就是透過 npm 來安裝相關所需的套件,npm install gulp -g 會在全域環境下安裝 gulpnpm install 則是會安裝專案內的 package.json 所列出的需要元件。

package json 如下,這範例中只會安裝 gulp、gulp-sass。

{
  "name": "gulp-sass",
  "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-sass": "^2.3.2"
  }
}

接下來在執行:

gulp sass

http://ithelp.ithome.com.tw/upload/images/20161210/20083608XvJOojsmM6.png

執行後就會將 source/scss/all.scss 編譯到 public/stylesheets/all.css ,此時整個範例流程也就結束。

解說

在一開始下載時檔案結構如下:

|- /source/scss   # 專案資料夾 (sass 位置)
|- .gitignore
|- gulpfile.js    # gulp 腳本檔案
|- package.json   # 套件管理 json

執行完以上步驟後,資料夾結構會如下,node_modules 是運行 gulp 的套件資料工具資料夾,public 就是前端匯出的專案資料夾,在這個範例中我們可以將 public 指定任何的資料夾名稱與後端結構配合。

|- /source/scss   # 專案資料夾 (sass 位置)
|- /mode_modules  # node.js 套件資料夾
|- /public        # 專案匯出的資料夾
|- .gitignore
|- gulpfile.js    # gulp 腳本檔案
|- package.json   # 套件管理 json

gulpfile.js 是整個 gulp 的核心,相當於一齣戲的劇本,開發者可以在腳本中定義自動化的運行流程,這邊用相當簡單的 gulp-sass 來介紹怎麼撰寫一份 gulpfile。

var gulp = require('gulp');  // 將 node_modules 的檔案載入
var sass = require('gulp-sass');

gulp.task('sass', function () {     // 定義 sass 的任務名稱
  return gulp.src('./source/scss/**/*.scss') // sass 的來源資料夾
    .pipe(sass(                     // 編譯 sass
      {outputStyle: 'expanded'}     // sass 的輸出格式
    ).on('error', sass.logError))
    .pipe(gulp.dest('./public/stylesheets')); // sass 編譯完成後的匯出資料夾
});

gulp.task('sass:watch', function () {
  gulp.watch('./source/scss/**/*.scss', ['sass']); 
  // 監控資料夾,當有變化時執行 'sass' 任務
});

範例中的 watch 資料夾有誤,請稍做調整如本文

所以開發者可以定義相當多的 Task,就以本範例中還有一個監控的任務可以使用 gulp sass:watch,如果不想要一直重啟 gulp 來編譯 sass 可以使用此指令。

結語

接下來連續幾篇都會介紹 gulp 以及與 CSS 相關的套件給大家參考。


上一篇
CSS 實戰心法 搶到決定權,開發環境自己來
下一篇
Gulp - 透過 PostCSS 加入 CSS Prefix
系列文
CSS 實戰心法30

尚未有邦友留言

立即登入留言