sass001

この記事ではGulpとBrowsersyncを用いて、Sassのコンパイルと変更点を自動でブラウザに反映させる(オートリロード)方法を紹介したいと思います。

用語説明

Gulp

Gulpはタスクランナーの一種でWeb開発に応じて生じる様々な作業を自動化する便利なツールです。自動化できる作業の一例として、ES6のコードをES5に変換するトランスパイルやESLint等の静的検証、Sassのコンパイルなどがあります。

gulp.js – the streaming build system

Browsersync

Browsersyncはブラウザ確認ツールです。ローカルでファイルを編集・保存する度に同期しているブラウザに即時反映してくれます。これまでファイルを編集・保存し、ブラウザをリロードさせて変更を確認していた部分を自動化できます。

Browsersync – Time-saving synchronised browser testing

事前準備

事前準備として、Node.jsが使用できる環境とプロジェクトフォルダルートにpackage.jsonが必要です。

$ npm install browser-sync gulp gulp-sass --save-dev

このコマンドで今回必要なbrowser-sync、gulp、gulp-sassの3つのモジュールがインストールされます。

gulpfile.jsを書く

プロジェクトフォルダルートにgulpfile.jsというGulpの設定ファイルを置きます。このファイルにSassからCSSへの変換とブラウザ同期のタスクを記述していきます。

Browsersync + Gulp.js

記述すると言いましたが、実はBrowsersyncとGulp.jsを使ったSassのコンパイルのgulpfile.jsの例はBrowsersyncのドキュメントに載っています。上記リンク先のコードを参考に書くと良いでしょう。

この記事では先日紹介したDockerを用いたWordPress環境と連携するgulpfile.jsを書いていきたいと思います。


const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');

gulp.task('serve', () => {

  // WordPress開発環境と連携のためプロキシを使用
  browserSync.init({
      proxy: "localhost:8000/?p=13567"
  });
});

gulp.task('sass', () => {

  // scssファイルからcssファイルを書き出し
  return gulp.src("./*.scss")
  .pipe(sass())
  .pipe(gulp.dest("./"));
});

gulp.task('watch', () => {

  // scssファイルが変更されたらsassタスクを実行
  gulp.watch("./*.scss", ['sass']);
  // phpファイルとcssファイルが変更されたら、ブラウザをリロード
  gulp.watch(['./*.php', './*.css']).on('change', browserSync.reload);
});

gulp.task('default', ['serve', 'watch']);

全体としてはこのような感じになりました。上記のコードを順番に見てきます。

gulpfile.jsの処理の流れ

gulp.task('serve', () => {

  // WordPress開発環境と連携のためプロキシを使用
  browserSync.init({
      proxy: "localhost:8000/?p=13567"
  });
});

serveタスクではBrowsersyncの設定として、WordPress開発環境のホストをプロキシとして指定しています。すでにサーバーが動作しているローカル開発環境と連携する場合はこのようにプロキシを使用します。

browserSync.init({
  server: "./app"
});

静的ページの開発環境の場合はBrowsersyncの機能を使用してローカルサーバーを立てます。引数のserverにはブラウザに変更を反映されたいファイルが含まれるディレクトリを指定します。

gulp.task('sass', () => {

  // scssファイルからcssファイルを書き出し
  return gulp.src("./*.scss")
  .pipe(sass())
  .pipe(gulp.dest("./"));
});

sassタスクではscssで記述されたファイルをコンパイルしてcssファイルを出力する処理が記述されています。詳細な処理の流れは以下のようになっています。

  1. 拡張子が.scssのファイルをソースとして読み込み
  2. scssファイルをコンパイル
  3. 指定したディレクトリにcssファイルを出力(読み込んだファイル名と同名で出力)
gulp.task('watch', () => {

  // scssファイルが変更されたらsassタスクを実行
  gulp.watch("./*.scss", ['sass']);
  // phpファイルとcssファイルが変更されたら、ブラウザをリロード
  gulp.watch("./*.php").on('change', browserSync.reload);
  gulp.watch("./*.css").on('change', browserSync.reload);
});

watchタスクではSCSSファイルの編集を監視し、編集されたときにsassタスクを実行します。また、PHPとCSSファイル(SCSSファイルコンパイルにより生成)が編集されたら、ブラウザをリロードする設定も合わせて記述しています。

gulp.task('default', ['serve', 'watch']);

defaultタスクはターミナルで$ gulpで実行されるタスクです。serveタスク、watchタスクを順に実行します。

タスクを実行させる

"scripts": {
    "gulp": "gulp"
  }

まずはpackage.jsonscriptsに上記の記述を追加します。gulpコマンドを叩くためにパスを通す必要があるからです。$ npm install -g gulpでグローバルインストールしてもパスが通ります。

$ gulp
[01:02:21] Using gulpfile ~/Develop/github/docker-wordpress/html/wp-content/themes/peterriver2016/gulpfile.js
[01:02:21] Starting 'serve'...
[01:02:21] Finished 'serve' after 35 ms
[01:02:21] Starting 'watch'...
[01:02:21] Finished 'watch' after 1.22 ms
[01:02:21] Starting 'default'...
[01:02:21] Finished 'default' after 18 μs
[BS] Proxying: http://localhost:8000
[BS] Access URLs:
 ---------------------------------------------
       Local: http://localhost:3002/?p=13567
    External: http://192.168.1.6:3002/?p=13567
 ---------------------------------------------
          UI: http://localhost:3003
 UI External: http://192.168.1.6:3003
 ---------------------------------------------

$ gulpを実行すると、ブラウザが立ち上がってプロキシで設定したページを開きます。URLは今回の場合はLocalに記載のhttp://localhost:3002/?p=13567になっています。

browsersync002

動画で見るとこんな感じになります。

browsersync001

複数のウィンドウで開けば、このようにスマホとPCサイトを同時に確認することができます。スクロールも同期して便利です。

さらにExternalのURLをPCと同一のネットワークに接続されているスマホやタブレットで開くと簡単に実機確認することができます。

これら複数のウィンドウで開いているページはSassが編集されるたびに、すべてリロードされて変更を確認できるので作業効率がアップすると思います。

この記事をシェアする

この記事と同じカテゴリーの記事

この記事を書いた人

naremo [ナレモ]はWebサービスやアプリ、カメラ、プログラミングについて紹介するブログです。