pugとscssをコンパイルしてオートリロードするgulp
ついでに画像圧縮も入れています
scss/pug
まとめてインストール
npm install --save-dev gulp gulp-sass gulp-sourcemaps gulp-notify gulp-plumber gulp-postcss postcss-cssnext gulp-clean-css gulp-rename gulp-pug
画像圧縮
まとめてインストール
npm install --save-dev gulp-imagemin imagemin-mozjpeg imagemin-pngquant imagemin-svgo
ファイル監視、オートリロード
npm install --save-dev browser-sync
全ソース
/*
src 参照元を指定
dest 出力先を指定
watch ファイル監視
series(直列処理)とparallel(並列処理)
*/
const { src, dest, watch, series, parallel } = require('gulp');
//scss
const sass = require('gulp-sass');
const pug = require('gulp-pug');
const plumber = require("gulp-plumber"); // エラーが発生しても強制終了させない
const notify = require("gulp-notify"); // エラー発生時のアラート出力
const postcss = require("gulp-postcss"); // PostCSS利用
const cssnext = require("postcss-cssnext") // CSSNext利用
const cleanCSS = require("gulp-clean-css"); // 圧縮
const rename = require("gulp-rename"); // ファイル名変更
const sourcemaps = require("gulp-sourcemaps"); // ソースマップ作成
//画像圧縮
const imagemin = require("gulp-imagemin");
const imageminMozjpeg = require("imagemin-mozjpeg");
const imageminPngquant = require("imagemin-pngquant");
const imageminSvgo = require("imagemin-svgo");
//ブラウザリロード
const browserSync = require("browser-sync");
//postcss-cssnext ブラウザ対応条件 prefix 自動付与
const browsers = [
'last 2 versions',
'> 5%',
'ie = 11',
'not ie <= 10',
'ios >= 8',
'and_chr >= 5',
'Android >= 5',
]
//参照元パス
const srcPath = {
css: 'src/scss/style.scss',
img: 'src/img/**/*',
pug: 'src/pug/**/*.pug',
html: './**/*.html'
}
//出力先パス
const destPath = {
root: '.',
css: 'dist/css/',
img: 'dist/img/',
html: 'dist/html/'
}
//sass
const cssSass = () => {
return src(srcPath.css) //コンパイル元
.pipe(sourcemaps.init())//gulp-sourcemapsを初期化
.pipe(
plumber( //エラーが出ても処理を止めない
{
errorHandler: notify.onError('Error:<%= error.message %>')
//エラー出力設定
}
)
)
.pipe(sass({ outputStyle: 'expanded' }))
.pipe(postcss([cssnext(browsers)]))//cssnext
.pipe(sourcemaps.write('/maps')) //ソースマップの出力
.pipe(dest(destPath.css)) //コンパイル先
.pipe(cleanCSS()) // CSS圧縮
.pipe(
rename({
extname: '.min.css' //.min.cssの拡張子にする
})
)
}
//pug
const pugHtml = () => {
return src(srcPath.pug)
.pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }))
.pipe(pug({
pretty: true,
basedir: "src/pug"
}))
.pipe(dest(destPath.html))
}
//画像圧縮（デフォルトの設定）
const imgImagemin = () => {
return src(srcPath.img)
.pipe(
imagemin(
[
imageminMozjpeg({
quality: 80
}),
imageminPngquant(),
imageminSvgo({
plugins: [
{
removeViewbox: false
}
]
})
],
{
verbose: true
}
)
)
.pipe(dest(destPath.img))
}
//ローカルサーバー立ち上げ、ファイル監視と自動リロード
const browserSyncFunc = () => {
browserSync.init(browserSyncOption);
}
const browserSyncOption = {
server: {
//ルートディレクトリの指定
baseDir: destPath.html,
serveStaticOptions: {
extensions: ["html"]
}
},
open: true,
reloadOnRestart: true,
}
//リロード
const browserSyncReload = (done) => {
browserSync.reload();
done();
}
//ファイル監視
const watchFiles = () => {
watch(srcPath.html, series(browserSyncReload))
watch(srcPath.css, series(cssSass, browserSyncReload))
watch(srcPath.img, series(imgImagemin, browserSyncReload))
}
//処理をまとめて実行
exports.default = series(series(cssSass, pugHtml, imgImagemin), parallel(watchFiles, browserSyncFunc));