コーディング自動化Static Site GeneratorHexogulp

Hexoをgulp 4に組み込んで効率的にブログ開発する

Hexo in gulp4 画像1

Hexoブログ開発もgulpで済ませたい。HexoプラグインだとSass globやアイコンフォント制作ができないし。ただ、両方使ってそれぞれを毎回立ち上げたり停止させるような開発は辛すぎる。

できれば、gulpのタスクとしてHexoを登録し npx gulp を入力するだけですべて済むようにしたい。面倒を回避したい一心でなんとか動かせるようになったのでメモしておく。

gulp v4 をインストール

まず、gulpのバージョン4以降をインストールする。バージョン3までのgulpはタスクを並列処理するのがデフォルトで、直列処理するにはnpmライブラリの run-sequence などが必要だった。

2018年3月10日時点だと、gulp 4は元旦にプレリリースされたばかりでドキュメント制作後の正式リリース待ちとなっている。機能はできあがっているのでプレ版を以下のコマンドでインストールする。

$ npm i -D gulp@next

npmライブラリ

gulpfile.js にシェルコマンドを書けるようになる gulp-exec をインストール。

$ npm i -D gulp-exec

gulpfile.jsを書く

※Hexo・Hexo Serverなどの環境は構築済み、Hexo以外の記述は省略とする。

// Hexoを使えるようにする（公式APIより）
const Hexo = require('hexo');
const hexo = new Hexo(process.cwd(), {});

// Hexoサーバーを立ち上げるタスク
gulp.task('server', function(cb) {
  hexo.init().then(function() {
    return hexo.call('server', {
    });
  }).then(function() {
    return hexo.exit();
  }).then(function() {
    return cb();
  }).catch(function(err) {
    console.log(err);
    hexo.exit(err);
    return cb(err);
  });
});

// Hexoブログをブラウザで開くタスク
gulp.task('open', () => {
  return gulp.src('./')
    .pipe(exec('open http://localhost:4000'))
});

// デフォルトタスク：Hexoサーバーの立ち上げが終わったらブラウザで開く
gulp.task('default', gulp.series('server', 'open', 'watch'));

これで、npx gulp を入力したらHexoサーバーが立ち上がりブラウザ（新規タブ）で表示できるようになった。Sassなどはwatchでいつも通り自動処理される。Hexoブログのブラウザリロードは必要。

試行錯誤した部分

Hexo Generate + BrowserSyncが使えず

本当はHexo ServerではなくBrowserSyncが使いたかった。オートリロード＆モバイル実機確認も簡単にできるから。なので、最初は server ではなく generate にしていたのだけど、watch中に2回書き出そうとすると TypeError: str must be a string! とエラーが出て失敗。

書き方を変えたりしたが改善できず「Hexo Generate + BrowserSync」案は断念。

Hexe Serverのみでブラウザ表示できず

Hexo Serverのオプション open が無くなったのか、そのままだとブラウザを自動的に開けない。そこで、強引だけどコマンドラインで http://localhost:4000 を開くタスクを作った。

並列処理だとブラウザが先に開いてしまう

hexo server と open をそのままデフォルトタスクに登録すると、サーバーが立ち上がる前にブラウザが開いてしまう。リロードすればエラーは直るものの、スマートでないのでgulpのバージョン4で追加された直列処理 series を利用した。

関連記事