[筆記] 使用 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'));