kapieciiのブログ

日々学んだことを残しておくためのブログです。このブログはGoogle Analyticsを利用しています。

gulpでjadeをhtmlにコンパイルする際にエラーが発生した

目次

昔作ったツールを改修するため、久しぶりにjadeをhtmlにコンパイルしようとしたところ、下記のエラーが発生した。

$ gulp jade
[20:09:39] Using gulpfile ~/go/src/xxxxx/src/gulpfile.js
/usr/local/lib/node_modules/gulp/bin/gulp.js:129
    gulpInst.start.apply(gulpInst, toRun);

調べてみると、gulpとgulp-cliのバージョンが異なっていたり、gulpが4になったあたりで発生するエラーらしい。
確かにこのコマンドを実行する前に、「使う前に最新にしとこー」と思い、npmやgulpを更新していた。

結論

以下のことをして解決した。

  • npmの更新
  • globalのgulp及びgulp-cliをアンインストール
  • プロジェクト配下にgulpをインストール
  • gulpfile.jsのgulp.task()をgulp4に対応した書き方に修正
  • npxを使ってjadeからhtmlにコンパイル

作業ログ

gulpのバージョン情報

$ gulp -v
[20:26:55] CLI version 3.9.1
[20:26:55] Local version 4.0.0

色々依存で問題が発生するので、node moduleをglobalにインストールすることは推奨されない。
ということでglobalのgulpとgulp-cliをuninstall

$ npm rm gulp -g
$ npm rm gulp-cli -g

project配下にgulpをインストールしなおす。

$ npm install gulp

npm@5.2.0以降では、npxというコマンドラインインターフェースが追加されたらしい。

$ npx gulp jade

次は下記のエラーが発生。

$ npx gulp jade
[20:37:15] Using gulpfile ~/xxxxx/src/gulpfile.js
[20:37:15] Starting 'jade'...
[20:37:15] The following tasks did not complete: jade
[20:37:15] Did you forget to signal async completion?

gulp4以降では、taskを明示的に終了する必要があるらしい。
ということで、gulp.task()にreturnを追加した。

変更前

gulp.task('jade', function(){↲
  gulp.src(JADE_FILES)↲
    .pipe(plumber())↲
    .pipe(jade({↲
      pretty: true↲
    }))↲
    .pipe(gulp.dest("./html/view/"));↲
});↲

変更後

gulp.task('jade', function(){↲
  return gulp.src(JADE_FILES)↲
    .pipe(plumber())↲
    .pipe(jade({↲
      pretty: true↲
    }))↲
    .pipe(gulp.dest("./html/view/"));↲
});↲

無事にjadeをhtmlにコンパイルできるようになった。

$ npx gulp jade
[20:39:34] Using gulpfile ~/xxxxx/src/gulpfile.js
[20:39:34] Starting 'jade'...
[20:39:34] Finished 'jade' after 493 ms

余談

近頃npmをあまり触ってないけど、npx便利そうだ。
インストールしていないパッケージを一度だけ実行できる機能もあるらしい。

qiita.com

qiita.com

気になったこと

自分でHTMLを書くと色々とミスをやらかしそうなので、jadeやslimなどの便利ツールを使いたいけど、今だと何を使うのが良いんだろうか。
また、gulpって最近はあまり聞かない気がするので、もっと良いものがあるんだろうか。
次の機会までに調べておきたい。

参照

qiita.com

tweeeety.hateblo.jp

stackoverflow.com

kapieciiのブログについてお問い合わせがある場合、下記のフォームからご連絡をお願い致します。
お問い合わせはこちら