我正在用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'])
})

最佳答案

如果是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
有一个名为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-cachedgulp-remember。这些软件包将输入文件链接到转换后的输出文件。这意味着gulp-remember将输出所有已处理的文件。如果文件未更新,则将输出缓存的版本。如果您不需要所有文件(例如,因为没有串联它们),则可以删除这些行。

即使软件包名称非常相似,它们也完全不同:

软件包gulp-cache将仅转发自上次构建以来已更改的文件。本质上是一样的,然后是选项{ sine: gulp.lastRun('pug') }

因此,如果需要在管道中进一步处理文件,则需要所有3个软件包,否则,软件包gulp-cache(不带d)应该足够。

10-05 20:48
查看更多