javascript - 慢哈巴狗编译成 HTML

Question

我正在使用 gulp 将我的哈巴狗文件编译成 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 , { 因为: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)应该是足够了。