Merge pull request #44 from PracticeJavaScript/sw

[WIP] - Working Service-worker

Author: spacerockzero

.travis.yml

@@ -1,7 +1,7 @@
 language: node_js
 
 node_js:
-  - "7.8"
+  - "7"
 
 env:
   - CXX=g++-4.8

README.md

@@ -18,12 +18,13 @@
 
 ## How To Install Locally
 ```bash
-npm i -g yarn # if you don't have yarn yet
-yarn global add firebase-tools # if you don't have firebase-tools yet
+npm i -g pnpm # if you don't have pnpm yet
+pnpm i -g firebase-tools # if you don't have firebase-tools yet
+pnpm i -g gulp gulp-cli # if you don't have gulp yet
 git clone https://github.com/PracticeJavaScript/practicejavascript.com.git
 cd practicejavascript.com
-yarn install
-yarn run watch
+pnpm i
+gulp # watch is default gulp task
 # Another tab
 firebase serve
 ```

gulpfile.js

@@ -16,6 +16,8 @@ const svgo = require('gulp-svgo');
 const sass = require('gulp-sass');
 const livereload = require('gulp-livereload');
 const htmlmin = require('gulp-htmlmin');
+const swPrecache = require('sw-precache');
+const image = require('gulp-image');
 
 // CONFIG
 // ============================================================
@@ -38,6 +40,13 @@ const htmlminConfig = {
   minifyJS: true
 };
 
+const imageConfig = {
+  pngquant: true,
+  svgo: false,
+  concurrent: 10,
+  jpegoptim: true
+};
+
 // TASKS
 // ============================================================
 
@@ -105,7 +114,12 @@ cssWatcher.on('change', event => {
 // ============================================================
 
 gulp.task('js', () => {
-  return gulp.src('./src/js/loadJS.js')
+  return gulp.src(['./src/js/*.js', '!./src/js/index.js'])
+    .pipe(sourcemaps.init({
+      loadMaps: true
+    }))
+    .pipe(uglify(uglifyConf))
+    .pipe(sourcemaps.write('./'))
     .pipe(gulp.dest('./public/dist/js'));
 });
 
@@ -118,13 +132,22 @@ jsWatcher.on('change', event => {
 // IMG
 // ============================================================
 
-gulp.task('img', () => {
-  return gulp.src('./src/img/*.svg')
+gulp.task('img-icons', () => {
+  return gulp.src('./src/*.svg')
     .pipe(svgo())
+    .pipe(gulp.dest('./public/'));
+});
+
+gulp.task('img-images', () => {
+  return gulp.src('./src/img/*.{svg,png,jpg}')
+    .pipe(svgo())
+    .pipe(image(imageConfig))
     .pipe(gulp.dest('./public/dist/img'));
 });
 
-const imgWatcher = gulp.watch('src/img/*.svg', ['img']);
+gulp.task('img', ['img-icons', 'img-images']);
+
+const imgWatcher = gulp.watch('src/**/*.{svg,png}', ['img']);
 
 imgWatcher.on('change', event => {
   console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
@@ -134,21 +157,69 @@ imgWatcher.on('change', event => {
 // ============================================================
 
 gulp.task('html', () => {
-  return gulp.src('./src/html/*.html')
+  return gulp.src('./src/*.html')
     .pipe(htmlmin(htmlminConfig))
     .pipe(gulp.dest('./public/')); // Output goes to root of /public, as per firebase hosting
 });
 
-const htmlWatcher = gulp.watch('src/html/*.html', ['html']);
+const htmlWatcher = gulp.watch('src/*.html', ['html']);
 
 htmlWatcher.on('change', event => {
   console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
 });
 
+// SERVICE WORKER
+// ============================================================
+
+const rootDir = './public';
+gulp.task('generate-service-worker', callback => {
+  swPrecache.write(`./src/service-worker.js`, {
+    staticFileGlobs: [
+      `${rootDir}/dist/**/*.{js,css,png,jpg,gif,svg,eot,ttf,woff}`,
+      `${rootDir}/launcher-icon-*.{png,svg}`,
+      `${rootDir}/index.html`
+    ],
+    stripPrefix: rootDir
+  }, callback);
+});
+
+gulp.task('optimize-service-worker', ['generate-service-worker'], () => {
+  return gulp.src(`./src/service-worker.js`)
+    .pipe(sourcemaps.init({
+      loadMaps: true
+    }))
+    .pipe(uglify(uglifyConf))
+    .pipe(sourcemaps.write('./'))
+    .pipe(gulp.dest('./public'));
+});
+
+// Do all service-worker things
+gulp.task('service-worker', ['generate-service-worker', 'optimize-service-worker']);
+
+const swWatcher = gulp.watch([rootDir + '/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff}'], ['service-worker']);
+
+swWatcher.on('change', event => {
+  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
+});
+
+// MANIFEST
+// ============================================================
+
+gulp.task('manifest', () => {
+  return gulp.src('./src/manifest.json')
+    .pipe(gulp.dest('./public/'));
+});
+
+const manifestWatcher = gulp.watch('src/manifest.json', ['manifest']);
+
+manifestWatcher.on('change', event => {
+  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
+});
+
 // BUILD
 // ============================================================
 
-gulp.task('build', () => {
+gulp.task('build', ['css', 'js', 'img', 'html'], () => {
   return compile();
 });
 gulp.task('watch', () => {
@@ -160,4 +231,4 @@ function glob() {
   return 'typeof self !== "undefined" ? self : ' + 'typeof window !== "undefined" ? window : {}'; // eslint-disable-line no-useless-concat
 }
 
-gulp.task('default', ['watch']);
+gulp.task('default', ['build', 'manifest', 'service-worker', 'watch']);

package.json

@@ -4,18 +4,16 @@
   "description": "practice javascript",
   "main": "index.js",
   "engines": {
-    "node": "7.8"
+    "node": "7"
   },
   "scripts": {
-    "test": "xo",
+    "test": "./node_modules/.bin/xo",
     "build": "./node_modules/.bin/gulp build",
-    "watch": "./node_modules/.bin/gulp watch",
-    "precommit": "yarn test",
-    "prepush": "yarn test"
+    "watch": "./node_modules/.bin/gulp watch"
   },
   "browserslist": [
     "> 1%",
-    "last 1 versions"
+    "last 2 versions"
   ],
   "xo": {
     "env": [
@@ -32,47 +30,46 @@
     },
     "ignore": [
       "src/js/loadJS.js",
+      "src/js/sw-registration.js",
+      "src/service-worker.js",
       "public/**/*"
     ]
   },
   "author": "Jakob Anderson",
   "license": "MIT",
-  "lint-staged": {
-    "src/*": []
-  },
   "dependencies": {
+    "chai": "^3.5.0",
+    "localforage": "^1.5.0"
+  },
+  "devDependencies": {
     "autoprefixer": "^6.7.7",
     "ava": "^0.18.2",
     "babel-core": "^6.24.0",
+    "babel-preset-env": "^1.4.0",
     "babel-preset-es2015": "^6.24.1",
+    "babel-preset-es2017": "^6.24.1",
+    "babel-preset-latest": "^6.24.1",
     "babelify": "^7.3.0",
+    "browserify": "^14.3.0",
     "cssnano": "^3.10.0",
-    "gulp": "^3.9.1",
     "gulp-htmlmin": "^3.0.0",
+    "gulp-image": "^2.8.0",
+    "gulp-livereload": "^3.8.1",
     "gulp-postcss": "^6.4.0",
-    "gulp-sourcemaps": "^2.5.1",
+    "gulp-sass": "^3.1.0",
+    "gulp-sourcemaps": "^2.6.0",
+    "gulp-svgo": "^1.0.3",
     "gulp-uglify": "^2.1.2",
     "gulp-util": "^3.0.8",
-    "localforage": "^1.5.0",
+    "gulp": "^3.9.1",
+    "husky": "^0.13.3",
+    "lint-staged": "^3.4.0",
     "rollup-stream": "^1.19.0",
-    "static-eval": "^1.1.1",
+    "sw-precache": "^5.1.1",
     "uglifyify": "^3.0.4",
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0",
-    "xo": "^0.18.1"
-  },
-  "devDependencies": {
-    "babel-preset-env": "^1.4.0",
-    "babel-preset-es2017": "^6.24.1",
-    "babel-preset-latest": "^6.24.1",
-    "browserify": "^14.1.0",
-    "chai": "^3.5.0",
-    "gulp-htmlmin": "^3.0.0",
-    "gulp-livereload": "^3.8.1",
-    "gulp-sass": "^3.1.0",
-    "gulp-svgo": "^1.0.3",
-    "husky": "^0.13.3",
-    "lint-staged": "^3.4.0",
-    "watchify": "^3.9.0"
+    "watchify": "^3.9.0",
+    "xo": "^0.18.2"
   }
 }