Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ef911db

Browse files
Merge pull request #44 from PracticeJavaScript/sw
[WIP] - Working Service-worker
2 parents 53d1eef + b5b9e27 commit ef911db

26 files changed

+541
-10929
lines changed

‎.travis.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
language: node_js
22

33
node_js:
4-
- "7.8"
4+
- "7"
55

66
env:
77
- CXX=g++-4.8

‎README.md

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,13 @@
1818

1919
## How To Install Locally
2020
```bash
21-
npm i -g yarn # if you don't have yarn yet
22-
yarn global add firebase-tools # if you don't have firebase-tools yet
21+
npm i -g pnpm # if you don't have pnpm yet
22+
pnpm i -g firebase-tools # if you don't have firebase-tools yet
23+
pnpm i -g gulp gulp-cli # if you don't have gulp yet
2324
git clone https://github.com/PracticeJavaScript/practicejavascript.com.git
2425
cd practicejavascript.com
25-
yarn install
26-
yarn run watch
26+
pnpm i
27+
gulp # watch is default gulp task
2728
# Another tab
2829
firebase serve
2930
```

‎gulpfile.js

Lines changed: 79 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ const svgo = require('gulp-svgo');
1616
const sass = require('gulp-sass');
1717
const livereload = require('gulp-livereload');
1818
const htmlmin = require('gulp-htmlmin');
19+
const swPrecache = require('sw-precache');
20+
const image = require('gulp-image');
1921

2022
// CONFIG
2123
// ============================================================
@@ -38,6 +40,13 @@ const htmlminConfig = {
3840
minifyJS: true
3941
};
4042

43+
const imageConfig = {
44+
pngquant: true,
45+
svgo: false,
46+
concurrent: 10,
47+
jpegoptim: true
48+
};
49+
4150
// TASKS
4251
// ============================================================
4352

@@ -105,7 +114,12 @@ cssWatcher.on('change', event => {
105114
// ============================================================
106115

107116
gulp.task('js', () => {
108-
return gulp.src('./src/js/loadJS.js')
117+
return gulp.src(['./src/js/*.js', '!./src/js/index.js'])
118+
.pipe(sourcemaps.init({
119+
loadMaps: true
120+
}))
121+
.pipe(uglify(uglifyConf))
122+
.pipe(sourcemaps.write('./'))
109123
.pipe(gulp.dest('./public/dist/js'));
110124
});
111125

@@ -118,13 +132,22 @@ jsWatcher.on('change', event => {
118132
// IMG
119133
// ============================================================
120134

121-
gulp.task('img', () => {
122-
return gulp.src('./src/img/*.svg')
135+
gulp.task('img-icons', () => {
136+
return gulp.src('./src/*.svg')
123137
.pipe(svgo())
138+
.pipe(gulp.dest('./public/'));
139+
});
140+
141+
gulp.task('img-images', () => {
142+
return gulp.src('./src/img/*.{svg,png,jpg}')
143+
.pipe(svgo())
144+
.pipe(image(imageConfig))
124145
.pipe(gulp.dest('./public/dist/img'));
125146
});
126147

127-
const imgWatcher = gulp.watch('src/img/*.svg', ['img']);
148+
gulp.task('img', ['img-icons', 'img-images']);
149+
150+
const imgWatcher = gulp.watch('src/**/*.{svg,png}', ['img']);
128151

129152
imgWatcher.on('change', event => {
130153
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
@@ -134,21 +157,69 @@ imgWatcher.on('change', event => {
134157
// ============================================================
135158

136159
gulp.task('html', () => {
137-
return gulp.src('./src/html/*.html')
160+
return gulp.src('./src/*.html')
138161
.pipe(htmlmin(htmlminConfig))
139162
.pipe(gulp.dest('./public/')); // Output goes to root of /public, as per firebase hosting
140163
});
141164

142-
const htmlWatcher = gulp.watch('src/html/*.html', ['html']);
165+
const htmlWatcher = gulp.watch('src/*.html', ['html']);
143166

144167
htmlWatcher.on('change', event => {
145168
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
146169
});
147170

171+
// SERVICE WORKER
172+
// ============================================================
173+
174+
const rootDir = './public';
175+
gulp.task('generate-service-worker', callback => {
176+
swPrecache.write(`./src/service-worker.js`, {
177+
staticFileGlobs: [
178+
`${rootDir}/dist/**/*.{js,css,png,jpg,gif,svg,eot,ttf,woff}`,
179+
`${rootDir}/launcher-icon-*.{png,svg}`,
180+
`${rootDir}/index.html`
181+
],
182+
stripPrefix: rootDir
183+
}, callback);
184+
});
185+
186+
gulp.task('optimize-service-worker', ['generate-service-worker'], () => {
187+
return gulp.src(`./src/service-worker.js`)
188+
.pipe(sourcemaps.init({
189+
loadMaps: true
190+
}))
191+
.pipe(uglify(uglifyConf))
192+
.pipe(sourcemaps.write('./'))
193+
.pipe(gulp.dest('./public'));
194+
});
195+
196+
// Do all service-worker things
197+
gulp.task('service-worker', ['generate-service-worker', 'optimize-service-worker']);
198+
199+
const swWatcher = gulp.watch([rootDir + '/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff}'], ['service-worker']);
200+
201+
swWatcher.on('change', event => {
202+
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
203+
});
204+
205+
// MANIFEST
206+
// ============================================================
207+
208+
gulp.task('manifest', () => {
209+
return gulp.src('./src/manifest.json')
210+
.pipe(gulp.dest('./public/'));
211+
});
212+
213+
const manifestWatcher = gulp.watch('src/manifest.json', ['manifest']);
214+
215+
manifestWatcher.on('change', event => {
216+
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
217+
});
218+
148219
// BUILD
149220
// ============================================================
150221

151-
gulp.task('build', () => {
222+
gulp.task('build', ['css','js','img','html'],() => {
152223
return compile();
153224
});
154225
gulp.task('watch', () => {
@@ -160,4 +231,4 @@ function glob() {
160231
return 'typeof self !== "undefined" ? self : ' + 'typeof window !== "undefined" ? window : {}'; // eslint-disable-line no-useless-concat
161232
}
162233

163-
gulp.task('default', ['watch']);
234+
gulp.task('default', ['build','manifest','service-worker','watch']);

‎package.json

Lines changed: 25 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,16 @@
44
"description": "practice javascript",
55
"main": "index.js",
66
"engines": {
7-
"node": "7.8"
7+
"node": "7"
88
},
99
"scripts": {
10-
"test": "xo",
10+
"test": "./node_modules/.bin/xo",
1111
"build": "./node_modules/.bin/gulp build",
12-
"watch": "./node_modules/.bin/gulp watch",
13-
"precommit": "yarn test",
14-
"prepush": "yarn test"
12+
"watch": "./node_modules/.bin/gulp watch"
1513
},
1614
"browserslist": [
1715
"> 1%",
18-
"last 1 versions"
16+
"last 2 versions"
1917
],
2018
"xo": {
2119
"env": [
@@ -32,47 +30,46 @@
3230
},
3331
"ignore": [
3432
"src/js/loadJS.js",
33+
"src/js/sw-registration.js",
34+
"src/service-worker.js",
3535
"public/**/*"
3636
]
3737
},
3838
"author": "Jakob Anderson",
3939
"license": "MIT",
40-
"lint-staged": {
41-
"src/*": []
42-
},
4340
"dependencies": {
41+
"chai": "^3.5.0",
42+
"localforage": "^1.5.0"
43+
},
44+
"devDependencies": {
4445
"autoprefixer": "^6.7.7",
4546
"ava": "^0.18.2",
4647
"babel-core": "^6.24.0",
48+
"babel-preset-env": "^1.4.0",
4749
"babel-preset-es2015": "^6.24.1",
50+
"babel-preset-es2017": "^6.24.1",
51+
"babel-preset-latest": "^6.24.1",
4852
"babelify": "^7.3.0",
53+
"browserify": "^14.3.0",
4954
"cssnano": "^3.10.0",
50-
"gulp": "^3.9.1",
5155
"gulp-htmlmin": "^3.0.0",
56+
"gulp-image": "^2.8.0",
57+
"gulp-livereload": "^3.8.1",
5258
"gulp-postcss": "^6.4.0",
53-
"gulp-sourcemaps": "^2.5.1",
59+
"gulp-sass": "^3.1.0",
60+
"gulp-sourcemaps": "^2.6.0",
61+
"gulp-svgo": "^1.0.3",
5462
"gulp-uglify": "^2.1.2",
5563
"gulp-util": "^3.0.8",
56-
"localforage": "^1.5.0",
64+
"gulp": "^3.9.1",
65+
"husky": "^0.13.3",
66+
"lint-staged": "^3.4.0",
5767
"rollup-stream": "^1.19.0",
58-
"static-eval": "^1.1.1",
68+
"sw-precache": "^5.1.1",
5969
"uglifyify": "^3.0.4",
6070
"vinyl-buffer": "^1.0.0",
6171
"vinyl-source-stream": "^1.1.0",
62-
"xo": "^0.18.1"
63-
},
64-
"devDependencies": {
65-
"babel-preset-env": "^1.4.0",
66-
"babel-preset-es2017": "^6.24.1",
67-
"babel-preset-latest": "^6.24.1",
68-
"browserify": "^14.1.0",
69-
"chai": "^3.5.0",
70-
"gulp-htmlmin": "^3.0.0",
71-
"gulp-livereload": "^3.8.1",
72-
"gulp-sass": "^3.1.0",
73-
"gulp-svgo": "^1.0.3",
74-
"husky": "^0.13.3",
75-
"lint-staged": "^3.4.0",
76-
"watchify": "^3.9.0"
72+
"watchify": "^3.9.0",
73+
"xo": "^0.18.2"
7774
}
7875
}

‎public/dist/css/style.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/dist/img/social-banner.png

28.2 KB
Loading[フレーム]

‎public/dist/js/loadJS.js

Lines changed: 2 additions & 22 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/dist/js/loadJS.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/dist/js/sw-registration.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /