Done is better than perfect.

Tweet

独立したので急ピッチでホームページとか作ってます。なんで会社員時代にやっておかなかったの、と言われるとぐうの音も出ませんが、やっぱり本当に必要にならないとモチベーションがわかないものなのです。。。。

「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のおかげでその操作から解放されてストレスが減りました。

Tweet