pugでhtml書くと何倍もマークアップが捗るのですが、
pugのファイルが増え続けるとgulpのコンパイルに時間がかかりすぎてイライラした経験ありませんか?
今回はそれを解消するちょっとしたテクを書きたいと思います。
変更前のgulpfile
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
# pug コンパイル gulp.task 'pug', () -> gulp.src [PATH.DEV + '**/*.pug', '!' + PATH.DEV + 'htdocs/assets/pug/**/*.pug'] .pipe plumber() .pipe pug pretty: true, basedir: '_dev/htdocs/assets/pug' .pipe gulp.dest PATH.PRE gulp.task 'pugReload', ['pug'], () -> browserSync.reload() gulp.task 'watch', () -> watch PATH.DEV + '**/*.pug', () -> gulp.start 'pugReload' |
今回は、pugファイルに変更があった場合、pugコンパイルしてbrowsersyncのリロードを実行する形をとっていますが、この場合だと、ファイル数が膨大な場合、毎回大量にコンパイルするためだいぶ時間がかかってしまいます。
なんと 23秒もかかりました。さすがに、毎回pugファイルをいじるたびに23秒もかかると遅すぎて困りますよね。開発泥沼化です。
そのため、以下のようにgulpを書き直してみました。
変更後のgulpfile
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
# pug コンパイル gulp.task 'pug', () -> gulp.src [PATH.DEV + '**/*.pug', '!' + PATH.DEV + 'htdocs/assets/pug/**/*.pug'] .pipe plumber() .pipe changed(PATH.PRE, { extension: '.html' } ) .pipe gulpif(global.isWatching, cache('pug')) .pipe pugInheritance( { basedir: '_dev' } ) .pipe pug pretty: true, basedir: '_dev/htdocs/assets/pug' .pipe gulp.dest PATH.PRE gulp.task 'pugReload', ['pug'], () -> browserSync.reload() |
まず、change(gulp-changed)で変更があったfileのみ実行するようにし、watchが走ったタイミングでcache(gulp-cached)を残すようにしています。今回global.isWatchingはwatchタスクを叩くときのみtrueを返すように設定しました。
ただ、このままだとpugのinclude先や、mixinが変更してもキャッチできないため、 pugInheritance(gulp-pug-inheritance)で、include先に変更があってもキャッチできるようにしてます。
この結果、
なんと 23sから198msまで。実に100倍の速度までコンパイルが早くなりました!
ただこの方法にも1個だけ課題があります。
include元のファイルを変更したタイミングでは、include先のpugファイルに変更は伝わらず、 対象のpugファイルに何か変更を加えたタイミングでinclude元の変更分が反映されます。(includeやmixinなど基のファイルに変更が加えたタイミングでは、どのファイルに変更を渡すか伝わらないため)
とはいえ通常の開発でそこまで気にしなくて良い!って方には劇的な開発速度になるためおすすめです。
この課題を解消する方法は次回お話できればと思います。