1
0
mirror of https://github.com/locomotivemtl/locomotive-boilerplate.git synced 2026-01-15 00:55:08 +08:00

Update Development documentation

Changed:
- Bumped NPM requirement.
- Added note about benefits of using NVM.
- Added note about support for PurgeCSS to Styles task.
- Added details about Versions task.
This commit is contained in:
Chauncey McAskill
2023-01-05 10:37:52 -05:00
parent 56d255eac8
commit 0c718a2644

View File

@@ -15,6 +15,7 @@
* [`scripts`](#scripts) * [`scripts`](#scripts)
* [`styles`](#styles) * [`styles`](#styles)
* [`svgs`](#svgs) * [`svgs`](#svgs)
* [`versions`](#versions)
--- ---
@@ -28,7 +29,9 @@ Learn more about the boilerplate's [tasks](#tasks) below.
Make sure you have the following installed: Make sure you have the following installed:
* [Node] — at least 14.17, the latest LTS is recommended. * [Node] — at least 14.17, the latest LTS is recommended.
* [NPM] — at least 6.0, the latest LTS is recommended. * [NPM] — at least 8.0, the latest LTS is recommended.
> 💡 You can use [NVM] to install and use different versions of Node via the command-line.
```sh ```sh
# Switch to recommended Node version from .nvmrc # Switch to recommended Node version from .nvmrc
@@ -262,8 +265,8 @@ See [`scripts.js`](../build/tasks/scripts.js) for details.
### `styles` ### `styles`
A wrapper around [node-sass] (and optionally [Autoprefixer] via [PostCSS]) A wrapper around [node-sass] (with optional support for [Autoprefixer]
for compiling and minifying Sass into CSS. via [PostCSS]) for compiling and minifying Sass into CSS.
By default, [PostCSS] and [Autoprefixer] are installed with the boilerplate. By default, [PostCSS] and [Autoprefixer] are installed with the boilerplate.
@@ -298,6 +301,9 @@ Example:
See [`styles.js`](../build/tasks/styles.js) for details. See [`styles.js`](../build/tasks/styles.js) for details.
The task also supports [PurgeCSS] to remove unused CSS.
See the [documentation on our Grid System](grid.md#build-tasks) for details.
### `svgs` ### `svgs`
A wrapper around [SVG Mixer] for transforming and minifying SVG files A wrapper around [SVG Mixer] for transforming and minifying SVG files
@@ -328,6 +334,41 @@ Example:
See [`svgs.js`](../build/tasks/svgs.js) for details. See [`svgs.js`](../build/tasks/svgs.js) for details.
### `versions`
A task to create and update keys for use in versioning assets.
Can generate a hexadecimal value (using random bytes) or
use the current timestamp.
Example:
```json
{
"versions": [
{
"format": "timestamp",
"key": "now",
"outfile": "./assets.json"
},
{
"format": "hex:8",
"key": "hex",
"outfile": "./assets.json"
}
]
}
```
```json
{
"now": 1665071717350,
"hex": "6ef54181c4ba"
}
```
See [`versions.js`](../build/tasks/versions.js) for details.
[Autoprefixer]: https://npmjs.com/package/autoprefixer [Autoprefixer]: https://npmjs.com/package/autoprefixer
[BrowserSync]: https://npmjs.com/package/browser-sync [BrowserSync]: https://npmjs.com/package/browser-sync
[concat]: https://npmjs.com/package/concat [concat]: https://npmjs.com/package/concat
@@ -340,5 +381,6 @@ See [`svgs.js`](../build/tasks/svgs.js) for details.
[NPM]: https://npmjs.com/ [NPM]: https://npmjs.com/
[NVM]: https://github.com/nvm-sh/nvm [NVM]: https://github.com/nvm-sh/nvm
[PostCSS]: https://npmjs.com/package/postcss [PostCSS]: https://npmjs.com/package/postcss
[PurgeCSS]: https://purgecss.com/
[SVG Mixer]: https://npmjs.com/package/svg-mixer [SVG Mixer]: https://npmjs.com/package/svg-mixer
[tiny-glob]: https://npmjs.com/package/tiny-glob [tiny-glob]: https://npmjs.com/package/tiny-glob