gulp環境構築 〜ローカルサーバー〜

前回

• pug、sass、javascriptの変更を監視して、トランスパイルをしてくれる
• トランスパイル中にエラーが出ても停止しない

までやった。
今回は折角だし、ローカルでサーバー建ててライブロードして欲しいなってのを設定する感じ。

ローカルサーバー

• browser-sync
  こいつがローカルサーバー建ててくれるし、そのサーバーのページを開いてるブラウザをリロードしてくれる。
  んで、私はこいつをyarn server って打った時だけ起動してほしいから、serverタスクを作った。

gulpfile.babel.js

// 〜 省略 〜
import blowserSync from 'browser-sync';
// 〜 省略 〜
gulp.task('server',['default'] () => {
  const serverSetting = {
    server: {
      baseDir: './dist/',
      index: 'index.html',
    },
  };
  browserSync(serverSetting);
});

package.jsonにyarn serverを設定する

package.json

// 〜 省略 〜
  "scripts": {
    "start": "gulp",
    "server": "gulp server", //追加行
    "test": "gulp test"
  },
// 〜 省略 〜

これでyarn serverって打てばローカルサーバー起動してくれる。
ちなみにブラウザはprimaryに設定してるやつが勝手に起動して開く。

ポート番号はデフォルト3000だけど、設定で変えられるし、他にも色々変えられる。

ポート8080で起動

gulp.task('server',['default'] () => {
  const serverSetting = {
    server: {
      port: 8080,
      baseDir: './dist/',
      index: 'index.html',
    },
  };
  browserSync(serverSetting);
});

ライブロード

reloadタスクを作って
watchタスクにちょっと追記してあげればおｋ

gulpfile.babel.js

gulp.task('reload', ['main'] () =>
  browserSync.reload(),
);

gulp.task('watch', () => {
  const watchList = [
    paths.allSrcJs,
    paths.sass,
    paths.pug,
  ];
  gulp.watch(watchList, ['reload']); //この行のmainをreloadに変更
});

browserSync.reload()は現在そのサーバーに繋いでるブラウザタブを更新してくれる。