gulpのBrowser-SyncでHTMLとCSSをプレビューする

gulpのBrowser-SyncでHTMLとCSSをプレビューする

今回はgulpのbrowser-syncを設定することで、ejsとsassからHTMLとCSSにコンパイルしたファイルを自動リロードしてプレビューできるようにしたコードを書き記した投稿です。

これまでgulpでejsをhtmlに、Sassをcssにコンパイルできるように環境構築をしましたが、構築した環境にbrowserSyncの設定を追加して、ブラウザでの自動プレビューができるようにします。

使用するファイル構成は以下の通り。

 

gulp/
┣ dest/
┣ node_modules/
┣ src/
┃ ┣ index.ejs
┃ ┗ style.scss
┣ gulpfile.js
┣ package-lock.json
┗ package.json

 

srcフォルダのindex.ejsとstyle.scssを編集するたびに、destフォルダにhtmlとcssに変換され吐き出されたファイルをブラウザで自動プレビューです。

この記事ではbrowserSyncをインストールすることから始まります。
gulpのbrowser-syncで自動リロードするejsとsassの環境構築はNode.jsとnpmのインストールを含めた以下の記事を参考に整えていただければと思います。

 

GulpでEJSからHTMLにコンパイルできるようにする

GulpでSass(SCSS)をCSSにコンパイルできるようにする

 

browserSyncをインストール

 

まずはgulpでejsとsassのコンパイル環境を構築したフォルダにbrowserSyncをインストールします。

 

browserSyncを使用したい作業フォルダにターミナルで移動して、以下のコマンドnpm i -D browser-syncでbrowserSyncをインストールします。

 

npm i -D browser-sync

 

browserSyncをインストールするとpackage.jsonのdevDependenciesには”browser-sync”: “^2.27.9”,というバージョン付きの記述が以下のように追加されます。

 

"devDependencies": {
    "browser-sync": "^2.27.9",

 

今回ejsをhtmlに、sassをcssにコンパイルしてbrowser-syncで自動リロードを行いますので、devDependenciesにはbrowser-sync以外の記述があることも確認しておきます。

 

"devDependencies": {
    "browser-sync": "^2.27.9",
    "gulp": "^4.0.2",
    "gulp-ejs": "^5.1.0",
    "gulp-rename": "^2.0.0",
    "gulp-replace": "^1.1.3",
    "gulp-sass": "^5.1.0",
    "sass": "^1.51.0"
}

 

ない場合は以下のコマンドでbrowser-sync以外のものをまとめてインストール

 

$ npm install -D gulp gulp-ejs gulp-rename gulp-replace sass gulp-sass

 

Advertisement

 

browserSyncの読み込み

 

インストールしたbrowserSyncはgulpfile.jsにrequireで読み込みます。

browserSync自体の読み込みは以下の部分です。

 

const browserSync = require(‘browser-sync’);

 

browserSyncの読み込みを含めた、gulpのbrowser-syncでHTMLとCSSをプレビューするejsとsassのタスク、そしてリロード設定の全てのコードは以下です。

 

const gulp = require("gulp");
const rename = require("gulp-rename");
const ejs = require("gulp-ejs");
const replace = require("gulp-replace");
const sass = require("gulp-sass")(require("sass"));
const browserSync = require('browser-sync');

// EJSコンパイル
const EJScompile = (done) => {
    gulp.src(["./src/*.ejs", "!./src/_*.ejs"])
        .pipe(ejs({}, {}, { ext: '.html' }))
        .pipe(rename({ extname: '.html' }))
        .pipe(replace(/^[ \t]*\n/gmi, ''))
       .pipe(gulp.dest("./dest/"));
    done();
};

// sassコンパイル
const SassCompile = (done) => {
    gulp.src("./src/*.scss")
        .pipe(sass.sync({
            outputStyle: 'expanded'
            })
        )
        .on('error', sass.logError)
        .pipe(gulp.dest("./dest"));
    done();
};

// リロードするhtml
const reloadFile = (done) => {
    browserSync.init({
        server : {
            baseDir : "./",
            index : "index.html",
            directory: true,
        },
    });
    done();
};
// リロード設定
const reloadBrowser = (done) => {
    browserSync.reload();
    done();
};

// タスク化
exports.EJScompile = EJScompile;
exports.SassCompile = SassCompile;
exports.reloadFile = reloadFile;
exports.reloadBrowser = reloadBrowser;

// 監視ファイル
const watchFiles = (done) => {
    gulp.watch(["./src/*.ejs", "!./src/_*.ejs"], EJScompile);
    gulp.watch("./src/*.scss", SassCompile);
    gulp.watch("./dest/*.html", reloadBrowser);
    gulp.watch("./dest/*.css", reloadBrowser);

    done();
};

// タスク実行
exports.default = gulp.series(
    watchFiles,EJScompile,SassCompile,reloadFile
);

 

Advertisement

 

browser-SyncでHTMLとCSSをプレビュー

 

それではbrowser-SyncでHTMLとCSSをプレビューしてみます。

 

gulp/
┣ dest/
┣ node_modules/
┣ src/
┃ ┣ index.ejs
┃ ┗ style.scss
┣ gulpfile.js
┣ package-lock.json
┗ package.json

 

srcフォルダにindex.ejsとstyle.scssのファイルを作成しておきます。

作成したindex.ejsにはhtmlを簡単にで良いので記述。

 

<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <h2>Gulp ejs Sass browser-sync</h2>
    </div>
</body>
</html>

 

style.scssにもcssやscssを簡単にで良いので記述。

 

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.wrapper{
    width: 100%;
    max-width: 1100px;
    margin: 32px auto;
    background-color: #333;
    h2{
        padding: 16px;
        text-align: center;
        color: aliceblue;
    }
}

 

続いてターミナルでgulpフォルダ(今回構築したフォルダ)に移動して以下のコマンドを実行です。

 

$ npm start

 

npm startを実行するとターミナルでBrowsersyncが処理を始めます。

 

[Browsersync] Access URLs:
-------------------------------------
Local: http://localhost:3000
External: http://***.***.**.*:3000
-------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
-------------------------------------
[Browsersync] Serving files from: ./
[10:28:50] Starting 'reloadBrowser'...

 

 

自動でブラウザが立ち上がり、destに吐き出されたindex.htmlとstyle.cssの内容が表示します。

 

Advertisement

 

もしかすると最初はブラウザにフォルダ構成が表示されるかもしれませんが、そのときはdestフォルダのindex.htmlまでクリックで進み表示します。

そしてindex.ejsとstyle.sassを編集するたびに、SassCompileとEJScompileの処理がStartingとFinishedを繰り返し、Reloading Browsersが行われます。

 

[12:53:06] Starting 'SassCompile'...
[12:53:06] Finished 'SassCompile' after 5.22 ms
[12:53:07] Starting 'reloadBrowser'...
[12:53:07] Finished 'reloadBrowser' after 422 μs
[Browsersync] Reloading Browsers...
[12:56:13] Starting 'EJScompile'...
[12:56:13] Finished 'EJScompile' after 3.48 ms
[12:56:14] Starting 'reloadBrowser'...
[12:56:14] Finished 'reloadBrowser' after 443 μs
[Browsersync] Reloading Browsers...

 

この処理の度にブラウザでの表示は自動リロードを繰り返し修正した内容も自動で反映してくれます。

 

browser-Syncの終了

 

最後にbrowser-Syncを終了するやり方です。

ターミナルでcontrol+cを入力するとbrowser-Syncは終了します。

browser-Syncの終了後に再度browser-Syncをスタートするにはnpm startをターミナルで実行します。

これにてgulpのbrowser-SyncでHTMLとCSSをプレビューする今回の投稿は以上です。

私自身としては、これでようやくejsとsassの書き方の勉強ができるのでした。

HTMLカテゴリの最新記事