Move browsersync snippet to above </body> to fix recent Shopify change

Author: jonathanmoore

lib/tasks/deploy-sync.js

@@ -1,13 +1,13 @@
-'use strict';
 
-var gulp = require('gulp');
-var browserSync = require('browser-sync').create();
-var fs = require('fs');
-var yaml = require('js-yaml');
-var debug = require('debug')('slate-tools:deploy');
 
-var config = require('./includes/config.js');
-var messages = require('./includes/messages.js');
+const gulp = require('gulp');
+const browserSync = require('browser-sync').create();
+const fs = require('fs');
+const yaml = require('js-yaml');
+const debug = require('debug')('slate-tools:deploy');
+
+const config = require('./includes/config.js');
+const messages = require('./includes/messages.js');
 
 /**
  * Starts a [browserSync]{@link https://www.browsersync.io/} session proxying your
@@ -17,24 +17,24 @@ var messages = require('./includes/messages.js');
  * @memberof slate-cli.tasks.deploy
  * @static
  */
-gulp.task('deploy:sync-init', function () {
+gulp.task('deploy:sync-init', () => {
   if (browserSync.active) {
     browserSync.exit();
   } else {
     fs.writeFileSync(config.deployLog, ''); // eslint-disable-line no-sync
   }
 
-  var file = fs.readFileSync(config.tkConfig, 'utf8'); // eslint-disable-line no-sync
-  var tkConfig = yaml.safeLoad(file);
-  var queryStringComponents = [];
-  var environment = config.environment.split(/\s*,\s*|\s+/)[0];
+  const file = fs.readFileSync(config.tkConfig, 'utf8'); // eslint-disable-line no-sync
+  const tkConfig = yaml.safeLoad(file);
+  const queryStringComponents = [];
+  const environment = config.environment.split(/\s*,\s*|\s+/)[0];
 
-  var envObj = tkConfig[environment];
-  var proxyTarget = 'https://' + envObj.store;
+  const envObj = tkConfig[environment];
+  let proxyTarget = `https://${envObj.store}`;
 
   // break theme preview cache by always setting a preview parameter
-  var previewParam = envObj.theme_id === 'live' ? '' : envObj.theme_id;
-  proxyTarget += '?preview_theme_id=' + previewParam;
+  const previewParam = envObj.theme_id === 'live' ? '' : envObj.theme_id;
+  proxyTarget += `?preview_theme_id=${previewParam}`;
 
   debug(proxyTarget);
 
@@ -48,11 +48,19 @@ gulp.task('deploy:sync-init', function () {
     proxy: {
       target: proxyTarget,
       middleware: function middleware(req, res, next) {
-        var prefix = req.url.indexOf('?') > -1 ? '&' : '?';
+        const prefix = req.url.indexOf('?') > -1 ? '&' : '?';
         req.url += prefix + queryStringComponents.join('&');
         next();
-      }
-    }
+      },
+    },
+    snippetOptions: {
+      rule: {
+        match: /<\/body>/i,
+        fn: function(snippet, match) {
+          return snippet + match;
+        },
+      },
+    },
   });
 });
 
@@ -64,10 +72,10 @@ gulp.task('deploy:sync-init', function () {
  * @memberof slate-cli.tasks.watch
  * @static
  */
-gulp.task('deploy:sync-reload', ['deploy:sync-init'], function () {
+gulp.task('deploy:sync-reload', ['deploy:sync-init'], () => {
   gulp.watch(config.tkConfig, ['deploy:sync-init']);
-  gulp.watch(config.deployLog, function () {
+  gulp.watch(config.deployLog, () => {
     messages.logTransferDone();
     browserSync.reload();
   });
-});
+});

src/tasks/deploy-sync.js

@@ -51,6 +51,14 @@ gulp.task('deploy:sync-init', () => {
         next();
       },
     },
+    snippetOptions: {
+      rule: {
+        match: /<\/body>/i,
+        fn: function (snippet, match) {
+            return snippet + match;
+        }
+      }
+    }
   });
 });