gulp4を使用してpugとsassをビルド、BrowserSyncでライブプレビューをする
はじめに
こんにちは、ogrestです。
今回の記事内容はタイトルの通りです。
pugとsassを自動コンパイル、BrowserSyncを使用してのライブプレビューをしたかったのですが、gulp4向けの記事が少ない。
そもそもgulp自体使用したことがなかった＆JS知識に自信が無いのでいくつかのQiita記事を参考に、なんならコピペで使ってやろうと思っていたのですが、エラーを吐いてしまったのでもう一度調べ直して書き直しました。
環境
macOS Catalina v10.15.7
- Node.js v12.16.1
- npm v6.14.8
npm init済みの前提で進めます。
参考サイト
基本gulp4の記事です。
以下二つを参考に、sass、pugのビルドに成功。
コードをほとんどそのまま流用させていただきました。
ここの二つでgulpの概要、gulp4の書き方を覚えました。
以下の二つサイトはBrowserSyncの参考に。
こちらの記事はgulp4と書かれていますが、推奨されていない書き方(gulp.taskを使用している)のようです。
ただ複数のモジュールを使用しているため、gulp初心者の身としては大変参考になります。
こちらの記事の一番下にgulp4で推奨されているgulp.taskを使用した記述が紹介されています。
上記サイトを参考に記述してもBrowserSyncが一度しかリロードされなかったため以下を参考にdoneを追加。 qiita.com
npmのインストール
モジュールのローカルインストール(プロジェクト下だけで使用できるインストール方法)を行います。
gulp-sass、gulp-pug、browser-syncのインストール
npm install -D gulp gulp-sass gulp-pug browser-sync
プロジェクト直下にgulpfile.jsを作成
プロジェクトの直下にgulpfile.jsを作成します。
gulpに関するタスクはこのファイル内に記述します。
ディレクトリの構成参考
root/ ┣━src/ ┃ ┣━scss ┃ ┗━pug ┣━dist/ ┃ ┣━css ┃ ┗━html ┣━package.json ┗━gulpfile.js
gulpfile.jsの記述
const {src, dest, watch} = require("gulp");
// Sassをコンパイルするプラグインの読み込み
const sass = require("gulp-sass");
const pug = require("gulp-pug");
const browserSync = require("browser-sync");
var paths = {
'root': '.',
'scss': 'src/scss/',
'css': 'dist/css/',
'pug': 'src/pug/',
'html': 'dist/coding'
}
// Sassのコンパイル
const compileSass = () =>
// style.scssファイルを取得
src(paths.scss + '**/*.scss')
.pipe(
sass({
outputStyle: "expanded"
})
)
.pipe(dest(paths.css));
// Pugのコンパイル
const compilePug = () =>
src(paths.pug + "**/*.pug")
.pipe(
pug({
pretty: true
})
)
.pipe(dest(paths.html));
// Sass,Pugファイルの監視
const watchSrcFiles = () => {
watch(paths.pug + '**/*.pug', compilePug);
watch(paths.scss + '**/*.scss', compileSass);
}
// Browser Sync
const taskServer = () =>
browserSync.init({
server: {
//ルートディレクトリの指定
baseDir: paths.root,
index: "index.html",
}
});
const reload = (done) => {
browserSync.reload();
done();
}
watch(paths.html + "**/*.html", reload);
watch(paths.css + "**/*.css", reload);
exports.default = () =>
watchSrcFiles ();
taskServer();
最後の5行、書き出しの部分はもっと簡潔な書き方がありそうなのですが(series,parallelあたり？)
私には書けなかったのでこのままで。。
gulpタスクを実行
npx gulp
ctrl+Cで終了できます。
少し見づらいですが、sassが書き換えられるたびにページが自動リロードされています。
さいごに
これまではconcurrentlyを使用してpugとsassを自動コンパイルしていました。
が、node-sassがv12にしてからエラーを吐き、まともに使用できなくなったり
単純にビルドまでの時間が長く不満だったこともあり今回glup4を導入しました。
素晴らしい記事のおかげですんなりと導入でき満足です。
browserSyncも導入したので今後はより快適に開発できそうです。
