独立したので急ピッチでホームページとか作ってます。なんで会社員時代にやっておかなかったの、と言われるとぐうの音も出ませんが、やっぱり本当に必要にならないとモチベーションがわかないものなのです。。。。
「Done is better than perfect」の精神で、とにかくスピード重視でやっていく。ホームページの大枠はbootstrapのテンプレートの丸パクリです。。
Webシステムではなく完全な静的ホームページですが、gulpとbrowserSyncを使うと超はかどりますね。
$ npm install --save-dev gulp browser-sync
しておいてから、以下のようにgulpfile.jsを作成
var gulp = require('gulp'); var browserSync = require('browser-sync'); gulp.task('default', function () { browserSync({ server: { baseDir: "./" //index.htmlのある位置など、ベースディレクトリを指定 } }); //スタイルシートいじる場合は"/**/*.css"などと指定する gulp.watch("./index.html", function () { browserSync.reload(); }) });
$ gulp
実行で、localhost:3000にサーバが立ち上がって編集しているhtmlが表示される。
この状態で、エディタでhtmlファイルを編集するとブラウザが勝手にリロードされる。
今までは編集して保存していちいち読み込みなおしをF5キー押下などで行わなければならなかったのですが、gulpのおかげでその操作から解放されてストレスが減りました。