[筆記] 使用 Gulp 進行網頁前端自動化 – 用一般 HTML 來製作樣板並排版 @地瓜大的飛翔旅程

章節連結

用 Gulp-Template 來新增樣板
gulpfile.js 的注意事項
程式碼
參考課程
相關文章

雖說用 pug 來進行排版算是很方便，不過對於已經習慣 HTML 標籤格式的我來說，要上手還是有一點難度。於是經過了無數測試和尋找後，最後選定用 gulp-template 來進行排版，可以得到如同用 pug 一般的使用體驗，寫法上也無需做太大改動。

用 Gulp-Template 來新增樣板

gulp-template 可以達到如同 jade 一般的效果，你唯一需要做的，就只是將 pug 格式轉成 html 檔案。在 layout 樣板中，標記插入位置的方式是用 <!– build:title –> 。在其他頁面上，則是使用 <!– build:title –> <!– /build:title –> 標記，將內容物放在裡頭。

gulpfile.js 的注意事項

樣板來源的載入，是寫在 gulpfile.js 裡頭，且可以和頁面來源不同，彈性相當夠。

程式碼

// gulpfile.js
const gulp = require('gulp');
const $ = require('gulp-load-plugins')()

gulp.task('templateHTML', () => {
  return gulp.src('./source/**/*.html') // 所有要編譯的網頁
    .pipe($.plumber())
    .pipe($.templateHtml('./source/template/layout.html')) // 樣板網頁位置
    .pipe(gulp.dest('./public/'))
    .pipe(browserSync.stream())
})

gulp.task('default', gulp.series('clean', gulp.parallel('templateHTML', 'sass', 'babel'), gulp.series('bower', 'vendors'), gulp.parallel('watch', 'browser-sync')));

// ./source/index.html
<!-- build:title -->
<title>Title</title>
<!-- /build:title -->

<!-- build:content -->
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-secondary" type="button">Secondary</button>
<button class="btn btn-success" type="button">Success</button>
<button class="btn btn-danger" type="button">Danger</button>
<button class="btn btn-warning" type="button">Warning</button>
<button class="btn btn-info" type="button">Info</button>
<!-- /build:content -->

// ./source/template/layout.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- build:title -->
  <link rel="stylesheet" type="text/css" href="./css/all.css" />
</head>

<body>
  <!-- build:content -->
  <script src="./js/vendors.js"></script>
  <script src="./js/customized.js"></script>
</body>

</html>

// gulpfile.js

const gulp = require('gulp');

const $ = require('gulp-load-plugins')()

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

return gulp.src('./source/**/*.html') // 所有要編譯的網頁

.pipe($.plumber())

.pipe($.templateHtml('./source/template/layout.html')) // 樣板網頁位置

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

.pipe(browserSync.stream())

})

gulp.task('default', gulp.series('clean', gulp.parallel('templateHTML', 'sass', 'babel'), gulp.series('bower', 'vendors'), gulp.parallel('watch', 'browser-sync')));

// ./source/index.html

<title>Title</title>

<button class="btn btn-primary" type="button">Primary</button>

<button class="btn btn-secondary" type="button">Secondary</button>

<button class="btn btn-success" type="button">Success</button>

<button class="btn btn-danger" type="button">Danger</button>

<button class="btn btn-warning" type="button">Warning</button>

// ./source/template/layout.html

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

參考課程

Course 28 ～ Course 29 (全部一共有 48 Courses)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

這篇筆記下用 Gulp 來編譯你的檔案，需要

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

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

按讚加入粉絲團