HotcakeLab: gulpを使う

Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ
ここを参考に。 gruntの使用経験はあったけれど、あちらは設定ファイルが巨大化したりして、いつの間にか記述間違えていたりした。こっちはすんなりと入ってびっくり。

browserによる再読み込みはローカル環境では上記通りだが、もし仮想環境上にある場合は、proxyモードと呼ばれるもので操作することができるらしい Browsersync - Time-saving synchronised browser testing

gulp.task("server", function() {
  browser({
    server: {
      baseDir: "./"
    }
  });
});

こう書いているが、これではindex.htmlしか確認できないじゃないか！ hoge.htmlで作業がしたいんだぞ！と困ったがブラウザ上のURLが

http://localhost:3000/

だったとすれば

http://localhost:3000/hoge.html

とすれば、普通に確認できたし、更新もされた。 browsersyncでルートディレクトリから下はすべて監視対象なんだな。なんて便利なんだ

「gulp」コマンドの後ろにタスク名を書けば、そのタスクを実行できる。公開用にgulpのタスクを分けてみるとかもできそう。

gulpに引数を渡す場合は、linuxのオプションみたいに

gulp --hoge=aaaa

とすれば、hogeというキーにaaaaという値が入力される。こうしないとタスク扱いされてしまう

HotcakeLab