gulpを使ったファイル監視のメモ

はじめに

簡単なWebアプリケーションを作成する際の、gulpと各プラグインの設定メモです。

使用するプラグイン

package.json

  "devDependencies": {
    "browser-sync": "^2.18.13",
    "browserify": "^14.5.0",
    "gulp": "^3.9.1", 
    "gulp-sass": "^4.0.2",
    "vinyl-source-stream": "^1.1.0"
  },

学習環境の都合、今回はgulp v3系を使用しました。

ざっくりプラグイン詳細

• browser-sync: htmlファイルの変更を監視して更新時にブラウザのオートリロードを行う
• browserify: Node.jsスタイルのコードをブラウザ上で動く形に変換、require機能使いたい
• gulp: タスクランナー
• gulp-sass: sassをcssにコンパイル
• vinyl-source-stream: browser-syncに必要

設定の流れ

1. npmやyarnを使ってプラグインをインストール(設定済のpackage.jsonがあればinstallするだけ）
2. gulpfile.jsにgulpの設定を記述

gulpfile.jsの内容

gulpfile.js

//プラグインの読み込み
var gulp = require('gulp');
var browserify = require('browserify');
var browserSync = require('browser-sync').create();
var source = require('vinyl-source-stream');
var sass = require('gulp-sass');

// gulpタスクの作成
// jsのビルド
gulp.task('build', function(){
  browserify({
    entries: ['src/app.js']
  }).bundle()
  .pipe(source('bundle.js'))
  .pipe(gulp.dest('dist/'));
});
// ブラウザ同期
gulp.task('browser-sync', function() {
  browserSync.init({
    server: {
      baseDir: "./", // 対象ディレクトリ
      index: "index.html" //indexファイル名
    }
  });
});
// ブラウザの更新
gulp.task('bs-reload', function () {
  browserSync.reload();
});
// Sassをコンパイルする処理
gulp.task('sass', function() {
  return gulp.src('src/scss/*.scss') // コンパイル元ディレクトリ
    .pipe(sass({outputStyle: 'expanded'})) // アウトプットスタイル（開発中なので可読性重視）
    .pipe(gulp.dest('dist/css/')); // コンパイル先ディレクトリ
});

// Gulpを使ったファイルの監視
gulp.task('default', ['build', 'browser-sync'], function(){
  gulp.watch('./src/*.js', ['build']);
  gulp.watch('src/scss/*.scss', ['sass']);
  gulp.watch("./*.html", ['bs-reload']);
  gulp.watch("./dist/*.+(js|css)", ['bs-reload']);
});

これでjs/scss/htmlファイルの編集をすると自動的にjsのビルド、sassのコンパイル、同期されたブラウザの更新が実行され、効率よく開発ができる。
これまで都度都度Command+Rをやっていたので感動的です。

参考　ファイルツリー

.
├── dist
│   ├── bundle.js
│   └── css
│        └── app.css
├── gulpfile.js
├── index.html
├── node_modules
├── package-lock.json
├── package.json
└── src
    ├── app.js
    └── scss
│        └── app.scss

treeコマンドの存在を初めて知りました。手打ちするところでした。

参考URL

• gulpとBrowserifyでJSをビルドしてみた　https://qiita.com/seanchas_t/items/96fbb63e5fe36f94a42e
• ざっくりbrowserify入門　https://qiita.com/fgkm/items/a362b9917fa5f893c09a
• treeコマンド　https://qiita.com/koshihikari/items/0906cd8e97b931714efe