缓慢的 pug 编译为 HTML

Question

我正在使用 gulp 将我的 pug 文件编译为 HTML。每次我做任何改变平均需要 30 秒！是否可能是由于我的 gulp 配置中的某些内容（如下所列）？

var gulp   = require('gulp')
var pug = require('gulp-pug')

gulp.task('pug', function () {
  return gulp.src('pug/**/*.pug')
    .pipe(pug({pretty:true, doctype:'HTML'}))
    .pipe(gulp.dest('views'))
})

gulp.task('watch:pug', ['pug'], function () {
  gulp.watch('pug/**/*.pug', ['pug'])
})

Answer 1

如果是pug编译减慢了您的速度，请添加缓存。

var gulp     = require('gulp');
var pug      = require('gulp-pug');
var cached   = require('gulp-cached');
var remember = require('gulp-remember');

gulp.task('pug', function () {
  return gulp.src('pug/**/*.pug', { since: gulp.lastRun('pug') }))
    .pipe(cached('pug'))
    .pipe(pug({pretty:true, doctype:'HTML'}))
    .pipe(remember('pug'))
    .pipe(gulp.dest('views'))
})

gulp.task('watch', function(done) {
  gulp.watch('pug/**/*.pug', gulp.parallel('pug'));
  return done();
});

gulp.task('default', gulp.series('pug', 'watch'));

该选项gulp.lastRun将仅返回自上次运行给定任务以来更改的文件。如果您使用default任务来构建您的文件，pug则只需要处理已更改的文件。由于 gulp 进程通过 watch 函数保持活动状态，因此它能够缓存所有以前未更改的文件。

备注：这仅在您使用 Gulp v4 时才有效，否则，您应该真正升级 ;)

Gulp < 4.0 的解决方案

有一个名为 的包gulp-cache，其中{ since: gulp.lastRun('pug') }. 所以你应该能够调整片段：

var gulp     = require('gulp');
var pug      = require('gulp-pug');
var cache    = require('gulp-cache');
var cached   = require('gulp-cached');
var remember = require('gulp-remember');

gulp.task('pug', function () {
  return gulp.src('pug/**/*.pug'))
    .pipe(cache('pug'))
    .pipe(cached('pug'))
    .pipe(pug({pretty:true, doctype:'HTML'}))
    .pipe(remember('pug'))
    .pipe(gulp.dest('views'))
})

gulp.task('watch', function(done) {
  gulp.watch('pug/**/*.pug', ['pug']);
  return done();
});

gulp.task('default', ['pug', 'watch']);

我不确定你是否真的需要gulp-cachedand gulp-remember。这些包将输入文件链接到转换后的输出文件。这意味着gulp-remember将输出所有处理过的文件。如果文件没有更新，它将输出缓存的版本。如果您不需要所有文件（例如因为您没有连接它们），您可以删除这些行。

即使包名非常相似，它们也完全不同：

该包gulp-cache只会转发自上次构建以来已更改的文件。它本质上是一样的，然后是 option { sine: gulp.lastRun('pug') }。

因此，如果您需要在管道中进一步处理文件，则需要所有 3 个包，否则，该包gulp-cache（不带d）就足够了。