humangas's blog

自分用のメモなので雑です。

gulpる

gulpをさっと試す。HTMLいじったら自動でリロードしてもらうところでま記載。

なぜ、gulpりたいのか?

サクッと、WebUIを持つツール等を作りたい時がある。 そんな時に、サクサクサクッとやりたいわけだ。 フロントには慣れてないが、そういう時によく聞くgulpを使おうとなった。

先に書いておくと、↓がドンピシャだった。感謝!

結論:思いのほか簡単で、すぐにやりたいことが出来、気持ちよかった。

セットアップ

node.jsを入れて、gulpを入れる。 gulpは、nodeのパッケージなので。

$ brew install node
$ npm install gulp -g

-g は、グローバルにインストールという意味。
gulpとか、どこでも使うコマンドは、グローバルに入れておくのが楽。

package.json をつくる。 このファイルには、nodeのパッケージとか記載する。 これがあれば、別環境とかで、npm install とするだけで、環境が復元できる。

pythonで言う、requiretemnts.txtみたいなもんと思えばいいだろう。

$ npm init

勢い系(全部Enter)でOK

ブラウザリロードするために必要なパッケージと、gulp本体を突っ込む

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

--save-dev をつけてインスコすることで、さっきのpackage.jsonに記載される。
pip freeze > requiretemnts.txt みたいなことだと思えばいいだろう。

いよいよgulpファイルを書く

gulpは、タスクランナー。gulpfile.jsというファイル名で、自動でやらせたいこととか書いて、gulpコマンドを打てば、それで終わり。
make(= gulp) と、Makefile(gulpfile.js) というざっくり理解でいいだろう。

gulpfile.js

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

gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "src",
            index: "index.html"
        }
    });
});

gulp.task('bs-reload', function () {
    browserSync.reload();
});

gulp.task('default', ['browser-sync'], function () {
    gulp.watch("src/*.html", ['bs-reload']);
    gulp.watch("src/*.js", ['bs-reload']);
    gulp.watch("src/*.css", ['bs-reload']);
});

これは、src配下のhtml, js, css を監視しておき、ファイルが更新されたら、reloadして。と書いてある。

gulpる

$ gulp

これだけで、監視が始まり、ブラウザが自動で起動する。

あとは、src配下のhtmlなどをゴリゴリ書いては、更新をすれば、見た目をガンガン確かめながら開発を進められる。気持ちよす。

オマケ

npm install やると、node_modules というフォルダが出来て、そこにブツが入ってくる。 開発中は必要だが、コレ自体をgit管理する必要はないので、.gitignoreとかに書いとけばよいだろう。