[gulp/HTML/CSS]pug & sass安裝教學、Node.js Express初入門、Mac好用工具

2019.07.26 此文章發表時，使用 gulp 版數為 3.9.1，所以在專案資料夾安裝 gulp 時請使用：gulp@3.9.1；
或在 package.json 降為 "gulp": "^3.9.1"，但有網友說在 Node v10 以上不要這麼做，雖我還沒去查證，不知為何
參考：https://stackoverflow.com/questions/51098749/everytime-i-run-gulp-anything-i-get-a-assertion-error-task-function-must-be


HTML網頁快速產生器：淺談jade(pug) -聯成電腦
淺談 CSS 方法論與 Atomic CSS -TechBridge 技術共筆部落格
從新手到中手：前端工程加強班 -github.com/aszx87410
Node.js Express 初入門 – 上集 -寫點科普，請給指教。
那些令人驚歎的 HTML、CSS、JavaScript 工具和庫 -頭條森林
我用的 Mac 軟體 -Hiraku Dev
Mac 下有哪些能極大地提高工作效率的軟體？ -getit01.com/（含大幅阿福介紹）
CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅 -github.com/jawil
Visual Studio Code寫SCSS，並自動編譯為CSS -edwardkuo.imas.tw/
npm 與 package.json 快速入門 -hk.saowen.com

下載node.js，安裝後以

$node -v

$npm -v

檢查環境。

Sass 與 Bootstrap -六角學院
[ Alex 宅幹嘛 ] 👨‍💻從 CSS 到 SASS (SCSS) 超入門觀念引導
Gulp 基本運用與 Bower 之間整合 -六角學院
鐵人賽 10 - Gulp 與 Sass 開發環境 -wcc723.github.io，講解gulp
前端自動化神器 Gulp (更新)  -鍵盤自耕農，這篇解釋很多套件是幹嘛用的

內文介紹將先安裝 sass，再裝 pug，最後整理設定偵測檔 gulpfile.js。

接著輸入：

$sudo npm install gulp -g

（-g: global）
$gulp -v
確認。

再到專案目錄，初始化專案
$npm init
但輸入gulp後說找不到gulpfile，所以放棄改用node.js express
(這裡應該是要自己新增 gulpfile.js，下方有提到)
【前端筆記】如何用Visual Studio Code架設前端開發環境（pug [ jade ]、sass、gulp、browser-sync） -翻滾吧！米粒與米麩

Cannot find module 'gulp-sass'

結果還是沒成功，可能是版本問題，
改用 yarn
三分鐘學會用 yarn gulp 編譯 scss -要改的東西太多了，那就改天吧
yarn 官網安裝文件
npm 常用命令（vs yarn） -慕課網 imooc.com
[Node.js打造API] 用Yarn取代npm加速開發 -1010Code
[译] Yarn 和 Npm 命令行小抄 -segmentfault.com
命令列表 -Yarn学习笔记
gulp-plumber -gulp 學習筆記 kejyuntw.gitbooks.io/gulp-learning-notes

yarn add gulp gulp-sass gulp-sourcemaps gulp-autoprefixer gulp-plumber gulp-notify --save

新增一個 gulpfile.js，這樣設：

var gulp = require('gulp'),

sass = require('gulp-sass');

autoprefixer = require('gulp-autoprefixer');

sourcemaps = require('gulp-sourcemaps');

gulpPlumber = require('gulp-plumber');

notify = require("gulp-notify");

gulp.task('watch', function () {

gulp.watch('stylesheet/sass/*.sass', ['styles']);

});

gulp.task('styles', function () {

gulp.src('stylesheet/sass/*.sass')

.pipe(gulpPlumber())

    .pipe(sourcemaps.init())

    .pipe(autoprefixer({browsers: ['last 2 version', 'safari 7', 'ie 8', 'ie 9', 'ios 6', 'android 4']}))

.pipe(sass({outputStyle: 'compressed'}))

.on('error', function(err) {

notify().write(err);

this.emit('end');

})

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

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

.pipe(notify("success"));

});

gulp.task('default', ['styles', 'watch']);

成功！

再來裝pug
為前端開發省時省力 -getit01.com
PUG 系列 | 第一課 初識Pug、插值和迭代 -getit01.com
Pug遇见Gulp -Pugjs中文文档
利用gulp和browser-sync实现Pug(jade)的实时预览 -Kimi DevBlog

$ yarn global add pug
$ yarn global add pug-cli

$ yarn add -D gulp-pug
(-D = npm 的 --save-dev)
以
$pug -V
檢查

$ yarn add -D browser-sync
browser-sync -gulp 學習筆記 kejyuntw.gitbooks.io/gulp-learning-notes

var gulp = require(gulp);
var pug = require(gulp-pug);

gulp.task(pug, function(){
 gulp.src(./src/*.pug)
  .pipe(pug({
   pretty:true
  }))
  .pipe(gulp.dest(./dest/);
});

gulp.task(watch, function(){
 gulp.watch(./src/*.pug,[pug]);
});

gulp.task(default, [pug, watch]);

全部改成

// 呼叫 要用的功能

var gulp = require('gulp'),

sass = require('gulp-sass');

autoprefixer = require('gulp-autoprefixer');

sourcemaps = require('gulp-sourcemaps');

gulpPlumber = require('gulp-plumber');

notify = require("gulp-notify");

pug = require('gulp-pug');

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

// 任務 watch 負責監看指定目錄的指定檔案類型

gulp.task('watch', function () {

gulp.watch('stylesheet/sass/*.sass', ['styles']);

});

// 任務 styles 負責設定 scss 編譯的處理規則(本例為minify css)、瀏覽器前綴要對應到多舊的瀏覽器、產生 sourcemap

gulp.task('styles', function () {

gulp.src('stylesheet/sass/*.sass') // 指定要處理的 Scss 檔案目錄

.pipe(gulpPlumber()) // 使用 gulp-plumber 處理例外

    .pipe(sourcemaps.init())

    .pipe(autoprefixer({browsers: ['last 2 version', 'safari 7', 'ie 8', 'ie 9', 'ios 6', 'android 4']}))

.pipe(sass({outputStyle: 'compressed'})) // 編譯 Scss

.on('error', function(err) {

notify().write(err);

this.emit('end');

})

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

.pipe(gulp.dest('stylesheet/css/')) // 指定編譯後的 css 檔案目錄

.pipe(notify("success"));

});

// 任務 task_pug 編譯 pug

gulp.task('task_pug', function() {

    console.log(pug);

    return gulp.src('./*.pug')

        .pipe(pug({pretty:true})) //格式化

        .pipe(gulp.dest('./')) //輸出到文件夾

});

// 即時預覽

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

    browserSync.init({

        server: "./"     // 指定服務器指定根目錄

    })

    gulp.watch('./*.pug', ['task_pug']);     // 監聽pug文件變化 執行 task_pug 方法使用 gulp-pug 編譯 pug

    gulp.watch(['./*.html',]).on("change",browserSync.reload); // 監聽pug文件變化 刷新瀏覽器

});

// 設定 gulp 啟動時執行的任務

gulp.task('default', ['styles', 'watch', 'task_pug', 'browser-sync']);

成功～～

但以上設定出錯，無法 save scss即刷新，
所以讓 pug & scss 都能 save後自動同步：

// 呼叫 要用的功能

var gulp = require('gulp'),

scss = require('gulp-sass');

autoprefixer = require('gulp-autoprefixer');

sourcemaps = require('gulp-sourcemaps');

gulpPlumber = require('gulp-plumber');

notify = require("gulp-notify");

pug = require('gulp-pug');

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

// 任務 watch 負責監看指定目錄的指定檔案類型

// gulp.task('watch', function () {

// gulp.watch('stylesheet/scss/*.scss', ['styles']);

// });

// 任務 styles 負責設定 scss 編譯的處理規則(本例為minify css)、瀏覽器前綴要對應到多舊的瀏覽器、產生 sourcemap

gulp.task('styles', function () {

gulp.src('stylesheet/scss/*.scss') // 指定要處理的 Scss 檔案目錄

.pipe(gulpPlumber()) // 使用 gulp-plumber 處理例外

    .pipe(sourcemaps.init())

    .pipe(autoprefixer({browsers: ['last 2 version', 'safari 7', 'ie 8', 'ie 9', 'ios 6', 'android 4']}))

.pipe(scss({outputStyle: 'compressed'})) // 編譯 Scss

.on('error', function(err) {

notify().write(err);

this.emit('end');

})

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

.pipe(gulp.dest('stylesheet/css/')) // 指定編譯後的 css 檔案目錄

.pipe(notify("success"));

});

// 任務 task_pug 編譯 pug

gulp.task('task_pug', function() {

    console.log(pug);

    return gulp.src('./*.pug')

        .pipe(pug({pretty:true})) //格式化

        .pipe(gulp.dest('./')) //輸出到文件夾

});

// 即時預覽

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

    browserSync.init({

        server: "./"     // 指定服務器指定根目錄

})

gulp.watch('stylesheet/scss/*.scss', ['styles']); // 任務 watch 負責監看指定目錄的指定檔案類型

    gulp.watch('./*.pug', ['task_pug']);     // 監聽pug文件變化 執行 task_pug 方法使用 gulp-pug 編譯 pug

    gulp.watch(['./*.html','stylesheet/css/*.css']).on("change",browserSync.reload); // 監聽pug文件變化 刷新瀏覽器

});

// 設定 gulp 啟動時執行的任務

gulp.task('default', ['styles', 'task_pug','browser-sync']);