diff --git a/Gemfile.lock b/Gemfile.lock index 44e9f31..60e0f2d 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -17,7 +17,7 @@ GEM public_suffix (>= 2.0.2, < 7.0) amazing_print (1.8.1) base64 (0.3.0) - benchmark (0.4.1) + benchmark (0.5.0) bigdecimal (3.3.1) bridgetown (2.0.3) bridgetown-builder (= 2.0.3) @@ -95,7 +95,7 @@ GEM pp (>= 0.6.0) rdoc (>= 4.0.0) reline (>= 0.4.2) - json (2.15.1) + json (2.15.2) kramdown (2.5.1) rexml (>= 3.3.9) kramdown-parser-gfm (1.1.0) diff --git a/src/_components/navigation.erb b/src/_components/navigation.erb index 37c8761..ae2a78b 100644 --- a/src/_components/navigation.erb +++ b/src/_components/navigation.erb @@ -20,7 +20,7 @@ <%== nav_link title: "CSS (Beta)", href: "/css/" %> <%== nav_link title: "JavaScript / TypeScript", href: "/js/" %> <%== nav_link title: "Images", href: "/images/" %> - <%== nav_link title: "Static Files", href: "/static/" %> + <%== nav_link title: "Static Files", href: "/assets/" %> <%== nav_link title: "Build a Pipeline", href: "/build-pipeline/" %> diff --git a/src/assets.md b/src/assets.md new file mode 100644 index 0000000..6bbb328 --- /dev/null +++ b/src/assets.md @@ -0,0 +1,45 @@ +--- +layout: default +title: faucet-pipeline-assets +--- + +The configuration is an array of folders or single files you want to copy. Each +entry of the array is an object with two keys: `source` is the source folder, +and `target` is the target folder. + +The resulting configuration might look something like this: + +```js +export const assets = [{ + source: "./images", + target: "./public/images" +}, { + source: "./fonts", + target: "./public/fonts" +}]; +``` + +If you only want to copy _some_ of the files, you can select them using a +`filter` function. That function will be called for every file, with its path +relative to `source`. Only files passing the test implemented by that function – +i.e. those for which the function returns `true` – will be copied. + +In this example, we only copy `.ttf` fonts and omit images from the `templates` +directory: + +```js +export const assets = [{ + source: "./fonts", + target: "./public/fonts", + filter: file => file.endsWith(".ttf") +}, { + source: "./images", + target: "./public/images", + filter: file => !file.startsWith("templates/") +}]; +``` + +## faucet-pipeline-static + +The previous version of faucet-pipeline-assets was called +`faucet-pipeline-static`. [You can find the documentation for it here](/static). diff --git a/src/css.md b/src/css.md index 8462750..e4d40df 100644 --- a/src/css.md +++ b/src/css.md @@ -5,17 +5,6 @@ title: faucet-pipeline-css faucet-pipeline-css offers bundling for files written in CSS. -**Note that this module is in beta** - -To enable this **beta module** you need to add the following lines to your -faucet.config.js: - -```js -export const plugins = [ - require("faucet-pipeline-css") -]; -``` - The configuration is an array of bundles you want to create. Each entry of the array is an object with two keys: `source` is the file that should be compiled, and `target` is the file that should be created (the path is, of diff --git a/src/index.md b/src/index.md index 51ec950..6537707 100644 --- a/src/index.md +++ b/src/index.md @@ -33,7 +33,7 @@ export const js = [{ Fingerprinting arbitrary files, like fonts and images: ```javascript -export const static = [{ +export const assets = [{ source: "./assets", target: "./dist/assets" }]; diff --git a/src/static.md b/src/static.md index 7530166..81c3317 100644 --- a/src/static.md +++ b/src/static.md @@ -3,6 +3,9 @@ layout: default title: faucet-pipeline-static --- +**Note:** This is a previous version of faucet-pipeline-assets that does not work +with projects using ESM. Please use [faucet-pipeline-assets](/assets) instead. + The configuration is an array of folders or single files you want to copy. Each entry of the array is an object with two keys: `source` is the source folder, and `target` is the target folder. @@ -10,13 +13,15 @@ and `target` is the target folder. The resulting configuration might look something like this: ```js -export const static = [{ - source: "./images", - target: "./public/images" -}, { - source: "./fonts", - target: "./public/fonts" -}]; +module.exports = { + static: [{ + source: "./images", + target: "./public/images" + }, { + source: "./fonts", + target: "./public/fonts" + }] +}; ``` If you only want to copy _some_ of the files, you can select them using a @@ -28,15 +33,17 @@ In this example, we only copy `.ttf` fonts and omit images from the `templates` directory: ```js -export const static = [{ - source: "./fonts", - target: "./public/fonts", - filter: file => file.endsWith(".ttf") -}, { - source: "./images", - target: "./public/images", - filter: file => !file.startsWith("templates/") -}]; +module.exports = { + static: [{ + source: "./fonts", + target: "./public/fonts", + filter: file => file.endsWith(".ttf") + }, { + source: "./images", + target: "./public/images", + filter: file => !file.startsWith("templates/") + }] +} ``` ## Compact @@ -57,11 +64,13 @@ If you prefer to compact your images on your own, you could for example use JPGs: ```js -export const static = [{ - source: "./src", - target: "./dist", - compact: { - jpg: require("imagemin-mozjpeg")({ quality: 80 }) - } -}]; +module.exports = { + static: [{ + source: "./src", + target: "./dist", + compact: { + jpg: require("imagemin-mozjpeg")({ quality: 80 }) + } + }] +}; ```