Avoid reload after save

Why is LinkCSS required? In Drupal 8 it looks like CSS is included via link tag if you enable aggregation. Reason I ask is, it's clunky to have a theme require a module, because I can't force that dependency.

What would be great is if you could work with basic Drupal caching enabled, so that the local site is speedy. When everything is off, reloading on save can get progressively slower.

Perhaps it is the VM/config I am using, but practically nothing is forcing a browser reload except when I do browserSync.stream(); within the sass task, which is overkill.

Ok, I see now. Here is what I came up with, that only does a browserSync.reload when a twig template changes. I had to add run-sequence to it so it would execute the tasks synchronously. In Gulp 4 this would be changed to series.

Adding LinkCSS (bleh) makes this work. Enabling aggregation still does not work (no reload happens). Would be great to have it so you can work with that enabled. Still, this is a start.

Browser will reload on css/js changes (without specifying browserSync.reload), and be called directly when twig templates change (because internal cache needs to clear first, before browser will see the change).

var gulp = require('gulp');
var gutil = require('gulp-util');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var shell = require('gulp-shell');
var notify = require('gulp-notify');
var browserSync = require('browser-sync');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var fs = require("fs");
var runSequence = require('run-sequence');
var config = require("./example.config");

/**
 * If config.js exists, load that config for overriding certain values below.
 */
function loadConfig() {
  if (fs.existsSync(__dirname + "/./config.js")) {
    config = {};
    config = require("./config");
  }

  return config;
}

loadConfig();

/**
 * This task generates CSS from all SCSS files and compresses them down.
 */
gulp.task('sass', function () {
  return gulp.src('./scss/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({
      noCache: true,
      outputStyle: "compressed",
      lineNumbers: false,
      loadPath: './css/*',
      sourceMap: true
    })).on('error', function(error) {
      gutil.log(error);
      this.emit('end');
    })
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest('./css'))
    .pipe(notify({
      title: "SASS Compiled",
      message: "All SASS files have been recompiled to CSS.",
      onLast: true
    }));
});

/**
 * This task minifies javascript in the js/js-src folder and places them in the js directory.
 */
gulp.task('compress', function() {
  return gulp.src('./js/js-src/*.js')
    .pipe(sourcemaps.init())
    .pipe(uglify())
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest('./js'))
    .pipe(notify({
      title: "JS Minified",
      message: "All JS files in the theme have been minified.",
      onLast: true
    }));
});

/**
 * Defines a task that triggers a Drush cache clear (css-js).
 */
gulp.task('drush:cc', function () {
  if (!config.drush.enabled) {
    return;
  }

  return gulp.src('', {read: false})
    .pipe(shell([
      config.drush.alias.css_js
    ]))
    .pipe(notify({
      title: "Caches cleared",
      message: "Drupal CSS/JS caches cleared.",
      onLast: true
    }));
});

/**
 * Defines a task that triggers a Drush cache rebuild.
 */
gulp.task('drush:cr', function () {
  if (!config.drush.enabled) {
    return;
  }

  return gulp.src('', {read: false})
    .pipe(shell([
      config.drush.alias.cr
    ]))
    .pipe(notify({
      title: "Cache rebuilt",
      message: "Drupal cache rebuilt.",
      onLast: true
    }));
});

/**
 * Define a task to spawn Browser Sync.
 * Options are defaulted, but can be overridden within your config.js file.
 */
gulp.task('browser-sync', function() {
  browserSync.init({
    files: ['css/**/*.css', 'js/*.js'],
    port: config.browserSync.port,
    proxy: config.browserSync.hostname,
    open: config.browserSync.openAutomatically,
    reloadDelay: config.browserSync.reloadDelay,
    injectChanges: config.browserSync.injectChanges
  });
});

/**
 * Define a task to be called to instruct browser sync to reload.
 */
gulp.task('reload', function() {
  browserSync.reload();
});

/**
 * Combined tasks that are run synchronously specifically for twig template changes.
 */
gulp.task('flush', function() {
  runSequence('drush:cr', 'reload');
});

/**
 * Defines the watcher task.
 */
gulp.task('watch', function() {
  // watch scss for changes and clear drupal theme cache on change
  gulp.watch(['scss/**/*.scss'], ['sass', 'drush:cc']);

  // watch js for changes and clear drupal theme cache on change
  gulp.watch(['js-src/**/*.js'], ['compress', 'drush:cc']);

  // If user has specified an override, rebuild Drupal cache
  if (!config.twig.useCache) {
    gulp.watch(['templates/**/*.html.twig'], ['flush']);
  }
});

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

What is kind of murky in Drupal 8 (or at least using Drush) is that calling drush cc css-js says it clears the css/js cache, but reloading the page does not show the changes with aggregation on. With aggregation on, only drush cr seems to make the changes appear on reload, which is far too heavy to expect when you're writing sass and saving every few lines. Even though pages are set to not cache for anonymous users, it seems that they are.

As far as the options go, the reason they are overridable with a local file is for teams working on a theme who may be working in different environments. Some may want to flush caches some may not, some may have different drush aliases than others, some may not want drush to do anything. 'config.js' should be git ignored, so it doesn't make its way back to the repo.

I am able to copy example.config.js to config.js and make changes, restart gulp and gulp uses those settings. What part of it is not working for you?

Maybe it is just me, I keep all caching on while working so I am not caught by surprise later on when I enable it.

Yeah, that would be just the reason for that, so while defaults are provided in example.config.js, others can copy and tailor it to their needs without the repo dictating settings and overwriting them on each update.

Changes are still pending to address browser-sync saving and injecting changes to listening browsers for 8.x.

Let's continue the discussion here: #2710181: Update BrowserSync configuration to inject changes to the browser