# 基礎設定
# 環境安裝
安裝本機的
gulp-cli：npm i gulp1完成安裝後，可以透過
gulp -v查看版本。D:\>gulp -v CLI version: 2.3.0 # 因為專案下尚未安裝 gulp Local version: unknown1
2
3
4執行至專案路徑下，安裝
gulp：npm i gulp -D1完成安裝後，即可看到 Local version 顯示板號。
D:\Test\>gulp -v CLI version: 2.3.0 Local version: 4.0.21
2
3
# 設定 gulpfile.js
因為是使用 ES6 撰寫設定檔，故有以下需做調整和新增：
gulpfile.js的檔名更改為gulpfile.babel.js新增
.babelrc檔案{ "presets": ["@babel/preset-env"] }1安裝套件
套件名稱 描述 autoprefixer 添加適應瀏覽器的前綴字於 css gulp-sourcemaps 提供原始碼的位置資訊 gulp-sass 可以在專案中使用 sass / scss node-sass 轉譯 scss 內容至 css gulp-postcss 為轉譯後的 css 添加多個 plugin gulp-babel 轉譯 ES2015+ 內容至通用的 JavaScript 版本 gulp-concat 將多個檔案壓縮至一個檔案 gulp-uglify 使用 UglifyJS3 壓縮 JavaScript del 使用 Glob 刪除文件和目錄 browser-sync 開啟預設瀏覽器 gulp-gh-pages 部署 build 後的結果至 Github pages
# 功能的來源和目標位置
const paths = {
html: {
src: './src/**/*.html',
dest: 'dist/'
},
styles: {
src: './src/scss/**/*.scss',
dest: 'dist/styles/'
},
scripts: {
src: './src/scripts/**/*.js',
dest: 'dist/scripts/'
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 複製 HTML 檔案
function copyHTML() {
return (
gulp
.src(paths.html.src)
.pipe(gulp.dest(paths.html.dest))
// 如修改檔案，透過 watch 的監聽後，觸發 browserSync reload
.pipe(browserSync.stream())
);
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 轉譯 Sass / Scss 檔案
提醒
如果有使用 autoprefixer 的套件，建議新增 .browserslistrc 檔案於專案根目錄下或在 package.json 中新增 browserslist 屬性。
.browserslistrclast 2 version > 5%1
2package.json"browserslist": { "production": [ "> 1%", "ie 10" ], "modern": [ "last 1 chrome version", "last 1 firefox version" ], "ssr": [ "node 12" ] }1
2
3
4
5
6
7
8
9
10
11
12
13
關於 browserslist 設定可以參考連結 (opens new window)
import sass from 'gulp-sass';
import nodeSass from 'node-sass';
import postcss from 'gulp-postcss';
import autoprefixer from 'autoprefixer';
sass.compiler = nodeSass;
export function styles() {
const plugins = [autoprefixer()];
return (
gulp
.src(paths.styles.src)
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
// 這時已經編譯好 css
.pipe(postcss(plugins))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(paths.styles.dest))
.pipe(browserSync.stream())
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 轉譯 JavaScript 檔案
提醒
gulp-babel 套件可能在更新時沒有加入核心套件，導致在加入 babel 時可能會出現：
cannot find module 'bable-core'
1
但不是所有環境都會遇到這樣的狀況，如果發生此問題，可以手動加入此套件：
npm install babel-core --save
1
import babel from 'gulp-babel';
import concat from 'gulp-concat';
import uglify from 'gulp-uglify';
export function scripts() {
return (
gulp
.src(paths.scripts.src, { sourcemaps: true })
.pipe(sourcemaps.init())
.pipe(
babel({
presets: ['@babel/env']
})
)
.pipe(uglify())
// 將指定路徑下全部的 js 檔案壓縮至 all.js
.pipe(concat('all.js'))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(paths.scripts.dest))
.pipe(browserSync.stream())
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 預設瀏覽器
import browserSync from 'browser-sync';
export function browser() {
browserSync.init({
server: {
// 記得要加入瀏覽器的開啟位置
baseDir: './dist/'
},
port: 8082,
// 如果頻繁更新檔案，須至少等待兩秒才會觸發
// 預設為 0 秒
reloadDebounce: 2000
});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 檔案和目錄的刪除
在每一次的重啟 gulp 後，會將指定目標內的檔案和目錄刪除。
import del from 'del';
export const clean = () => del(['dist']);
1
2
3
2
3
# 檔案的監聽
export function watchFiles() {
gulp.watch(paths.html.src, copyHTML);
gulp.watch(paths.scripts.src, scripts);
gulp.watch(paths.styles.src, styles);
}
1
2
3
4
5
2
3
4
5
# 部署至 Github Pages
專案中要先有 目標目錄 才能將內容 push 至 Github Pages 上。
import ghPages from 'gulp-gh-pages';
export function deploy() {
return gulp.src('./dist/**/*').pipe(ghPages());
}
1
2
3
4
5
2
3
4
5
# 任務的依序執行
const build = gulp.series(
clean,
copyHTML,
styles,
scripts,
// browser 和 watch 須利用 gulp.parallel 同時執行
gulp.parallel(browser, watchFiles)
);
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 預設的 Gulp 任務
export default build;
1
當設定完成後，只要透過 gulp 指令，即可執行序列中的任務。