プログラミング初心者がexpressとgulpでローカル開発環境を構築する
サーバー再起動、ブラウザリロードとか面倒くさい！ってことで、それらを自動で行ってくれるBowserSyncモジュールと、ついでにアプリの骨格を作ってくれるexpressを導入する手順をまとめます。
参考：gulp + node + express で BrowserSync 使おう - ぶるーすくりーん
材料はgulp,gulp-nodemon,browser-sync,express-generatorです。
必要なモジュールをインストールする
$ npm install express-generator
$ express {app}
$ cd {app}
$ npm install gulp gulp-nodemon browser-sync --save-dev{app}は任意のアプリ名です。
$ rm -r express
npmコマンドについてはこちらuraway.hatenablog.com
gulpfile.jsを編集する
{app}ディレクトリにgulpfile.jsを作って、編集してみます
//{app}/gulpfile.js var gulp = require('gulp'); var nodemon = require('gulp-nodemon'); var browserSync = require('browser-sync'); function reload() { browserSync.reload({ stream: false }); }; gulp.task('browsersync', function() { browserSync.init({ files: ['public/**/*.*', 'views/**/*.*'], // BrowserSyncにまかせるファイル群 proxy: 'http://localhost:3000', // express の動作するポートにプロキシ port: 4000, // BrowserSync は 4000 番ポートで起動 open: true }); }); gulp.task('serve', ['browsersync'], function () { nodemon({ script: './bin/www', ext: 'js html css', ignore: [ // nodemon で監視しないディレクトリ 'node_modules', 'bin', 'views', 'public', 'test' ], env: { 'NODE_ENV': 'development' }, stdout: false // Express の再起動時のログを監視するため }).on('readable', function() { this.stdout.on('data', function(chunk) { if (/^Express\ server\ listening/.test(chunk)) { // Express の再起動が完了したら、reload() でBrowserSync に通知。 // ※Express で出力する起動時のメッセージに合わせて比較文字列は修正 reload(); } process.stdout.write(chunk); }); this.stderr.on('data', function(chunk) { process.stderr.write(chunk); }); }); }); gulp.task('default', ['serve']);
起動してみる。自動的にブラウザが開くはず
gulp serve
サーバー側でもクライアント側でも修正を検知して自動的にブラウザリロード、必要ならサーバー再起動してくれるみたいです。
テストしてみる
index.htmlを編集してテストしてみます。
<!-- {app}/public/index.html --> <!doctype html> <html> <body> Hello!! </body> </html>
http://localhost:4000に接続して、さらにエディタで変更を加えて保存すると、勝手にブラウザリロードしてくれて楽しい。
