Skip to content

Commit

Permalink
feat: add copy, wrap, format & reset btns;
Browse files Browse the repository at this point in the history 
feat: add banners for PWA install state;
feat: on initial load terminate the monaco editor worker;
^ monaco would ended up closing it anyway, so...
fix: PWA caching issues;
fix: inital query search issue;
fix: reduce cache length; remove css preload;
chore: update deps;
  • Loading branch information
@okikio
okikio authored Sep 20, 2021
1 parent 5a18111 commit faaf924
Show file tree
Hide file tree
Showing 13 changed files with 892 additions and 462 deletions.
250 changes: 125 additions & 125 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,16 @@
const mode = process.argv.includes("--watch") ? "watch" : "build";

// Gulp utilities
import { watch, task, series, parallel, stream, streamList, parallelFn } from "./util.js";
import { createRequire } from 'module';
import {
watch,
task,
series,
parallel,
stream,
streamList,
parallelFn,
} from "./util.js";
import { createRequire } from "module";
const require = createRequire(import.meta.url);

// Origin folders (source and destination folders)
Expand All @@ -25,10 +33,7 @@ let browserSync;

// HTML Tasks
task("html", async () => {
const [
{ default: pug },
{ default: plumber }
] = await Promise.all([
const [{ default: pug }, { default: plumber }] = await Promise.all([
import("gulp-pug"),
import("gulp-plumber"),
]);
Expand All @@ -54,7 +59,7 @@ task("css", async () => {
{ default: scss },
{ default: sass },

{ default: rename }
{ default: rename },
] = await Promise.all([
import("fibers"),

Expand All @@ -64,41 +69,38 @@ task("css", async () => {
import("postcss-scss"),
import("@csstools/postcss-sass"),

import("gulp-rename")
import("gulp-rename"),
]);

return stream(`${cssSrcFolder}/*.scss`, {
pipes: [
// Minify scss to css
postcss([
sass({ outputStyle: "compressed", fiber }),
tailwind("./tailwind.config.cjs"),
], { syntax: scss }),
rename({ extname: ".css", suffix: ".min" })
postcss(
[
sass({ outputStyle: "compressed", fiber }),
tailwind("./tailwind.config.cjs"),
],
{ syntax: scss }
),
rename({ extname: ".css", suffix: ".min" }),
],
dest: cssFolder,
end: browserSync ? [browserSync.stream()] : null,
});
});

task("minify-css", async () => {
const [
{ default: postcss },
{ default: autoprefixer },
{ default: csso },
] = await Promise.all([
import("gulp-postcss"),
import("autoprefixer"),
import("postcss-csso"),
]);
const [{ default: postcss }, { default: autoprefixer }, { default: csso }] =
await Promise.all([
import("gulp-postcss"),
import("autoprefixer"),
import("postcss-csso"),
]);

return stream(`${destFolder}/**/*.css`, {
pipes: [
// Minify scss to css
postcss([
csso(),
autoprefixer(),
])
postcss([csso(), autoprefixer()]),
],
dest: destFolder,
end: browserSync ? [browserSync.stream()] : null,
Expand All @@ -118,8 +120,6 @@ task("js", async () => {

{ default: replace },
{ basename },

{ generateSW }
] = await Promise.all([
import("gulp-esbuild"),
import("gulp-size"),
Expand All @@ -131,82 +131,77 @@ task("js", async () => {

import("gulp-replace"),
import("path"),

import("workbox-build")
]);

let monacoFilename;
const esbuild = mode == "watch" ? createGulpEsbuild({ incremental: true }) : gulpEsBuild;
const esbuild =
mode == "watch"
? createGulpEsbuild({ incremental: true })
: gulpEsBuild;

await stream(
[
`${tsFolder}/*.ts`,
`${tsFolder}/scripts/*`,
`!${tsFolder}/**/*.d.ts`,
`node_modules/esbuild-wasm/esbuild.wasm`
], {
pipes: [
// Bundle Modules
esbuild({
target: ["es2018"],
platform: "browser",

assetNames: "[name]",
entryNames: '[name].min',

bundle: true,
minify: true,
color: true,
format: "esm",
sourcemap: true,
splitting: true,

loader: {
'.ttf': 'file',
".wasm": "file"
},
`node_modules/esbuild-wasm/esbuild.wasm`,
],
{
pipes: [
// Bundle Modules
esbuild({
target: ["es2018"],
platform: "browser",

assetNames: "[name]",
entryNames: "[name].min",

bundle: true,
minify: true,
color: true,
format: "esm",
sourcemap: true,
splitting: true,

loader: {
".ttf": "file",
".wasm": "file",
},

plugins: [
WEB_WORKER(),
solid()
]
}),
plugins: [WEB_WORKER(), solid()],
}),

gulpif(
(file) => /\.js$/.test(file.path),
size({
gzip: true,
showFiles: true,
showTotal: false
})
),
gulpif(
(file) => /\.js$/.test(file.path),
size({
gzip: true,
showFiles: true,
showTotal: false,
})
),

gulpif(
(file) => /monaco(.*)\.css$/.test(file.path),
rename("monaco.min.css")
),
gulpif(
(file) => /monaco(.*)\.css$/.test(file.path),
rename("monaco.min.css")
),

gulpif(
(file) => {
gulpif((file) => {
let test = /monaco-(.*)\.js$/.test(file.path);
if (test) monacoFilename = basename(file.path);
return test;
},
rename("monaco.min.js")
),

gulpif(
(file) => /monaco-(.*)\.js\.map$/.test(file.path),
rename("monaco.min.js.map")
)
],
dest: jsFolder, // Output
});
}, rename("monaco.min.js")),

gulpif(
(file) => /monaco-(.*)\.js\.map$/.test(file.path),
rename("monaco.min.js.map")
),
],
dest: jsFolder, // Output
}
);

return stream([`${jsFolder}/**/*.js`], {
pipes: [
replace(new RegExp(monacoFilename, "g"), "monaco.min.js"),
],
pipes: monacoFilename ? [replace(new RegExp(monacoFilename, "g"), "monaco.min.js")] : [],
dest: jsFolder, // Output
});
});
Expand All @@ -217,43 +212,29 @@ task("service-worker", async () => {

return generateSW({
globDirectory: destFolder,
globPatterns: [
'**/*.{html,js,css}',
'**/*.{ttf,svg}',
],
globPatterns: ["**/*.{html,js,css}", "**/*.{ttf,svg}"],
swDest: `${destFolder}/sw.js`,

// navigationPreload: true,
ignoreURLParametersMatching: [/.*/],
skipWaiting: true,
ignoreURLParametersMatching: [/index\.html\?(.*)/, /\\?(.*)/],
// skipWaiting: true,
cleanupOutdatedCaches: true,
inlineWorkboxRuntime: true,
// clientsClaim: true,

// Define runtime caching rules.
runtimeCaching: [
// {
// handler: "StaleWhileRevalidate",
// urlPattern: /.*/,
// method: "GET"
// },
{
// Match any request that ends with .png, .jpg, .jpeg or .svg.
urlPattern: /\.(?:png|jpg|jpeg|svg|webp|woff2|map|wasm|json)$/,

// Apply a cache-first strategy.
handler: 'StaleWhileRevalidate',
handler: "StaleWhileRevalidate",
method: "GET",

// options: {
// // Use a custom cache name.
// cacheName: 'assets',
// cacheableResponse: {
// statuses: [200]
// },
// },
}],
})
})
},
],
});
});

// Other assets
task("assets", () => {
Expand All @@ -266,11 +247,7 @@ task("assets", () => {
});

task("sitemap", async () => {
let [
{ default: sitemap },
] = await Promise.all([
import("gulp-sitemap"),
]);
let [{ default: sitemap }] = await Promise.all([import("gulp-sitemap")]);

return stream(`${htmlFolder}/**/*.html`, {
pipes: [
Expand Down Expand Up @@ -323,7 +300,7 @@ task("watch", async () => {
browser: "chrome",
online: true,
reloadOnRestart: true,
scrollThrottle: 350
scrollThrottle: 350,
},
(_err, bs) => {
bs.addMiddleware("*", (_req, res) => {
Expand All @@ -335,17 +312,40 @@ task("watch", async () => {
}
);

watch(`${pugFolder}/**/*.pug`, { delay: 350 }, series("html", "reload"));
watch([`${cssSrcFolder}/**/*`, `./tailwind.config.cjs`], { delay: 350 }, series("css"));
watch(
`${pugFolder}/**/*.pug`,
{ delay: 450 },
series("html", "css", "service-worker", "reload")
);
watch(
[`${cssSrcFolder}/**/*`, `./tailwind.config.cjs`],
{ delay: 250 },
series("css")
);

watch([
`${tsFolder}/**/*.{tsx,ts}`,
`!${tsFolder}/**/*.d.ts`
], { delay: 350 }, series("js", "reload"));
watch(
[`${tsFolder}/**/*.{tsx,ts}`, `!${tsFolder}/**/*.d.ts`],
{ delay: 850 },
series("js", "service-worker", "reload")
);

watch([`${assetsFolder}/**/*`], { delay: 250 }, series("assets", "reload"));
watch([`${srcFolder}/js/*`], { delay: 1000 }, series("service-worker", "reload"))
watch([`${assetsFolder}/**/*`], { delay: 750 }, series("assets", "service-worker", "reload"));
});

task("build", series("clean", parallel("html", "css", "assets", "js"), parallelFn("minify-css", "service-worker", "sitemap")));
task("default", series("clean", parallel("html", "css", "assets", "js"), "service-worker", "watch"));
task(
"build",
series(
"clean",
parallel("html", "css", "assets", "js"),
parallelFn("minify-css", "service-worker", "sitemap")
)
);
task(
"default",
series(
"clean",
parallel("html", "css", "assets", "js"),
"service-worker",
"watch"
)
);
8 changes: 5 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,22 +42,24 @@
"esbuild-wasm": "^0.12.28",
"events": "^3.3.0",
"highlight.js": "^11.2.0",
"memfs": "^3.2.4",
"memfs": "^3.3.0",
"monaco-editor": "^0.27.0",
"pako": "^2.0.4",
"path": "^0.12.7",
"prettier": "^2.4.1",
"pretty-bytes": "^5.6.0",
"rollup-plugin-virtual-fs": "^4.0.1-alpha.0",
"solid-js": "^1.1.4",
"stream": "^0.0.2",
"typescript": "^4.4.3",
"web-animations-js": "^2.3.2"
"web-animations-js": "^2.3.2",
"workbox-window": "^6.3.0"
},
"devDependencies": {
"@commitlint/cli": "^13.1.0",
"@commitlint/config-conventional": "^13.1.0",
"@csstools/postcss-sass": "^4.0.0",
"@types/node": "^16.9.2",
"@types/node": "^16.9.4",
"autoprefixer": "^10.3.4",
"browser-sync": "^2.27.5",
"commitizen": "^4.2.4",
Expand Down
Loading

0 comments on commit faaf924

Please sign in to comment.