0

テンプレートを再利用可能なコンポーネントに分割できるように、 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 インデックス ファイルを編集する場合でも、空白のスレートではなくページをレンダリングできるように、時々ページを手動で更新する必要があります。

4

1 に答える 1