テンプレートを再利用可能なコンポーネントに分割できるように、 gulp- pugでgulp を使用しています。Pug は、既存の *.pug(jade) ファイルを取得し、ブラウザー同期および/またはプロジェクト ビルド (私の場合) でそれらを一般的な html ファイルに変換します。
gulp.task('views', function buildHTML() {
return gulp.src('src/views/*.pug')
.pipe(changed('src', {
extension: '.html'
}))
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest('src/'))
});
gulp.task('watch', ['browserSync', 'views', 'sass'], function () {
gulp.watch('src/scss/**/*.scss', ['sass']);
gulp.watch('src/views/**/*.pug', ['views']);
// Reloads the browser whenever HTML or JS files change
gulp.watch('src/views/**/*.pug', browserSync.reload);
gulp.watch('src/*.html', browserSync.reload);
gulp.watch('src/js/**/*.js', browserSync.reload);
});
gulp.task('default', function (callback) {
runSequence(['views', 'sass', 'browserSync', 'watch'],
callback
);
});
そして、これはindex
パーシャルが含まれている基本的なパグです
doctype html
html(lang='en')
include partials/head.pug
body
<!-- content -->
include partials/footer.pug
include partials/scripts.pug
私のviews
フォルダ構造は次のとおりです。
views
--- partials
--- *
--- *
--- etc.
--- index
パーシャル (パーシャル フォルダー内の pug ファイル) の 1 つに変更を加えて保存すると、ライブ リロード機能は期待どおりに動作しますが、*.pug ファイルは解析されません。ただし、保存するindex.pug
と、ファイルが変換され、ページに新しいコンテンツが読み込まれます。
私はどこで何を間違っていますか?
PS インデックス ファイルを編集する場合でも、空白のスレートではなくページをレンダリングできるように、時々ページを手動で更新する必要があります。