├── .browserslistrc ├── .gitignore ├── README.md ├── app ├── assets │ ├── images │ │ └── pierre-chatel-innocenti-1667193-unsplash.jpg │ ├── js │ │ └── all.js │ └── style │ │ └── all.scss ├── index.html └── layout.ejs ├── gulpfile.js ├── envOptions.js └── index.js ├── package-lock.json └── package.json /.browserslistrc: -------------------------------------------------------------------------------- 1 | # Browsers that we support 2 | 3 | last 5 version 4 | > 1% 5 | IE 10 # sorry -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | public 2 | node_modules 3 | .publish 4 | dist 5 | .vscode 6 | .DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 網頁切版直播班 Gulp 範例 2 | 3 | > 使用該專案 Gulp 時，就可以不用使用其他編譯工具編譯 SCSS 或是 JavaScript 囉。 4 | 5 | ## 指令列表 6 | 7 | - `gulp` - 執行開發模式(會開啟模擬瀏覽器並監聽相關檔案) 8 | - 若沒有自動開啟瀏覽器則可手動在瀏覽器上輸入 `http://localhost:8080/` 即可。 9 | - 假使監聽功能無效的話，可以檢查一下是否修改到資料夾的名稱等。 10 | - `gulp build` - 執行編譯模式(不會開啟瀏覽器) 11 | - `gulp clean` - 清除 dist 資料夾 12 | - `gulp deploy` - 將 dist 資料夾部署至 GitHub Pages 13 | - 若無法部署到 GitHub Pages 的話，可以確定一下是否已經初始化專案等。 14 | 15 | > 請務必確保已經在本機上輸入過 `npm install -g gulp`，否則電腦會不認識 `gulp` 指令哦。 16 | 17 | ## 說明 18 | 19 | 除了 Boostrap CSS 與 Boostrap JavaScript 需要掛 CDN 之外，本身已經內建打包 jQuery 3.5.1。 20 | 21 | 若有需要調整相關路徑參數可在 `envOptions.js` 中調整，但建議不要隨意調整導致 Gulp 無法正常運行。 22 | 23 | 假使對於 Gulp 不熟悉會建議不要任意調整 `gulpfile.js` 底下的資料任一檔案，避免出現無法正常運作之問題。 24 | 25 | ## 資料夾結構 26 | 27 | - App # 原始碼 28 | - assets # 靜態資源放置處 29 | - images # 圖片放置處 30 | - js # JavaScript 放置處 31 | - style # 樣式放置處 32 | - index.html # 首頁 HTML 33 | - layout.ejs # Layout ejs 34 | - gulpfile.js # Gulp 原始碼 35 | - envOptions.js # Gulp 路徑變數 36 | - index.js # Gulp 核心原始碼 37 | 38 | ### 注意事項 39 | 40 | `assets` 底下的資料夾名稱建議不要任意修改，例如：`stlye` 改成 `styles` 又或者是 `scss` 等非原始資料夾名稱。 41 | 42 | 最主要原因是 Gulp 預設是監聽 `style`、`js`、 `images` 這幾個資料夾路徑底下的檔案，因此若任意修改名稱將可能導致 Gulp 的監聽功能失效或其他不可預期之問題發生。 43 | 44 | 若本身已經對於 Gulp 有一定掌握度則可進入 `gulpfile.js/envOptions.js` 修改相關路徑即可。 45 | 46 | Gulp 的自動更新行為是必須持續開著終端機的，因此若關閉終端機則會失去監聽與自動更新效果，因此在開專案時，請不要關閉運行中的終端機。 47 | 48 | ## 支援的監聽 49 | 50 | 目前支援 HTML、ejs、JavaScript、Images、SCSS 監聽並自動重新刷新。 51 | 52 | 圖片新增時也會自動刷新。 53 | 54 | 因此是不用使用 `Live Sass Compiler` 的 `Watch SCSS` 功能或是 `Prepros` 等工具來編譯 SCSS。 55 | 56 | 除此之外 Gulp 本身有支援模擬伺服器，因此不用再次使用一些模擬伺服器的套件，例如：`Preview on Web Server` 套件等。 57 | 58 | ## 部署 gh-pagse 流程說明 59 | 60 | 部署前請務必先將該 Gulp 原始碼上傳到 GitHub Repositories 也就是初始化 GitHub，因此通常第一步驟會輸入以下指令 61 | 62 | ```cmd 63 | git init # 若已經初始化過就可以不用輸入 64 | git add . 65 | git commit -m 'first commit' 66 | git remote add origin [GitHub Repositories Url] 67 | git push -u origin master // 僅限第一次輸入，往後只需要輸入 git push 68 | ``` 69 | 70 | 當將 Gulp 原始碼初次部署到 GitHub 之後就可以輸入 `gulp build` 進入生產模式，當生產完畢之後接下來只需要輸入 `gulp deploy` 即可完成 GitHub Pages 部署。 71 | 72 | ## 其他可能的狀況 73 | 74 | Q：Mac 環境下輸入 `npm install -g gulp` 時出現「`Permission denied`」等字眼。 75 | 76 | A：由於 Mac 在環境上的安裝是會比較嚴格的，當出現「`Permission denied`」時，可以在指令前面加上 `sudo` (`sudo npm install -g gulp`) 77 | 78 | Q: Window 環境下輸入 `gulp` 卻出現「`因為這個系統上已停用指令碼執行，所以無法載入...`」 79 | 80 | A: 後來的 Window 在終端機的權限使用上會預設是禁止使用一些指令的，因此可以參考 [這一篇](https://hsiangfeng.github.io/other/20200510/1067127387/) 文章解決。 81 | 82 | Q: 輸入 `gulp deploy` 卻出現「`TypeError: Cannot read property 0 of null`」。 83 | 84 | A: 這是一個很神奇的問題，在原套件的 issues 也有提供相關討論，因此可以參考 [這一篇](https://hsiangfeng.github.io/gulp/20191220/1507807439/) 文章解決。 85 | 86 | Q: Gulp SCSS 或是 JS 撰寫完畢並儲存檔案後 Gulp 不會重新編譯。 87 | 88 | A: 這邊的原因有可能是修改了預設 Gulp 監聽的路徑資料夾，預設是監聽 `style`、`js`、 `images` 這幾個資料夾路徑底下的檔案，因此若任意修改名稱將可能導致 Gulp 的監聽功能失效或其他不可預期之問題發生，除此之外該專案 Gulp 是監聽 `.scss` 檔案對於 `.css` 並沒有監聽自動更新的效果。 89 | 90 | Q: 其他可能的問題且無法部署到 GitHub Pages。 91 | 92 | A: 這邊問題有許多種，因此在排除上可能會比較麻煩，需要多一點耐心。 93 | 94 | - 可能沒有針對 GitHub 專案做第一次的初始化部署。 95 | - 電腦可能沒有安裝 Git(可以執行一下 `git --version` 確保有出現版本號)。 96 | - 忘記執行 `npm install` 97 | - 對於終端機的 Git 操作不熟悉(可以考慮使用 GitHub Desktop 來操作會較為方便)。 98 | - 出現「`not a git repository`」(主要是缺少了 `git init` 將目前專案初始化 Git) 99 | 100 | Q: 執行 `gulp` 之後瀏覽器沒有自動開啟。 101 | 102 | A: 關於這一點每一台電腦的瀏覽器權限都不同，因此若沒有自動開啟的話，｀可以手動將 `http://localhost:8080/` 貼入到自己手動開的瀏覽器也可以哦。 103 | 104 | Q: 輸入 `gulp deploy` 之後出現 「`Message: Command filed: git pull`」提示訊息 105 | 106 | A: 這邊請麻煩刪除隱藏的資料夾「`.publish`」再重新 `gulp deploy` 就可以囉。 107 | 108 | 這種狀況通常發生在操作流程上可能不正確導致錯誤，因此打開「`.publish`」的時候會看到未編譯後的 Gulp 原始碼，正確來講該資料夾底下只會有編譯後的原始碼，如果刪除「`.publish`」之後狀況還是沒改善，那麼建議刪除「`dist`」資料夾並重新輸入 `gulp build` → `gulp deploy` 即可。 109 | 110 | Q: 以上問題都無法解決 111 | 112 | A: 建議可以查看一下自己的相關版本，以下是專案開發者的運行環境 113 | 114 | - Node v12.18.2 115 | - 實際測試 Node 12~14 都是可以運行的 116 | - 查看自己版本指令：`node -v` 117 | - Gulp 118 | - CLI version: 2.3.0 119 | - Local version: 4.0.2 120 | - 查看自己版本指令：`gulp -v` 121 | - git version 2.23.0 122 | - 查看自己版本指令：`git ---version` 123 | 124 | ## 學習資源 125 | 126 | 若對於 Gulp 有一定興趣的話，以下這邊提供學習資源 127 | 128 | - [使用 Gulp 進行網頁前端自動化](https://courses.hexschool.com/p/gulp) 129 | - [這是在講 Gulp 不是飲料是任務自動化工具這件事](https://hsiangfeng.github.io/tags/%E9%80%99%E6%98%AF%E5%9C%A8%E8%AC%9B-Gulp-%E4%B8%8D%E6%98%AF%E9%A3%B2%E6%96%99%E6%98%AF%E4%BB%BB%E5%8B%99%E8%87%AA%E5%8B%95%E5%8C%96%E5%B7%A5%E5%85%B7%E9%80%99%E4%BB%B6%E4%BA%8B/page/2/) 130 | - [試著把切版專案升級到 gulp4.0 吧](https://ithelp.ithome.com.tw/users/20104132/ironman/2921) 131 | -------------------------------------------------------------------------------- /app/assets/images/pierre-chatel-innocenti-1667193-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hexschool/web-layout-training-gulp/83afd78d2062694491ba04a5375661a4450b0d91/app/assets/images/pierre-chatel-innocenti-1667193-unsplash.jpg -------------------------------------------------------------------------------- /app/assets/js/all.js: -------------------------------------------------------------------------------- 1 | console.log('Hello!'); 2 | 3 | $(document).ready(() => { 4 | console.log('HesSchool Hello!'); 5 | }); -------------------------------------------------------------------------------- /app/assets/style/all.scss: -------------------------------------------------------------------------------- 1 | $color: #00cc99; 2 | 3 | .header { 4 | height: 200px; 5 | background-color: #00cc99; 6 | } 7 | 8 | .footer { 9 | height: 200px; 10 | background-color: #00cc99; 11 | } 12 | 13 | .box { 14 | width: 100px; 15 | height: 100px; 16 | background-color: red; 17 | display: flex; 18 | transition: all 0.5s; 19 | &:hover { 20 | width: 200px; 21 | background-color: $color; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /app/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: 首頁 3 | layout: ./app/layout.ejs 4 | engine: ejs 5 | current: index 6 | --- 7 | 8 |

9 | 這是一段話 10 |

11 | 12 |
-------------------------------------------------------------------------------- /app/layout.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%- title %> 9 | 10 | 11 | 12 | 13 |
14 | 這是 header 15 |
16 | 17 | <%- contents %> 18 | 19 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /gulpfile.js/envOptions.js: -------------------------------------------------------------------------------- 1 | const srcPath = './app'; 2 | const distPath = './dist'; 3 | const nodePath = './node_modules'; 4 | 5 | let envOptions = { 6 | string: 'env', 7 | default: { 8 | env: 'dev', 9 | }, 10 | copyFile: { 11 | src: [ 12 | `${srcPath}/**/*`, 13 | `!${srcPath}/assets/js/**/*.js`, 14 | `!${srcPath}/assets/style/**/*.scss`, 15 | `!${srcPath}/assets/style/**/*.sass`, 16 | `!${srcPath}/**/*.ejs`, 17 | `!${srcPath}/**/*.html`, 18 | ], 19 | path: distPath, 20 | }, 21 | html: { 22 | src: [ 23 | `${srcPath}/**/*.html`, 24 | ], 25 | ejsSrc: [ 26 | `${srcPath}/**/*.ejs`, 27 | ], 28 | path: distPath, 29 | }, 30 | style: { 31 | src: [ 32 | `${srcPath}/assets/style/**/*.scss`, 33 | `${srcPath}/assets/style/**/*.sass`, 34 | ], 35 | path: `${distPath}/assets/style`, 36 | }, 37 | javascript: { 38 | src: [ 39 | `${srcPath}/assets/js/**/*.js` 40 | ], 41 | concat: 'all.js', 42 | path: `${distPath}/assets/js`, 43 | }, 44 | vendors: { 45 | src: [ 46 | `${nodePath}/jquery/dist/**/jquery.min.js`, 47 | ], 48 | concat: 'vendors.js', 49 | path: `${distPath}/assets/js`, 50 | }, 51 | img: { 52 | src: [ 53 | `${srcPath}/assets/images/**/*`, 54 | ], 55 | }, 56 | clean: { 57 | src: distPath, 58 | }, 59 | browserDir: distPath, 60 | deploySrc: `${distPath}/**/*`, 61 | }; 62 | 63 | exports.envOptions = envOptions; 64 | -------------------------------------------------------------------------------- /gulpfile.js/index.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const $ = require('gulp-load-plugins')({ lazy: false }); 3 | const autoprefixer = require('autoprefixer'); 4 | const minimist = require('minimist'); 5 | const browserSync = require('browser-sync').create(); 6 | const { envOptions } = require('./envOptions'); 7 | 8 | let options = minimist(process.argv.slice(2), envOptions); 9 | //現在開發狀態 10 | console.log(`Current mode：${options.env}`); 11 | 12 | function copyFile() { 13 | return gulp.src(envOptions.copyFile.src) 14 | .pipe(gulp.dest(envOptions.copyFile.path)) 15 | .pipe( 16 | browserSync.reload({ 17 | stream: true, 18 | }), 19 | ); 20 | } 21 | 22 | function layoutHTML() { 23 | return gulp.src(envOptions.html.src) 24 | .pipe($.plumber()) 25 | .pipe($.frontMatter()) 26 | .pipe( 27 | $.layout((file) => { 28 | return file.frontMatter; 29 | }) 30 | ) 31 | .pipe(gulp.dest(envOptions.html.path)) 32 | .pipe( 33 | browserSync.reload({ 34 | stream: true, 35 | }), 36 | ); 37 | } 38 | 39 | function sass() { 40 | const plugins = [ 41 | autoprefixer(), 42 | ]; 43 | return gulp.src(envOptions.style.src) 44 | .pipe($.sourcemaps.init()) 45 | .pipe($.sass().on('error', $.sass.logError)) 46 | .pipe($.postcss(plugins)) 47 | .pipe($.sourcemaps.write('.')) 48 | .pipe(gulp.dest(envOptions.style.path)) 49 | .pipe( 50 | browserSync.reload({ 51 | stream: true, 52 | }), 53 | ); 54 | } 55 | 56 | function babel() { 57 | return gulp.src(envOptions.javascript.src) 58 | .pipe($.sourcemaps.init()) 59 | .pipe($.babel({ 60 | presets: ['@babel/env'], 61 | })) 62 | .pipe($.concat(envOptions.javascript.concat)) 63 | .pipe($.sourcemaps.write('.')) 64 | .pipe(gulp.dest(envOptions.javascript.path)) 65 | .pipe( 66 | browserSync.reload({ 67 | stream: true, 68 | }), 69 | ); 70 | } 71 | 72 | function vendorsJs() { 73 | return gulp.src(envOptions.vendors.src) 74 | .pipe($.concat(envOptions.vendors.concat)) 75 | .pipe(gulp.dest(envOptions.vendors.path)); 76 | } 77 | 78 | 79 | function browser() { 80 | browserSync.init({ 81 | server: { 82 | baseDir: envOptions.browserDir, 83 | }, 84 | port: 8080, 85 | }); 86 | } 87 | 88 | function clean() { 89 | return gulp.src(envOptions.clean.src, { 90 | read: false, 91 | allowEmpty: true, 92 | }) 93 | .pipe($.clean()); 94 | } 95 | 96 | function deploy() { 97 | return gulp.src(envOptions.deploySrc) 98 | .pipe($.ghPages()); 99 | } 100 | 101 | function watch() { 102 | gulp.watch(envOptions.html.src, gulp.series(layoutHTML)); 103 | gulp.watch(envOptions.html.ejsSrc, gulp.series(layoutHTML)); 104 | gulp.watch(envOptions.javascript.src, gulp.series(babel)); 105 | gulp.watch(envOptions.img.src, gulp.series(copyFile)); 106 | gulp.watch(envOptions.style.src, gulp.series(sass)); 107 | } 108 | 109 | exports.deploy = deploy; 110 | 111 | exports.clean = clean; 112 | 113 | exports.build = gulp.series(clean, copyFile, layoutHTML, sass, babel, vendorsJs); 114 | 115 | exports.default = gulp.series(clean, copyFile, layoutHTML, sass, babel, vendorsJs, gulp.parallel(browser, watch)); 116 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "project", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build": "gulp build --env prod", 9 | "start": "node serve.js" 10 | }, 11 | "engines": { 12 | "node": "11.7.0" 13 | }, 14 | "keywords": [], 15 | "author": "", 16 | "license": "ISC", 17 | "dependencies": { 18 | "@babel/core": "^7.9.6", 19 | "@babel/preset-env": "^7.9.6", 20 | "autoprefixer": "^9.6.0", 21 | "browser-sync": "^2.26.7", 22 | "ejs": "^3.1.2", 23 | "express": "^4.17.1", 24 | "gulp": "^4.0.2", 25 | "gulp-babel": "^8.0.0", 26 | "gulp-clean": "^0.4.0", 27 | "gulp-concat": "^2.6.1", 28 | "gulp-front-matter": "^1.3.0", 29 | "gulp-gh-pages": "^0.5.4", 30 | "gulp-if": "^2.0.2", 31 | "gulp-layout": "0.0.4", 32 | "gulp-load-plugins": "^1.6.0", 33 | "gulp-plumber": "^1.2.1", 34 | "gulp-postcss": "^8.0.0", 35 | "gulp-sass": "^4.0.2", 36 | "gulp-sourcemaps": "^2.6.5", 37 | "jquery": "^3.5.1", 38 | "minimist": "^1.2.0", 39 | "morgan": "^1.9.1", 40 | "node-sass": "^4.12.0" 41 | } 42 | } 43 | --------------------------------------------------------------------------------