[筆記] 使用 Gulp 進行網頁前端自動化 – 架設簡易伺服器和壓縮程式碼 @地瓜大的飛翔旅程

章節連結

架設 WebService
編譯完成後，進行壓縮
程式碼
參考課程
相關文章

這篇要筆記下的是讓前端開發時可以擺脫伺服器，達成編譯完後可以自動打開瀏覽器瀏覽，同時壓縮你的程式碼。

架設 WebService

1. 先安裝 BrowserSync ，並新增一個靜態的伺服器網址，指向你編譯出來的檔案資料夾 (如：/public)
2. 監控 .jade, .scss, .js 等等檔案，當有新編譯的結果時，會自動刷新網頁。
3. browser-sync 和 watch 要同步執行

編譯完成後，進行壓縮

1. 運用 gulp-clean-css 壓縮 Css、gulp-uglify 壓縮 javascript，將程式運行時不需要的縮排和空行給除去
2. 壓縮後的檔案，再存放到對應的資料夾。換言之，這串相關的指令碼多半會放在 gulp.dest(……) 的前面

程式碼

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();

/*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/'))
    .pipe(browserSync.stream()) //automatically refresh
});

gulp.task('sass', ()=>{
  return gulp.src('./source/scss/**/*.scss')
    .pipe($.plumber())
    .pipe($.sass().on('error', $.sass.logError))
    .pipe($.postcss([autoprefixer()]))
    .pipe($.cleanCss())
    .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($.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($.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('jade', 'sass', 'babel', gulp.series('bower', 'vendors'), gulp.parallel('watch', 'browser-sync')));

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();

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

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

});

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

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

.pipe($.plumber())

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

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

.pipe($.cleanCss())

.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($.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($.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('jade', 'sass', 'babel', gulp.series('bower', 'vendors'), gulp.parallel('watch', 'browser-sync')));

參考課程

Course 25 ～ Course 27 (全部一共有 48 Courses)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

按讚加入粉絲團

架設 WebService

編譯完成後，進行壓縮

程式碼

參考課程

相關文章

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

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

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

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

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

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

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

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

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

延伸閱讀