gulp: add task to concat sw-registrations and fix fixIndex task

gulpfile.js

@@ -5,7 +5,8 @@ const gulp = require('gulp');
 const runSequence = require('run-sequence');
 const useref = require('gulp-useref');
 const cleanCSS = require('gulp-clean-css');
-const rename = require("gulp-rename");
+const rename = require('gulp-rename');
+const concat = require('gulp-concat');
 const babelMinify = require('babel-minify');
 const child_process = require('child_process');
 const merge = require('merge-stream');
@@ -18,11 +19,11 @@ function minifyJs(fileName) {
 		`[${fileName}]: ${content.length}kb -> ${minifiedContent.length}kb`
 	);
 }
-gulp.task('runWebpack', function () {
+gulp.task('runWebpack', function() {
 	return child_process.execSync('yarn run build');
 });
 
-gulp.task('copyFiles', function () {
+gulp.task('copyFiles', function() {
 	return merge(
 		gulp
 			.src('src/lib/codemirror/theme/*')
@@ -32,18 +33,39 @@ gulp.task('copyFiles', function () {
 			.pipe(gulp.dest('app/lib/codemirror/mode')),
 		gulp.src('src/lib/transpilers/*').pipe(gulp.dest('app/lib/transpilers')),
 		gulp.src('src/lib/screenlog.js').pipe(gulp.dest('app/lib')),
-		gulp.src('src/preview.html').pipe(gulp.dest('app')),
+		gulp
-		gulp.src('src/detached-window.js').pipe(gulp.dest('app')),
+			.src([
-		gulp.src('src/icon-48.png').pipe(gulp.dest('app')),
+				'src/preview.html',
-		gulp.src('src/icon-128.png').pipe(gulp.dest('app')),
+				'src/detached-window.js',
-		gulp.src('src/patreon.png').pipe(gulp.dest('app')),
+				'src/icon-48.png',
-		gulp.src('build/bundle.*.js').pipe(rename("script.js")).pipe(gulp.dest('app')),
+				'src/icon-128.png',
-		gulp.src('build/vendor.*.js').pipe(rename("vendor.js")).pipe(gulp.dest('app')),
+				'src/patreon.png'
+			])
+			.pipe(gulp.dest('app')),
 
-		gulp.src('src/lib/codemirror/lib/codemirror.css').pipe(gulp.dest('build/lib/codemirror/lib')),
+		gulp
-		gulp.src('src/lib/codemirror/addon/hint/show-hint.css').pipe(gulp.dest('build/lib/codemirror/addon/hint')),
+			.src('build/bundle.*.js')
-		gulp.src('src/lib/codemirror/addon/fold/foldgutter.css').pipe(gulp.dest('build/lib/codemirror/addon/fold')),
+			.pipe(rename('script.js'))
-		gulp.src('src/lib/codemirror/addon/dialog/dialog.css').pipe(gulp.dest('build/lib/codemirror/addon/dialog')),
+			.pipe(gulp.dest('app')),
+		gulp
+			.src('build/vendor.*.js')
+			.pipe(rename('vendor.js'))
+			.pipe(gulp.dest('app')),
+
+		// Following CSS are copied to build/ folder where they'll be referenced by
+		// useRef plugin to concat into one.
+		gulp
+			.src('src/lib/codemirror/lib/codemirror.css')
+			.pipe(gulp.dest('build/lib/codemirror/lib')),
+		gulp
+			.src('src/lib/codemirror/addon/hint/show-hint.css')
+			.pipe(gulp.dest('build/lib/codemirror/addon/hint')),
+		gulp
+			.src('src/lib/codemirror/addon/fold/foldgutter.css')
+			.pipe(gulp.dest('build/lib/codemirror/addon/fold')),
+		gulp
+			.src('src/lib/codemirror/addon/dialog/dialog.css')
+			.pipe(gulp.dest('build/lib/codemirror/addon/dialog')),
 		gulp.src('src/lib/hint.min.css').pipe(gulp.dest('build/lib')),
 		gulp.src('src/lib/inlet.css').pipe(gulp.dest('build/lib')),
 		gulp.src('src/style.css').pipe(gulp.dest('build')),
@@ -59,43 +81,65 @@ gulp.task('copyFiles', function () {
 	);
 });
 
-gulp.task('useRef', function () {
+gulp.task('useRef', function() {
 	return gulp
 		.src('build/index.html')
 		.pipe(useref())
 		.pipe(gulp.dest('app'));
 });
 
-gulp.task('minify', function () {
+gulp.task('concatSwRegistration', function() {
-	// minifyJs('app/script.js');
+	gulp
+		.src(['app/service-worker-registration.js', 'app/script.js'])
+		.pipe(concat('script.js'))
+		.pipe(gulp.dest('app'));
+});
+
+gulp.task('minify', function() {
+	minifyJs('app/script.js');
 	// minifyJs('app/vendor.js');
 	minifyJs('app/lib/screenlog.js');
 
 	gulp
 		.src('app/*.css')
 		.pipe(
-			cleanCSS({
+			cleanCSS(
+				{
 					debug: true
-			}, details => {
+				},
+				details => {
 					console.log(`${details.name}: ${details.stats.originalSize}`);
 					console.log(`${details.name}: ${details.stats.minifiedSize}`);
-			})
+				}
+			)
 		)
 		.pipe(gulp.dest('app'));
 });
 
-gulp.task('fixIndex', function () {
+gulp.task('fixIndex', function() {
 	var contents = fs.readFileSync('build/index.html', 'utf8');
-	contents = contents.replace(/\<\!\-\- SCRIPT-TAGS \-\-\>[\S\s]*?\<\!\-\- END-SCRIPT-TAGS \-\-\>/, '<script defer src="vendor.js"></script><script defer src="script.js"></script>');
+	// Replace hashed-filename script tags with unhashed ones
+	contents = contents.replace(
+		/\<\!\-\- SCRIPT-TAGS \-\-\>[\S\s]*?\<\!\-\- END-SCRIPT-TAGS \-\-\>/,
+		'<script defer src="vendor.js"></script><script defer src="script.js"></script>'
+	);
+
+	// vendor.hash.js gets created outside our markers, so remove it
+	contents = contents.replace(
+		/\<script src="\/vendor\.[\S\s]*?\<\/script\>/,
+		''
+	);
+
 	fs.writeFileSync('build/index.html', contents, 'utf8');
 });
 
-gulp.task('generate-service-worker', function (callback) {
+gulp.task('generate-service-worker', function(callback) {
 	var swPrecache = require('sw-precache');
 	var rootDir = 'app';
 
 	swPrecache.write(
-		`${rootDir}/service-worker.js`, {
+		`${rootDir}/service-worker.js`,
+		{
 			staticFileGlobs: [
 				rootDir + '/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff}'
 			],
@@ -108,28 +152,29 @@ gulp.task('generate-service-worker', function (callback) {
 	);
 });
 
-gulp.task('cleanup', function () {
+gulp.task('cleanup', function() {
 	return child_process.execSync('rm -rf build');
 });
 
-gulp.task('release', function (callback) {
+gulp.task('release', function(callback) {
 	runSequence(
 		'runWebpack',
 		'copyFiles',
 		'fixIndex',
 		'useRef',
+		'concatSwRegistration',
 		'minify',
 		'generate-service-worker',
 		'cleanup',
-		function (error) {
+		function(error) {
 			if (error) {
 				console.log(error.message);
 			} else {
 				console.log('RELEASE FINISHED SUCCESSFULLY');
 			}
 			callback(error);
-		});
+		}
+	);
 });
 
-
 // gulp.task('default', ['generate-service-worker']);

package.json

@@ -31,6 +31,7 @@
 		"eslint-config-synacor": "^2.0.2",
 		"gulp": "^3.9.1",
 		"gulp-clean-css": "^3.9.2",
+		"gulp-concat": "^2.6.1",
 		"gulp-rename": "^1.3.0",
 		"gulp-uglify": "^3.0.0",
 		"gulp-useref": "^3.1.3",