[筆記] 使用 Gulp 進行網頁前端自動化 – PostCSS 自動加上前綴 & Load Plugins @地瓜大的飛翔旅程

章節連結

加強 CSS 相容性

gulp-load 可以更方便啟用

運用 Babel 套件，讓JS程式碼可以向下相容

程式碼

參考課程

相關文章

這篇筆記下用 gulp-postcss、autoprefixer……等等套件，節省你的時間和加強瀏覽器相容性。

加強 CSS 相容性

由於瀏覽器的相容性彼此之間不相同，有可能在 CSS 的解讀上，需要加上一些前綴詞，那麼 autoprefixer 和 gulp-postcss 搭配，可以協助你快速的解決問題。

gulp-load 可以更方便啟用

“gulp-“開頭的套件，若你將 $ = require(‘gulp-load-plugins’)() 的話，那麼加上 “$” 號就可以使用。

運用 Babel 套件，讓JS程式碼可以向下相容

gulp-babel 和 babel-preset 2015 搭配使用，可以讓 ES6 的語法相容於成 ES5 以下格式，同時也可以合併不同的 JS 檔、新增 sourceMap 功能，讓日後除錯可以輕鬆得知原始位置。
Babel 的安裝方式會隨著版本更新，請參閱這邊：https://www.npmjs.com/package/gulp-babel

程式碼

const gulp = require('gulp');
const $ = require('gulp-load-plugins')()
/*after installing gulp-load-plugins, all package name with prefix, gulp, can be trigger by using '$'*/
// const jade = require('gulp-jade');
// const sass = require('gulp-sass');
// const plumber = require('gulp-plumber');
// const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');

/*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($.postcss([autoprefixer()]))
    .pipe(gulp.dest('./public/css'));
});

gulp.task('babel', () =>{
  return gulp.src('./source/js/**/*.js')
    .pipe($.sourcemaps.init())
    .pipe($.babel({
      presets: ['@babel/env']
    }))
    .pipe($.concat('all.js'))
    .pipe($.sourcemaps.write('.'))
    .pipe(gulp.dest('./public/js'))
});

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

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

const gulp = require('gulp');

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

/*after installing gulp-load-plugins, all package name with prefix, gulp, can be trigger by using '$'*/

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

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

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

// const postcss = require('gulp-postcss');

const autoprefixer = require('autoprefixer');

/*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($.postcss([autoprefixer()]))

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

});

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

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

.pipe($.sourcemaps.init())

.pipe($.babel({

presets: ['@babel/env']

}))

.pipe($.concat('all.js'))

.pipe($.sourcemaps.write('.'))

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

});

/*watch your files*/

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

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

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

gulp.watch('./source/js/**/*.js',gulp.series('babel'))

});

/*task lists by follows*/

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

參考課程

Course 14 ～ Course 20 (全部一共有 48 Courses)

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

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

雖說使用 Gulp 搭配 Browserify 可以成功在前端開發時啟用 Hot Reload，不過若你在網址列開啟時輸出的是 Cannot Get / 的字樣，那麼你的後端伺服器就有一定機率是 PHP，那就得先額外先連上 PHP 伺服器後，

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

最近因為工作上需要，重拾 Gulp 來作套件管理並自動化前端網頁撰寫的流程。想不到隨著 Babel 的版本提升，容易採坑的點也越來越多。這邊筆記下完整腳本和流程供以後參考。流程基本流程，瀏覽

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

這篇筆記下網路上好用的 HTML 和 PUG 格式互相轉換的工具。若你是使用 Visual Studio，那麼也有不少好用的轉換器可供使用。HTML 轉成 PUG網頁版可以使用：HTML to PUG 、 HTML to Pug / JadeVS Code 套件的話，可

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

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

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

這篇筆記下如何依照開發環境來調整佈署的內容，同時在佈署前，自動先清理掉先前產出的靜態檔案內容，並依照現有的檔案來生成全新的檔案，已確保前後檔案的一致性。交付正式檔案前準備每

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

這篇要筆記下的是讓前端開發時可以擺脫伺服器，達成編譯完後可以自動打開瀏覽器瀏覽，同時壓縮你的程式碼。架設 WebService1. 先安裝 BrowserSync ，並新增一個靜態的伺服器網址，指向你編譯出來

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

Gulp 搭配上 Bower 和 Bootstrap 4 前端套件，可以快速的做到前端樣板管理。不過 Gulp 4 和前一版的作法有些不同，這邊筆記一下串接的方法。串接上 Bower1. Bower 是一套前端套件的管理工具，雖然說是很

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

這篇筆記下用 Gulp 來編譯你的檔案，需要安裝 gulp-jade, gulp-sass, gulp-plumber 後，再 gulpfile.js 進行修改。編譯你的第一個專案Gulp 截至2020年，運行版本為 4.0。由於影片的版本是 3.X 版本，所以有些指令

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

Gulp 是一個前端自動化工具。由於瀏覽器只認識原生的 HTML, CSS 和 JavaScript (ES6的支援度各瀏覽器不同)，而 Gulp 可以幫你節省編譯的流程，讓你可以更專注在開發上，同時也可以根據環境來制定是否

按讚加入粉絲團

章節連結