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便利そうだ。
インストールしていないパッケージを一度だけ実行できる機能もあるらしい。
気になったこと
自分でHTMLを書くと色々とミスをやらかしそうなので、jadeやslimなどの便利ツールを使いたいけど、今だと何を使うのが良いんだろうか。
また、gulpって最近はあまり聞かない気がするので、もっと良いものがあるんだろうか。
次の機会までに調べておきたい。