[筆記] 使用 Gulp 進行網頁前端自動化 – 依照開發環境調整佈署內容 @地瓜大的飛翔旅程

章節連結

交付正式檔案前準備
依據環境來調整檔案
新增一個 build 的流程
程式碼
參考課程
相關文章

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

交付正式檔案前準備

每次產生正式的發佈檔案前，可以運用 gulp.clean 的套件，來確保你新產出的檔案，和你實際編輯是一致的。因為在編修過程中，你多少會去增減你的來源檔案。別忘記增加 allowEmpty:true，以免因為資料夾不存在而報錯。

依據環境來調整檔案

正式交付檔案時，程式碼往往是會被壓縮的。不過這樣一來，你的程式碼在編輯時就會不好閱讀。可藉由 minimist 來傳入設定參數，並使用 gulp-if 來做簡單的 if-else 控制，來達成效果。

新增一個 build 的流程

其實跟開發的自動化流程是很像的，移除最後的 watch 和 browser-sync 即可。由於 Gulp 4.0 之後，已經有 gulp.series 和 gulp.parallel 兩個內建指令可以做到同步和非同步的進行，就不需要再安裝 gulp-sequence 。

程式碼

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 autoprefixer = require('autoprefixer');
const mainBowerFiles = require('main-bower-files');
const browserSync = require('browser-sync').create();
const minimist = require('minimist');

/*setting default environment option*/
const envOptions = {
  string:'env',
  default:{env:'dev'}
}
const options = minimist(process.argv.slice(2),envOptions)

/*don't forget return*/
gulp.task('clean', ()=>{
  return gulp.src(['./temp','./public'],{allowEmpty:true,read:false})
             .pipe($.clean())
})

gulp.task('jade', ()=>{
  return gulp.src('./source/*.jade')
    .pipe($.plumber())
    .pipe($.jade({
      pretty:true //with full tags
    }))
    .pipe(gulp.dest('./public/'))
    .pipe(browserSync.stream()) //automatically refresh
});

gulp.task('sass', ()=>{
  return gulp.src('./source/scss/**/*.scss')
    .pipe($.plumber())
    .pipe($.sourcemaps.init())
    .pipe($.sass().on('error', $.sass.logError))
    .pipe($.postcss([autoprefixer()]))
    .pipe($.if(options.env === "production",$.cleanCss()))
    .pipe($.sourcemaps.write('.'))
    .pipe(gulp.dest('./public/css'))
    .pipe(browserSync.stream())
});

gulp.task('babel', () =>{
  return gulp.src('./source/js/**/*.js')
    .pipe($.sourcemaps.init())
    .pipe($.babel({
      presets: ['@babel/env']
    }))
    .pipe($.concat('customized.js'))
    .pipe($.if(options.env ==="production",$.uglify()))
    .pipe($.sourcemaps.write('.'))
    .pipe(gulp.dest('./public/js'))
    .pipe(browserSync.stream())
});

gulp.task('bower',()=>{
  return gulp.src(mainBowerFiles())
             .pipe(gulp.dest('./temp/vendors'))
})

gulp.task('vendors',()=>{
  return gulp.src([
      './temp/vendors/**/*.js',
      './node_modules/bootstrap/dist/js/bootstrap.min.js',
      './node_modules/popper.js/dist/umd/popper.min.js',
    ])
    .pipe($.concat('vendors.js'))
    .pipe($.if(options.env === "production", $.uglify()))
    .pipe(gulp.dest('./public/js'))
    .pipe(browserSync.stream())
})

// Static server
gulp.task('browser-sync', function () {
  browserSync.init({
    server: {
      baseDir: "./public"
    }
  });
});

/*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*/
/*watch and browser-sync should run parallel*/
gulp.task('default', gulp.series('clean', gulp.parallel('jade', 'sass', 'babel'), gulp.series('bower', 'vendors'), gulp.parallel('watch', 'browser-sync')));

gulp.task('build', gulp.series('clean', gulp.parallel('jade', 'sass', 'babel'), gulp.series('bower', 'vendors')));

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 autoprefixer = require('autoprefixer');

const mainBowerFiles = require('main-bower-files');

const browserSync = require('browser-sync').create();

const minimist = require('minimist');

/*setting default environment option*/

const envOptions = {

string:'env',

default:{env:'dev'}

}

const options = minimist(process.argv.slice(2),envOptions)

/*don't forget return*/

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

return gulp.src(['./temp','./public'],{allowEmpty:true,read:false})

.pipe($.clean())

})

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

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

.pipe($.plumber())

.pipe($.jade({

pretty:true //with full tags

}))

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

.pipe(browserSync.stream()) //automatically refresh

});

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

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

.pipe($.plumber())

.pipe($.sourcemaps.init())

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

.pipe($.postcss([autoprefixer()]))

.pipe($.if(options.env === "production",$.cleanCss()))

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

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

.pipe(browserSync.stream())

});

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

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

.pipe($.sourcemaps.init())

.pipe($.babel({

presets: ['@babel/env']

}))

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

.pipe($.if(options.env ==="production",$.uglify()))

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

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

.pipe(browserSync.stream())

});

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

return gulp.src(mainBowerFiles())

.pipe(gulp.dest('./temp/vendors'))

})

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

return gulp.src([

'./temp/vendors/**/*.js',

'./node_modules/bootstrap/dist/js/bootstrap.min.js',

'./node_modules/popper.js/dist/umd/popper.min.js',

])

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

.pipe($.if(options.env === "production", $.uglify()))

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

.pipe(browserSync.stream())

})

// Static server

gulp.task('browser-sync', function () {

browserSync.init({

server: {

baseDir: "./public"

}

});

/*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*/

/*watch and browser-sync should run parallel*/

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