我的gulpfile.js要怎麼撰寫

讓專案使用 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
在終端機載入
這個練習需要

延伸:
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

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
)