Skip to content

[WIP] - Working Service-worker #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
May 6, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .travis.yml
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
language: node_js

node_js:
- "7.8"
- "7"

env:
- CXX=g++-4.8
Expand Down
9 changes: 5 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
```
Expand Down
87 changes: 79 additions & 8 deletions gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
// ============================================================
Expand All @@ -38,6 +40,13 @@ const htmlminConfig = {
minifyJS: true
};

const imageConfig = {
pngquant: true,
svgo: false,
concurrent: 10,
jpegoptim: true
};

// TASKS
// ============================================================

Expand Down Expand Up @@ -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'));
});

Expand All @@ -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...');
Expand All @@ -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', () => {
Expand All @@ -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']);
53 changes: 25 additions & 28 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
Expand All @@ -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"
}
}
2 changes: 1 addition & 1 deletion public/dist/css/style.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file added public/dist/img/social-banner.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 2 additions & 22 deletions public/dist/js/loadJS.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions public/dist/js/loadJS.js.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions public/dist/js/sw-registration.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading