読者です 読者をやめる 読者になる 読者になる

プログラミング初心者がexpressとgulpでローカル開発環境を構築する

express Node.js ローカル開発環境

サーバー再起動、ブラウザリロードとか面倒くさい!ってことで、それらを自動で行ってくれる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に接続して、さらにエディタで変更を加えて保存すると、勝手にブラウザリロードしてくれて楽しい。

スマホから見てみよう

さらに、terminalに表示されているはずのExernal先に同じネットワークに繋がっているスマホやらでアクセスすると...

------------------------------------
       Local: http://localhost:4000
    External: http://{PCのIPアドレス}:4000
 ------------------------------------

f:id:uraway:20151120232112j:plain

楽しいいいいいいいいいぃぃぃぃぃ!!!!!!!!