Search code examples
gulpnunjucksgulp-nunjucks-render

gulp-nunjucks-render is taking a lot of time to compile

I am using gulp-nunjucks-render for HTML templating.

The problem is, it is taking more than 3-4 minutes to compile. Even though I have only seven nunjucks templates.

'use strict';

var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer'),
    sass = require('gulp-sass'),
    minifyCSS = require('gulp-minify-css'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat'),
    connect = require('gulp-connect'),
    sourcemaps = require('gulp-sourcemaps'),
    nunjucksRender = require('gulp-nunjucks-render'),
    browserSync = require('browser-sync');

gulp.task('html', function(){
  gulp.src('build/*.html')
    .pipe(browserSync.reload({stream: true}))
});

gulp.task('nunjucksRender', function(){
  gulp.src('sources/html/**/*.+(html|nunjucks)')
  .pipe(nunjucksRender({
      path: ['sources/html/']
  }))
  .pipe(gulp.dest('build/'))
  .pipe(browserSync.reload({stream: true}))
});

gulp.task('css', function(){
  gulp.src('sources/scss/main.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'expanded'})
      .on('error', sass.logError)
    )
    .pipe(autoprefixer({
      browsers: ['last 50 versions']
    }))
    // .pipe(minifyCSS())
    .pipe(sourcemaps.write(''))
    .pipe(gulp.dest('build/css'))
    .pipe(browserSync.reload({stream: true}))
});

gulp.task('js', function() {
  gulp.src('sources/**/*.js',)
    // concat pulls all our files together before minifying them
    .pipe( concat('main.min.js') )
    // .pipe(uglify())
    .pipe(gulp.dest('build/js'))
    .pipe(browserSync.reload({stream: true}))
});

gulp.task('watch', function(){
  gulp.watch('build/*.html', ['html', 'nunjucksRender']);
  gulp.watch('sources/**/*.nunjucks', ['nunjucksRender']);
  gulp.watch('sources/scss/**/*.scss', ['css']);
  gulp.watch('sources/js/**/*.js', ['js']);
});

gulp.task('browserSync', function(){
  browserSync({
    server: {
      baseDir: 'build'
    }
  });
});

gulp.task('default', ['css', 'html']);

gulp.task('start', ['browserSync', 'watch']);

Here is how it looks like when compilation is finished enter image description here

Is there any gulp plugin to reduce compile time or compile only those files which are changed?

here is the github repo in case you need to see full file structure.

Solution

  • Ah.. I was watching .html and .nunjucks files for changes.. so when .nunjucks file compiles and creates .html file then again .html related task runs.