缓慢的pug编译为HTML

Question

我正在使用gulp将我的pug文件编译成HTML。每次我做任何改变平均都需要30秒的时间！可能是因为我的吞咽配置中的某些东西(如下所示)？

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进程保持活动状态，因此它能够缓存所有以前未更改的文件。

备注：只有使用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-cached和gulp-remember。这些包将输入文件链接到转换后的输出文件。这意味着gulp-remember将输出所有已处理的文件。如果文件没有更新，它将输出缓存的版本。如果你不需要所有的文件(例如，因为你没有连接它们)，你可以删除这些行。

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

包gulp-cache将只转发自上次构建以来更改过的文件。它基本上做了同样的事情，然后是选项{ sine: gulp.lastRun('pug') }。

因此，如果需要在管道中进一步处理文件，则需要所有3个包，否则，包gulp-cache (没有d)就足够了。

Answer 2

我用的是这个。

仅传递已更改的文件

不再在处理未更改的文件上浪费宝贵的时间。

https://www.npmjs.com/package/gulp-changed