Gulp + nunjucks

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var notify = require('gulp-notify');
var autoprefixer = require('autoprefixer');
var mqpacker = require('css-mqpacker');
var csswring = require('csswring');
var plumber = require('gulp-plumber');
var postcss = require('gulp-postcss');
var prettify = require('gulp-jsbeautifier');
var sourcemaps = require('gulp-sourcemaps');
var nunjucksRender = require('gulp-nunjucks-api');
var data = require('gulp-data');
var fs = require('fs');
var reload = browserSync.reload;


var src = {
  'scss': 'src/scss/**/*.scss',
  'css': 'dist/css/**/*.css',
  'js': 'dist/js/**/*.js',
  'data': 'data.json',
  'tpl': 'src/templates/**/*.html'
};

var processors = [
  autoprefixer(),
  mqpacker(),
  csswring()
];

gulp.task('tpl', function() {
  return gulp.src('src/templates/*.html')
    .pipe(plumber())
    .pipe(data(function(file) {
      jsonData = JSON.parse(fs.readFileSync(src.data));
      return jsonData;
    }))
    .pipe(nunjucksRender({
      src: 'src/templates/',
    }))
    .pipe(prettify({
      indent_size: 2,
      max_preserve_newlines: 2,
      preserve_newlines: false
    }))
    .on('error', notify.onError({
      message: function(error) {
        return error.message;
      }
    }))
    .pipe(gulp.dest('dist/'))
    .on('end', reload);
});

gulp.task('sass', function() {
  return gulp.src(src.scss)
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass())
    .on('error', notify.onError({
      message: function(error) {
        return error.message;
      }
    }))
    .pipe(postcss(processors))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('dist/css/'))
    .pipe(browserSync.stream({
      match: '**/*.css'
    }));
});

gulp.task('default', ['sass', 'tpl'], function() {
  browserSync.init({
    server: {
      baseDir: './dist'
    },
    // snippetOptions: {
    //   blacklist: ["/", "**/*"]
    // },
    // proxy: 'localhost:8000',
    ghostMode: false,
    notify: false,
    // open: 'external',
    open: false,
    ui: false,
    // xip: true,
    // tunnel: 'zaba'
    // tunnel: true

  });

  gulp.watch(src.js).on('change', reload);
  gulp.watch([src.tpl, src.data], ['tpl']);
  gulp.watch(src.scss, ['sass']);
});