CODEWITHSUNDEEP
javascriptgulppug
Romain Gaget
Romain Gaget

Reputation: 97

Slow pug compiling to HTML

I'm using gulp to compile my pug file to HTML. It takes an average of 30 seconds each time I make any kind of change! Is it maybe due to something in my gulp config (listed below)?

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'])
})

Upvotes: 1

Views: 2121

Answers (2)

Salih Kiraz
Salih Kiraz

Reputation: 33

I using this.

Only pass through changed files

No more wasting precious time on processing unchanged files.

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

Upvotes: 0

Iqon
Iqon

Reputation: 1992

If it is the pug compilation that slows you down, add caching.

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'));

The option gulp.lastRun will only return files that were changed since the last run of the given task. If you use the default task to build your files, pug will only need to process the files that were changed. Because the gulp process is kept alive by the watch function, it is able to cache all previous unchanged files.

REMARK: This will only work if you use Gulp v4, if not, you should really upgrade ;)

Solution for Gulp < 4.0

There is a package called gulp-cache, which { since: gulp.lastRun('pug') }. So you should be able to adjust the snippet:

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']);

I am not sure if you really need gulp-cached and gulp-remember. Those packages link the input files to converted output files. This means gulp-remember will output all files that were processed. If the file was not updated, it will output the cached version. If you don't need all files (e.g. because you are not concatenating them), you could remove those lines.

Even if the package names are very similar, they are completely different:

The package gulp-cache will only forward files that have changed since the last build. It essentially does the same, then the option { sine: gulp.lastRun('pug') }.

So if you need to process the files further down in your pipe, you need all 3 packages, otherwise, the package gulp-cache (without d) should be sufficient.

Upvotes: 5

Related Questions