章節連結
這篇要筆記下的是讓前端開發時可以擺脫伺服器,達成編譯完後可以自動打開瀏覽器瀏覽,同時壓縮你的程式碼。
架設 WebService
1. 先安裝 BrowserSync ,並新增一個靜態的伺服器網址,指向你編譯出來的檔案資料夾 (如:/public)
2. 監控 .jade, .scss, .js 等等檔案,當有新編譯的結果時,會自動刷新網頁。
3. browser-sync 和 watch 要同步執行
編譯完成後,進行壓縮
1. 運用 gulp-clean-css 壓縮 Css、gulp-uglify 壓縮 javascript,將程式運行時不需要的縮排和空行給除去
2. 壓縮後的檔案,再存放到對應的資料夾。換言之,這串相關的指令碼多半會放在 gulp.dest(……) 的前面
程式碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
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 可以成功在前端開發時啟用 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 進行網頁前端自動化 – Gulp 和 Bower 串接
Gulp 搭配上 Bower 和 Bootstrap 4 前端套件,可以快速的做到前端樣板管理。不過 Gulp 4 和前一版的作法有些不同,這邊筆記一下串接的方法。串接上 Bower1. Bower 是一套前端套件的管理工具,雖然說是很
★全文分享★ [筆記] 使用 Gulp 進行網頁前端自動化 – PostCSS 自動加上前綴 & Load Plugins
這篇筆記下用 gulp-postcss、autoprefixer……等等套件,節省你的時間和加強瀏覽器相容性。加強 CSS 相容性由於瀏覽器的相容性彼此之間不相同,有可能在 CSS 的解讀上,需要加上一些前綴詞,那麼 autop
★全文分享★ [筆記] 使用 Gulp 進行網頁前端自動化 – 初始化你的第一個 Gulp 編譯專案
這篇筆記下用 Gulp 來編譯你的檔案,需要安裝 gulp-jade, gulp-sass, gulp-plumber 後,再 gulpfile.js 進行修改。編譯你的第一個專案Gulp 截至2020年,運行版本為 4.0。由於影片的版本是 3.X 版本,所以有些指令
★全文分享★ [筆記] 使用 Gulp 進行網頁前端自動化 – 簡介
Gulp 是一個前端自動化工具。由於瀏覽器只認識原生的 HTML, CSS 和 JavaScript (ES6的支援度各瀏覽器不同),而 Gulp 可以幫你節省編譯的流程,讓你可以更專注在開發上,同時也可以根據環境來制定是否