Correct syntax when using with gulp-data?

[j-greig]

Loving this Gulp/Twig thing :)

One question... I'm loading some data from an external file which works fine, but it's now compiling to .twig files instead of .html which I don't want.

How do I set the extname to .html inside the compile function AND call the external json file?

(Sorry new to Gulp and can't figure out the syntax)

var swig = require('gulp-swig');
var data = require('gulp-data');
var livereload = require('gulp-livereload');
var fs = require('fs');

gulp.task('compile', function () {
    'use strict';
    var twig = require('gulp-twig');
    return gulp.src(['./src/*.twig', '!./src/_data.json', '!./src/layout.twig'])
      .pipe(data(function(file) {
        return JSON.parse(fs.readFileSync('./src/_data.json'));
      }))
      .pipe(gulp.dest('./web'))
      .pipe(livereload());
});

gulp.task('watch', function() {
  livereload.listen();
  gulp.watch('./src/**/*.twig', ['compile']);
  gulp.watch('./src/_data.json', ['compile']);
});```

[j-greig]

Ha, figured it out right after posting this 🦆

In case it helps someone else...

var swig = require('gulp-swig');
var data = require('gulp-data');
var livereload = require('gulp-livereload');
var fs = require('fs');

gulp.task('compile', function () {
    'use strict';
    var twig = require('gulp-twig');
    return gulp.src(['./src/*.twig', '!./src/_data.json', '!./src/layout.twig'])
      .pipe(data(function(file) {
        return JSON.parse(fs.readFileSync('./src/_data.json'));
      }))
      .pipe(twig({
            extname: '.html'
        }))
      .pipe(gulp.dest('./web'))
      .pipe(livereload());
});

gulp.task('watch', function() {
  livereload.listen();
  gulp.watch('./src/**/*.twig', ['compile']);
  gulp.watch('./src/_data.json', ['compile']);
});

gulp.task('default', ['watch']);

[olets]

Glad you figured it out 👍

Stackoverflow's the best place for getting up to speed on Gulp. But since we're here, a couple quick thoughts on your Gulpfile:

• I'd move the var twig = … up to the top with your other requires — no reason to set it more than once, plus you'll be able to quickly eyeball what packages your Gulpfile requires
• Because './src/*.twig' doesn't match './src/_data.json' you can cut compile's src down to

  gulp.src(['./src/*.twig', '!./src/layout.twig'])

• Since both watches are triggering the same task, you can do

  gulp.watch(['./src/*/.twig','./src/_data.json'], ['compile']);

• Note that the gulp.task('x', function() {…}); form will work fine with Gulp 3, but it's recommended to switch over to the Gulp 4

  function x() {…}
  gulp.task('x',x);

  form for 3.9.1+forwards compatibility. (The … in those two will almost certainly be identical.) See the official examples for more info.

[j-greig]

Wow, thanks for the pointers! Wasn't expecting that : )