我的gulpfile.js要怎麼撰寫


Posted by hoyi-23 on 2021-08-15

讓專案使用 Gulp 自動化編譯


以SASS/Browsersync為範例

背景環境

  1. 已經載入node/npm/gulp。
  2. 原有的專案程式碼(app資料夾-asset(>img+style+js)+pages)
  3. 使用npm init建立package.json檔案
  4. 將gulp載入後會有(node_modules資料夾/package-lock.json)

第一步: 把需要的package載進來

https://gulpjs.com/plugins/ 點入網址就可以看到很多的plugin
在終端機載入
這個練習需要

pluging purpose
gulp-sass 編譯sass
gulp-postcss cssnano postcss 處理CSS prefix
cssnano 優化程式碼
gulp-terser 壓縮 JS
browser-sync 瀏覽器同步檢視

延伸:
gulp-postcss : 以往都是使用 Sass 的 Compass 來加入 prefix,這種增加方式就是無差別的加入,但其實現在的 CSS 有 9 成以上的 prefix 都沒有加入的必要,所以就可以使用 postcss。PostCSS 類似 Sass,但是他是直接編譯 .css 檔案,另外他的套件都是用插件的方式載入(所以像這次的練習,也另外載入了cssnano),並不是像 Sass 已經有固定的寫法。

npm install gulp-scss gulp-postcss cssnano gulp-terser browser-sync --save-dev

第二步: 開始撰寫 gulpfile.js

當然首先要新增gulpfile.js
接下來就是將我們所有的套件載入

//gulpfile.js
//解構賦值(Gulp的不同function)
const { src, dest, watch, series } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const postcss = require('gulp-postcss');
const cssnano = require('cssnano');
const terser = require('gulp-terser');
//browsersync需要create(),有點像是初始
const browsersync = require('browser-sync').create();

接下來就是建立 Gulp Task。
先來看一下範例結構:
|app/asset/| js/ all.js
| | | style/ all.scss
| |
| |pages/index.html
|gulpfile.js


指令 解釋
gulp.task() 定義任務,可自訂名稱
gulp.src() 檔案來源
gulp.dest() 處理後的檔案輸出位置
gulp.pipe() 串流來源檔案到另個外掛(串流處理任務的套件)
gulp.watch () 監控任務,當檔案有更動時,便會執行相對應的任務

html 複製到dist

//html 複製到dist
function htmlTask(){
    return src('app/pages/*.html')
    .pipe(dest('dist/pages',{sourcemaps: '.'}))
}

Sass Task

//Sass Task
function scssTask(){
    return src('app/asset/style/all.scss',{sourcemaps: true})
    .pipe(sass()) //scss function 處理任務
    .pipe(postcss([cssnano()])) // postcss function 處理任務
    .pipe(dest('dist/style',{sourcemaps: '.'})) // 存在新的dist資料夾
}

JavaScript Task

//JavaScript Task
function jsTask(){
    return src('app/asset/js/all.js')
    .pipe(terser()) //壓縮JS檔
    .pipe(dest('dist/js',{sourcemaps: '.'}))
}

Browsersync Task

//Browsersync Tasks(會有兩個)
//first: initialize local server and start running it
function browersyncServe(callback){
    browsersync.init({
        server: { 
            baseDir: 'dist/pages' //指向要開啟的資料夾
        }
    });
    callback();
   };
   //second: reload the server whenever the code is changed
   function browsersyncReload(callback){
    browsersync.reload();
    callback();
    };

// callback function: 在 Gulp 中,所有任務都是非同步的 JS function,
//所以如果 function 不需要 return 東西,我們需要使用 callback function 來明確的表示它已經執行完畢。
//其實就是 done 回調函數的用法。

watch Task

要監看的檔案
當我們做更動時,希望不要一直重新執行,而時只要reload也頁面就好

//watch Task
function watchTask(){
    watch(['app/pages/**/*.html',
            'app/asset/style/**/*.scss',
            'app/asset/js/**/*.js'],
            series(htmlTask,scssTask,jsTask,browsersyncReload));

}

Default Gulp Task

把上面我們需要的function加入,Gulp Task

exports.default = series(
    htmlTask,
    scssTask,
    jsTask,
    browersyncServe,
    watchTask
)

#gulpfile







Related Posts

[FE201] webpack 讓你把各種資源包在一起(基本介紹篇)

[FE201] webpack 讓你把各種資源包在一起(基本介紹篇)

筆記、[JS101] 語法

筆記、[JS101] 語法

簡明程式解題入門 - 陣列篇 II

簡明程式解題入門 - 陣列篇 II


Comments