gulpとbrowser-syncを使って、pugファイルを修正したら、自動的にブラウザリロードするようにしてみた。

admin

5年前

参考URL
https://agrius.net/entry/coding-with-pug/

ブラウザをF5リロードしないと反映されないので、それも自動化して欲しい(gulpとbrowser-syncを使う)

pug(パグ、HTML拡張言語でビルドしてHTML出力)を使って、HTMLを書いてみた

1, 適当なプロジェクトフォルダを新規作成

mkdir auto_reload && cd auto_reload
# -yオプションで全部YESのpackage.jsonを作成。
yarn init -y

mkdir auto_reload && cd auto_reload

# -yオプションで全部YESのpackage.jsonを作成。

yarn init -y

2, pugとgulpとbrowser-syncなど、必要なnodeパッケージをインストール

yarn add -D pug gulp browser-sync gulp-pug gulp-plumber gulp-filter gulp-html-beautify

#  -D(--dev)オプションは、コードの実行時には不要なパッケージである事を示す(ビルド・チェックなどの系統)
# pug(ビルドするとHTMLするテキスト)
# gulp(batファイルのように処理を自動化するタスクライナー)
# browser-sync(htmlなどソース修正すると、自動でブラウザリロードしてくれる)
# gulp-pug(gulpからpugを使うためのパッケージ)
# gulp-plumber = タスク実行中に文法ミスがあるとGulpが強制停止してしまうのを防ぐ
# gulp-filter = _xxx.pugなど、頭に_がついているファイルは無視する
# gulp-html-beautify = htmlの見た目をキレイにしてくれる

yarn add -D pug gulp browser-sync gulp-pug gulp-plumber gulp-filter gulp-html-beautify

# -D(--dev)オプションは、コードの実行時には不要なパッケージである事を示す(ビルド・チェックなどの系統)

# pug(ビルドするとHTMLするテキスト)

# gulp(batファイルのように処理を自動化するタスクライナー)

# browser-sync(htmlなどソース修正すると、自動でブラウザリロードしてくれる)

# gulp-pug(gulpからpugを使うためのパッケージ)

# gulp-plumber = タスク実行中に文法ミスがあるとGulpが強制停止してしまうのを防ぐ

# gulp-filter = _xxx.pugなど、頭に_がついているファイルは無視する

# gulp-html-beautify = htmlの見た目をキレイにしてくれる

2, index.pugやフォルダを生成する

# フォルダ階層を作って、 index.htmlになるpugファイルを作成
mkdir -p src/pug && vi src/pug/index.pug

1 2	# フォルダ階層を作って、 index.htmlになるpugファイルを作成 mkdir -p src/pug && vi src/pug/index.pug

hello,worldなpugファイル

doctype html
html(lang="ja")
  head
    title hello
  body
    p hello,world

doctype html

html(lang="ja")

head

title hello

body

p hello,world

3, 自動リロードのためのgulpfile.jsをルートディレクトリに配置
これが最重要！

//　nodeパッケージを定数に格納
const gulp = require('gulp');
const server = require('browser-sync');
const plumber = require('gulp-plumber');
const filter = require('gulp-filter');
const pug = require('gulp-pug');
const beautify = require('gulp-html-beautify');

// 元フォルダ・出力先フォルダ・pugフォルダを定数で定義
const src = 'src';
const dist = 'dist';
const path = {
  pug: {
    entry: [src+'/pug/**/*.pug']
  }
}

// 関数を定義 pugのコンパイル
function pugCompile() {
  // メソッドチェーンで色々な処理を行う。  
  return gulp
    .src(path.pug.entry)　//pugファイル指定
    .pipe(plumber())　//  タスク実行中に文法ミスがあるとGulpが強制停止してしまうのを防ぐ
    .pipe(pug({pretty: true})) // HTMLコード整形
    // _xxx.pugなど、頭に_がついているファイルは無視する
    .pipe(filter(function(file){return !/\/_/.test(file.path) && !/^_/.test(file.relative);}))
    // 字下げ文字と文字数を指定
    .pipe(beautify({'indent_size': 2, 'indent_char': ' '}))
    // 出力先を指定
    .pipe(gulp.dest(dist));
}

// browser-syncでブラウザリロード処理。
function browserReload(done){
  server.reload();
  done();
}

// browser-sync起動。index.htmlの場所を指定。
function serverInit(done) {
  server.init({
    server: {baseDir: 'dist'}
  });
  done();
}

// pugファイルの変化を監視。変更があったらリビルドしてブラウザリロードする。
function watchFile(done) {
  gulp.watch(path.pug.entry).on('change', gulp.series(pugCompile, browserReload));
}

// ▽ Gulpにタスクを登録
// 実行内容。

// browser-sync起動
gulp.task('sync', serverInit); 
// pugファイルの変化を監視。変更があったらリビルドしてブラウザリロードする。
gulp.task('watch', watchFile);

//　nodeパッケージを定数に格納

const gulp = require('gulp');

const server = require('browser-sync');

const plumber = require('gulp-plumber');

const filter = require('gulp-filter');

const pug = require('gulp-pug');

const beautify = require('gulp-html-beautify');

// 元フォルダ・出力先フォルダ・pugフォルダを定数で定義

const src = 'src';

const dist = 'dist';

const path = {

pug: {

entry: [src+'/pug/**/*.pug']

}

// 関数を定義 pugのコンパイル

function pugCompile() {

// メソッドチェーンで色々な処理を行う。

return gulp

.src(path.pug.entry)　//pugファイル指定

.pipe(plumber())　// タスク実行中に文法ミスがあるとGulpが強制停止してしまうのを防ぐ

.pipe(pug({pretty: true})) // HTMLコード整形

// _xxx.pugなど、頭に_がついているファイルは無視する

.pipe(filter(function(file){return !/\/_/.test(file.path) && !/^_/.test(file.relative);}))

// 字下げ文字と文字数を指定

.pipe(beautify({'indent_size': 2, 'indent_char': ' '}))

// 出力先を指定

.pipe(gulp.dest(dist));

}

// browser-syncでブラウザリロード処理。

function browserReload(done){

server.reload();

done();

}

// browser-sync起動。index.htmlの場所を指定。

function serverInit(done) {

server.init({

server: {baseDir: 'dist'}

});

done();

}

// pugファイルの変化を監視。変更があったらリビルドしてブラウザリロードする。

function watchFile(done) {

gulp.watch(path.pug.entry).on('change', gulp.series(pugCompile, browserReload));

}

// ▽ Gulpにタスクを登録

// 実行内容。

// browser-sync起動

gulp.task('sync', serverInit);

// pugファイルの変化を監視。変更があったらリビルドしてブラウザリロードする。

gulp.task('watch', watchFile);

4, package.jsonに、コマンドラインからyarn devで自動リロードするコマンドを記述する

  "scripts": {
    "dev": "gulp sync watch"
  },

"scripts": {

"dev": "gulp sync watch"

5, コマンドラインから実行すると、http://localhost:3000/がブラウザで表示される。
今時点では、pug->htmlへの変換が起こらず、Cannot GET / と表示される。

yarn dev

yarn dev

6, src/pug/index.pugを適当に修正して保存すると、dist/index.htmlが出力される。

[11:45:46] Starting 'pugCompile'...
[11:45:46] Finished 'pugCompile' after 60 ms
[11:45:46] Starting 'browserReload'...
[11:45:46] Finished 'browserReload' after 1.74 ms
[Browsersync] Reloading Browsers...

[11:45:46] Starting 'pugCompile'...

[11:45:46] Finished 'pugCompile' after 60 ms

[11:45:46] Starting 'browserReload'...

[11:45:46] Finished 'browserReload' after 1.74 ms

[Browsersync] Reloading Browsers...

この時点でF5リロードすると、hello,worldという文字列が表示され、これ以降は、index.pugを修正＆保存すると、自動的にブラウザがリロードされ、常にソースと同期される。やったね！
とりあえず、gulpfile.jsの書き方を覚えたいと・・・。

関連記事