[筆記] 使用 Gulp 進行網頁前端自動化 – 初始化你的第一個 Gulp 編譯專案

Posted on2020-05-082020-05-08AuthorANDY LIEN

章節連結

編譯你的第一個專案
程式碼
參考課程
相關文章

這篇筆記下用 Gulp 來編譯你的檔案，需要安裝 gulp-jade, gulp-sass, gulp-plumber 後，再 gulpfile.js 進行修改。

編譯你的第一個專案

Gulp 截至2020年，運行版本為 4.0。由於影片的版本是 3.X 版本，所以有些指令會不相同。主要差別在於新增了 .series 和 .parallel 兩種運行模式。前者為依序，後者為非同步執行。

因此在 .watch 和 .task 中，捨棄了單純以 [‘task1′,’task2’] 的傳值，而改用 .series 和 .parallel，裡頭傳入各個字串即可。

1. 安裝 HTML 的模版套件 (gulp-jade) 和 SASS 的編譯套件 (gulp-sass)，完成後再寫一個 default 的 task ，將你的前幾項任務依序執行。

2. 運用 gulp-plumber 來避免編譯過程中，某一檔案出現錯誤，就編譯中斷的問題

3. 運用 watch 來監聽檔案，讓對應的檔案有修改時，就自動重新編譯

程式碼

const gulp = require('gulp');
const jade = require('gulp-jade');
const sass = require('gulp-sass');
const plumber = require('gulp-plumber');

/*add task*/
gulp.task('copyHTML',()=>{
  return gulp.src('./source/**/*.html')
             .pipe(gulp.dest('./public/'))
})

/*don't forget return*/
gulp.task('jade', ()=>{
  return gulp.src('./source/*.jade')
    .pipe(plumber())
    .pipe(jade({
      pretty:true //with full tags
    }))
    .pipe(gulp.dest('./public/'))
});

gulp.task('sass', ()=>{
  return gulp.src('./source/scss/**/*.scss')
    .pipe(plumber())
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./public/css'));
});

/*watch your files*/
gulp.task('watch', ()=>{
  gulp.watch('./source/*.jade', gulp.series('jade'));
  gulp.watch('./source/scss/**/*.scss', gulp.series('sass'));
});

/*task lists by follows*/
gulp.task('default', gulp.series('jade', 'sass', 'watch'));

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

const gulp = require('gulp');

const jade = require('gulp-jade');

const sass = require('gulp-sass');

const plumber = require('gulp-plumber');

/*add task*/

gulp.task('copyHTML',()=>{

return gulp.src('./source/**/*.html')

.pipe(gulp.dest('./public/'))

})

/*don't forget return*/

gulp.task('jade', ()=>{

return gulp.src('./source/*.jade')

.pipe(plumber())

.pipe(jade({

pretty:true //with full tags

}))

.pipe(gulp.dest('./public/'))

});

gulp.task('sass', ()=>{

return gulp.src('./source/scss/**/*.scss')

.pipe(plumber())

.pipe(sass().on('error', sass.logError))

.pipe(gulp.dest('./public/css'));

});

/*watch your files*/

gulp.task('watch', ()=>{

gulp.watch('./source/*.jade', gulp.series('jade'));

gulp.watch('./source/scss/**/*.scss', gulp.series('sass'));

});

/*task lists by follows*/

gulp.task('default', gulp.series('jade', 'sass', 'watch'));

參考課程

Course 9 ～ Course 13 (全部一共有 48 Courses)

請注意：本系列文章為個人對應課程的消化吸收後，所整理出來的內容。換言之，並不一定會包含全部的課程內容，也有可能會添加其他資源來說明。課程連結網址：http://tinyurl.com/y9fp69lb

相關文章

★全文分享★ [指南] 前端自動化開發 Gulp + PHP + Browserify

[指南] 前端自動化開發 Gulp + PHP + Browserify

雖說使用 Gulp 搭配 Browserify 可以成功在前

★全文分享★ [指南] 前端自動化開發工具 Gulp 4 + Babel 7 + Browserify 整合紀錄

[指南] 前端自動化開發工具 Gulp 4 + Babel 7 + Browserify 整合紀錄

最近因為工作上需要，重拾 Gulp 來作套件

★全文分享★ [筆記] HTML 與 PUG 線上格式轉換

[筆記] HTML 與 PUG 線上格式轉換

這篇筆記下網路上好用的 HTML 和 PUG 格式

★全文分享★ [筆記] 使用 Gulp 進行網頁前端自動化 – 用一般 HTML 來製作樣板並排版

[筆記] 使用 Gulp 進行網頁前端自動化 – 用一般 HTML 來製作樣板並排版

雖說用 pug 來進行排版算是很方便，不過

★全文分享★ [筆記] 使用 Gulp 進行網頁前端自動化 – 依照開發環境調整佈署內容

[筆記] 使用 Gulp 進行網頁前端自動化 – 依照開發環境調整佈署內容

這篇筆記下如何依照開發環境來調整佈署

★全文分享★ [筆記] 使用 Gulp 進行網頁前端自動化 – 架設簡易伺服器和壓縮程式碼

[筆記] 使用 Gulp 進行網頁前端自動化 – 架設簡易伺服器和壓縮程式碼

這篇要筆記下的是讓前端開發時可以擺脫

★全文分享★ [筆記] 使用 Gulp 進行網頁前端自動化 – Gulp 和 Bower 串接

[筆記] 使用 Gulp 進行網頁前端自動化 – Gulp 和 Bower 串接

Gulp 搭配上 Bower 和 Bootstrap 4 前端套件，可

★全文分享★ [筆記] 使用 Gulp 進行網頁前端自動化 – PostCSS 自動加上前綴 & Load Plugins

[筆記] 使用 Gulp 進行網頁前端自動化 – PostCSS 自動加上前綴 & Load Plugins

這篇筆記下用 gulp-postcss、autoprefixer……等

★全文分享★ [筆記] 使用 Gulp 進行網頁前端自動化 – 簡介

[筆記] 使用 Gulp 進行網頁前端自動化 – 簡介

Gulp 是一個前端自動化工具。由於瀏覽器

按讚加入粉絲團

延伸閱讀

Blogimove部落格搬家技術服務