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 1130d2e

Browse files
working manifest and stuff
1 parent 5be0870 commit 1130d2e

16 files changed

+599
-18
lines changed

‎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: 38 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const sass = require('gulp-sass');
1717
const livereload = require('gulp-livereload');
1818
const htmlmin = require('gulp-htmlmin');
1919
const swPrecache = require('sw-precache');
20+
const image = require('gulp-image');
2021

2122
// CONFIG
2223
// ============================================================
@@ -39,6 +40,12 @@ const htmlminConfig = {
3940
minifyJS: true
4041
};
4142

43+
const imageConfig = {
44+
pngquant: true,
45+
concurrent: 10,
46+
jpegoptim: true
47+
};
48+
4249
// TASKS
4350
// ============================================================
4451

@@ -124,13 +131,22 @@ jsWatcher.on('change', event => {
124131
// IMG
125132
// ============================================================
126133

127-
gulp.task('img', () => {
128-
return gulp.src('./src/img/*.svg')
134+
gulp.task('img-icons', () => {
135+
return gulp.src('./src/*.svg')
129136
.pipe(svgo())
137+
.pipe(gulp.dest('./public/'));
138+
});
139+
140+
gulp.task('img-images', () => {
141+
return gulp.src('./src/img/*.{svg,png,jpg}')
142+
.pipe(svgo())
143+
.pipe(image(imageConfig))
130144
.pipe(gulp.dest('./public/dist/img'));
131145
});
132146

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

135151
imgWatcher.on('change', event => {
136152
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
@@ -140,12 +156,12 @@ imgWatcher.on('change', event => {
140156
// ============================================================
141157

142158
gulp.task('html', () => {
143-
return gulp.src('./src/html/*.html')
159+
return gulp.src('./src/*.html')
144160
.pipe(htmlmin(htmlminConfig))
145161
.pipe(gulp.dest('./public/')); // Output goes to root of /public, as per firebase hosting
146162
});
147163

148-
const htmlWatcher = gulp.watch('src/html/*.html', ['html']);
164+
const htmlWatcher = gulp.watch('src/*.html', ['html']);
149165

150166
htmlWatcher.on('change', event => {
151167
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
@@ -159,14 +175,15 @@ gulp.task('generate-service-worker', callback => {
159175
swPrecache.write(`./src/service-worker.js`, {
160176
staticFileGlobs: [
161177
`${rootDir}/dist/**/*.{js,css,png,jpg,gif,svg,eot,ttf,woff}`,
178+
`${rootDir}/launcher-icon-*.{png,svg}`,
162179
`${rootDir}/index.html`
163180
],
164181
stripPrefix: rootDir
165182
}, callback);
166183
});
167184

168185
gulp.task('optimize-service-worker', ['generate-service-worker'], () => {
169-
gulp.src(`./src/service-worker.js`)
186+
returngulp.src(`./src/service-worker.js`)
170187
.pipe(sourcemaps.init({
171188
loadMaps: true
172189
}))
@@ -184,6 +201,20 @@ swWatcher.on('change', event => {
184201
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
185202
});
186203

204+
// MANIFEST
205+
// ============================================================
206+
207+
gulp.task('manifest', () => {
208+
return gulp.src('./src/manifest.json')
209+
.pipe(gulp.dest('./public/'));
210+
});
211+
212+
const manifestWatcher = gulp.watch('src/manifest.json', ['manifest']);
213+
214+
manifestWatcher.on('change', event => {
215+
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
216+
});
217+
187218
// BUILD
188219
// ============================================================
189220

@@ -199,4 +230,4 @@ function glob() {
199230
return 'typeof self !== "undefined" ? self : ' + 'typeof window !== "undefined" ? window : {}'; // eslint-disable-line no-useless-concat
200231
}
201232

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

‎package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
},
1616
"browserslist": [
1717
"> 1%",
18-
"last 1 versions"
18+
"last 2 versions"
1919
],
2020
"xo": {
2121
"env": [
@@ -71,9 +71,10 @@
7171
"babelify": "^7.3.0",
7272
"browserify": "^14.3.0",
7373
"chai": "^3.5.0",
74-
"gulp-htmlmin": "^3.0.0",
7574
"cssnano": "^3.10.0",
7675
"gulp": "^3.9.1",
76+
"gulp-htmlmin": "^3.0.0",
77+
"gulp-image": "^2.8.0",
7778
"gulp-livereload": "^3.8.1",
7879
"gulp-postcss": "^6.4.0",
7980
"gulp-sass": "^3.1.0",

‎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/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!DOCTYPE html><html lang="en"><head><title>Practice JavaScript</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"></head><body><style>body{opacity:0;transition:opacity .2s ease-in-out}</style><heading class="site-heading"><div class="container"><span><img class="logo" src="./dist/img/monitor.svg" alt="Logo" height="80px"><h1>Practice JavaScript!</h1></span><nav class="controls"><div><img id="prev-problem" class="prev-problem" src="./dist/img/back.svg" alt="Previous problem" title="Previous problem (CMD + SHIFT + RETURN or CTRL + SHIFT + ENTER)" height="80"><div class="title">Back</div></div><div><img id="shuffle-problems" class="shuffle-problems" src="./dist/img/shuffle.svg" alt="Shuffle problems" title="Shuffle problems" height="80"><div class="title">Shuffle</div></div><div><img id="next-problem" class="next-problem" src="./dist/img/next.svg" alt="Next problem" title="Next problem (CMD + RETURN or CTRL + ENTER)" height="80"><div class="title">Next</div></div></nav></div></heading><div class="container"><main><div class="problem-group"><div id="problem" class="problem">&zwnj;</div></div><div id="answer" class="answer"><!--TODO: add ability to peek answer, while giving up any points for the question.--></div><div class="code-and-tests"><div id="test-area" class="test-area"><div id="test-total" class="test-total"></div><div id="test-suite" class="test-suite"></div><div id="assert-console" class="assert-console console monospace"><h4>TEST ERRORS</h4><div id="assert-output"></div></div></div><div class="code-and-eval-console"><textarea id="code" class="code monospace" rows="10" autofocus autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea><div id="eval-console" class="eval-console console monospace"><h4>CODE OUTPUT</h4><div id="eval-output"></div></div></div></div></main></div><!-- practice-javascript-bottom-banner --><div class="ads-bottom"><ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-4039212144643368" data-ad-slot="9721927778"></ins></div><footer><div class="copyright">© 2017 <a href="https://twitter.com/jakob_anderson">Jakob Anderson</a></div><div class="issues"><a href="https://github.com/PracticeJavaScript/practicejavascript.com/issues">Problems? Leave an issue on github</a></div><div class="icon-license">Icons designed by <a href="http://www.flaticon.com/authors/gregor-cresnar">Gregor Cresnar</a> from Flaticon</div></footer><link href="./dist/css/style.css" rel="stylesheet"><script src="./dist/js/bundle.min.js"></script><script src="./dist/js/loadJS.js"></script><script src="./dist/js/sw-registration.js"></script><!-- DEFER AND ASYNC ALL THE OTHER GARBAGE THAT ISN'T MY APP --><script>"practicejavascript.com"===window.location.host&&window.addEventListener("load",function(){loadJS("//www.google-analytics.com/analytics.js",function(){ga("create","UA-97392792-1","auto"),ga("send","pageview")}),loadJS("//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",function(){(adsbygoogle=window.adsbygoogle||[]).push({})})})</script></body></html>
1+
<!DOCTYPE html><html lang="en"><head><title>Practice JavaScript</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="theme-color" content="#0C141F"><link rel="manifest" href="/manifest.json"><link rel="icon" href="/launch-icon.svg"></head><body><style>body{opacity:0;transition:opacity .2s ease-in-out}</style><heading class="site-heading"><div class="container"><span><img class="logo" src="./dist/img/monitor.svg" alt="Logo" height="80px"><h1>Practice JavaScript!</h1></span><nav class="controls"><div><img id="prev-problem" class="prev-problem" src="./dist/img/back.svg" alt="Previous problem" title="Previous problem (CMD + SHIFT + RETURN or CTRL + SHIFT + ENTER)" height="80"><div class="title">Back</div></div><div><img id="shuffle-problems" class="shuffle-problems" src="./dist/img/shuffle.svg" alt="Shuffle problems" title="Shuffle problems" height="80"><div class="title">Shuffle</div></div><div><img id="next-problem" class="next-problem" src="./dist/img/next.svg" alt="Next problem" title="Next problem (CMD + RETURN or CTRL + ENTER)" height="80"><div class="title">Next</div></div></nav></div></heading><div class="container"><main><div class="problem-group"><div id="problem" class="problem">&zwnj;</div></div><div id="answer" class="answer"><!--TODO: add ability to peek answer, while giving up any points for the question.--></div><div class="code-and-tests"><div id="test-area" class="test-area"><div id="test-total" class="test-total"></div><div id="test-suite" class="test-suite"></div><div id="assert-console" class="assert-console console monospace"><h4>TEST ERRORS</h4><div id="assert-output"></div></div></div><div class="code-and-eval-console"><label for="code" class="visually-hidden">Code Editor</label><textarea id="code" class="code monospace" rows="10" autofocus autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea><div id="eval-console" class="eval-console console monospace"><h4>CODE OUTPUT</h4><div id="eval-output"></div></div></div></div></main></div><!-- practice-javascript-bottom-banner --><div class="ads-bottom"><ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-4039212144643368" data-ad-slot="9721927778"></ins></div><footer><div class="copyright">© 2017 <a href="https://twitter.com/jakob_anderson">Jakob Anderson</a></div><div class="issues"><a href="https://github.com/PracticeJavaScript/practicejavascript.com/issues">Problems? Leave an issue on github</a></div><div class="icon-license">Icons designed by <a href="http://www.flaticon.com/authors/gregor-cresnar">Gregor Cresnar</a> from Flaticon</div></footer><link href="./dist/css/style.css" rel="stylesheet"><script src="./dist/js/bundle.min.js"></script><script src="./dist/js/loadJS.js"></script><script src="./dist/js/sw-registration.js"></script><!-- DEFER AND ASYNC ALL THE OTHER GARBAGE THAT ISN'T MY APP --><script>"practicejavascript.com"===window.location.host&&window.addEventListener("load",function(){loadJS("//www.google-analytics.com/analytics.js",function(){ga("create","UA-97392792-1","auto"),ga("send","pageview")}),loadJS("//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",function(){(adsbygoogle=window.adsbygoogle||[]).push({})})})</script></body></html>

‎public/launch-icon.svg

Lines changed: 1 addition & 0 deletions
Loading[フレーム]

‎public/manifest.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"short_name": "PracticeJS",
3+
"name": "Practice JavaScript with this fun game",
4+
"background_color": "#0C141F",
5+
"theme_color": "#0C141F",
6+
"display": "standalone",
7+
"icons": [
8+
{
9+
"src": "launcher-icon.svg",
10+
"sizes": "256x256"
11+
}
12+
],
13+
"start_url": "index.html?utm_source=homescreen"
14+
}

0 commit comments

Comments
(0)

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