switch from Yarn to npm

This commit is contained in:
Dan Allen
2019-06-17 18:35:36 -06:00
parent 15a4754304
commit d657a97406
7 changed files with 11707 additions and 8296 deletions

View File

@@ -1,21 +1,21 @@
image: node:10.14.2-alpine
stages: [setup, verify, deploy]
yarn:
install:
stage: setup
cache:
paths:
- .yarn-cache/
- .cache/npm
script:
- &run_yarn
yarn --cache-folder=.yarn-cache --pure-lockfile > /dev/null
- &npm_install
npm install --quiet --no-progress --cache=.cache/npm --no-audit
lint:
stage: verify
cache: &pull_cache
policy: pull
paths:
- .yarn-cache/
- .cache/npm
script:
- *run_yarn
- *npm_install
- node_modules/.bin/gulp lint
bundle-stable:
stage: deploy
@@ -23,7 +23,7 @@ bundle-stable:
- master@antora/antora-ui-default
cache: *pull_cache
script:
- *run_yarn
- *npm_install
- node_modules/.bin/gulp bundle
artifacts:
paths:
@@ -34,7 +34,7 @@ bundle-dev:
- master
cache: *pull_cache
script:
- *run_yarn
- *npm_install
- node_modules/.bin/gulp bundle
artifacts:
expire_in: 1 day # unless marked as keep from job page
@@ -46,7 +46,7 @@ pages:
- master@antora/antora-ui-default
cache: *pull_cache
script:
- *run_yarn
- *npm_install
- node_modules/.bin/gulp preview:build
# FIXME figure out a way to avoid copying these files to preview site
- rm -rf public/_/{helpers,layouts,partials}

View File

@@ -9,25 +9,28 @@
:img-ci-status: {url-project}/badges/master/pipeline.svg
// External URLs:
:url-antora: https://antora.org
:url-antora-docs: https://docs.antora.org
:url-git: https://git-scm.com
:url-git-dl: {url-git}/downloads
:url-gulp: http://gulpjs.com
:url-opendevise: https://opendevise.com
:url-node: https://nodejs.org
:url-nodejs: https://nodejs.org
:url-nvm: https://github.com/creationix/nvm
:url-nvm-install: {url-nvm}#installation
:url-yarn: https://yarnpkg.com
image:{img-ci-status}[CI Status (GitLab CI), link={url-ci-pipelines}]
This project is an archetype that demonstrates how to produce a UI bundle for use in a documentation site generated with {url-antora}[Antora].
This project is an archetype that demonstrates how to produce a UI bundle that can be used by {url-antora}[Antora] to generated a documentation site.
You can see a preview of the default UI at {url-preview}.
While the default UI is ready to be used with Antora, the intent is that you'll fork it and customize it for your own needs.
It's intentionally minimalistic so as to give you a good starting point without requiring too much effort to customize.
== Use the Default UI
If you want to use the default UI for your Antora-generated site, add the following UI configuration to your playbook:
If you want to simply use the default UI for your Antora-generated site, add the following UI configuration to your playbook:
[source,yaml,subs=attributes+]
[source,yaml]
----
ui:
bundle:
@@ -35,21 +38,24 @@ ui:
snapshot: true
----
Read on to learn how to use your own build of the default UI.
NOTE: The `snapshot` flag tells Antora to fetch the UI when the `--fetch` command-line flag is present.
This setting is required because updates to the UI bundle are pushed to the same URL.
If the URL were to be unique, this setting would not be required.
== Quickstart
Read on to learn how to custom the default UI for your own documentation.
This section offers a basic tutorial for learning how to preview the default UI and bundle it for use with Antora.
A more comprehensive tutorial will be made available in the documentation.
== Development Quickstart
This section offers a basic tutorial to teach you how to set up the default UI project, preview it locally, and bundle it for use with Antora.
A more comprehensive can be found in the documentation at {url-antora-docs}.
=== Prerequisites
To preview and bundle the default UI, you need the following software on your computer:
* {url-git}[git] (command: `git`)
* {url-node}[Node] (command: `node`)
* {url-nodejs}[Node.js] (command: `node`)
* {url-gulp}[Gulp CLI] (command: `gulp`)
* {url-yarn}[Yarn] (command: `yarn`)
==== git
@@ -59,50 +65,54 @@ First, make sure you have git installed.
If not, {url-git-dl}[download and install] the git package for your system.
==== Node
==== Node.js
Next, make sure that you have Node.js (herein "`Node`") installed.
Next, make sure that you have Node.js installed.
$ node --version
If this command fails with an error, you don't have Node installed.
If the command doesn't report a Node LTS version (e.g., v10.14.2), you don't have a suitable version of Node installed.
If this command fails with an error, you don't have Node.js installed.
If the command doesn't report an LTS version of Node.js (e.g., v10.15.3), it means you don't have a suitable version of Node.js installed.
In this guide, we'll be installing Node.js 10.
While you can install Node from the official packages, we strongly recommend that you use {url-nvm}[nvm] (Node Version Manager) to install and manage Node.
While you can install Node.js from the official packages, we strongly recommend that you use {url-nvm}[nvm] (Node Version Manager) to manage your Node.js installation(s).
Follow the {url-nvm-install}[nvm installation instructions] to set up nvm on your machine.
Once you've installed nvm, open a new terminal and install Node 10 using the following command:
Once you've installed nvm, open a new terminal and install Node.js 10 using the following command:
$ nvm install 10
You can switch to this version of Node at any time using the following command:
You can switch to this version of Node.js at any time using the following command:
$ nvm use 10
To make Node 10 the default in new terminals, type:
To make Node.js 10 the default in new terminals, type:
$ nvm alias default 10
Now that you have Node 10 installed, you can proceed with installing the Gulp CLI and Yarn.
Now that you have Node.js installed, you can proceed with installing the Gulp CLI.
==== Gulp CLI
Next, you'll need the Gulp command-line interface (CLI).
This package provides the `gulp` command which executes the version of Gulp declared by the project.
You'll need the Gulp command-line interface (CLI) to run the build.
The Gulp CLI package provides the `gulp` command which, in turn, executes the version of Gulp declared by the project.
You should install the Gulp CLI globally (which resolves to a location in your user directory if you're using nvm) using the following command:
$ npm install -g gulp-cli
==== Yarn
Verify the Gulp CLI is installed and on your PATH by running:
Finally, you'll need Yarn, which is the preferred package manager for the Node ecosystem.
$ gulp --version
You should install Yarn globally (which resolves to a location in your user directory if you're using nvm) using the following command:
[TIP]
====
If you prefer to install global packages using Yarn, run this command instead:
$ npm install -g yarn
$ yarn global add gulp-cli
====
Now that you have the prerequisites installed, you can fetch and build the default UI project.
Now that you have the prerequisites installed, you can fetch and build the UI project.
=== Clone and Initialize the UI Project
@@ -113,21 +123,29 @@ Clone the default UI project using git:
cd "`basename $_`"
The example above clones Antora's default UI project and then switches to the project folder on your filesystem.
Stay in this project folder in order to initialize the project using Yarn.
Stay in this project folder when executing all subsequent commands.
Use Yarn to install the project's dependencies.
In your terminal, execute the following command (while inside the project folder):
Use npm to install the project's dependencies inside the project.
In your terminal, execute the following command:
$ yarn install
$ npm install
This command installs the dependencies listed in [.path]_package.json_ into the [.path]_node_modules/_ folder inside the project.
This folder does not get included in the UI bundle.
This folder does not get included in the UI bundle and should _not_ be committed to the source control repository.
[TIP]
====
If you prefer to install packages using Yarn, run this command instead:
$ yarn
====
=== Preview the UI
The default UI project is configured to preview offline.
That's what the files in the [.path]_preview-src/_ folder are for.
This folder contains HTML file fragments that provide a representative sample of content from the site.
The files in the [.path]_preview-src/_ folder provide the sample content that allow you to see the UI in action.
In this folder, you'll primarily find pages written in AsciiDoc.
These pages provide a representative sample and kitchen sink of content from the real site.
To build the UI and preview it in a local web server, run the `preview` command:
@@ -136,13 +154,12 @@ To build the UI and preview it in a local web server, run the `preview` command:
You'll see a URL listed in the output of this command:
....
[12:59:28] Starting 'preview:serve'...
[12:59:28] Starting server...
[12:59:28] Server started http://localhost:5252
[12:59:28] Running server
[12:00:00] Starting server...
[12:00:00] Server started http://localhost:5252
[12:00:00] Running server
....
Navigate to that URL to view the preview site.
Navigate to this URL to preview the site locally.
While this command is running, any changes you make to the source files will be instantly reflected in the browser.
This works by monitoring the project for changes, running the `preview:build` task if a change is detected, and sending the updates to the browser.
@@ -151,12 +168,14 @@ Press kbd:[Ctrl+C] to stop the preview server and end the continuous build.
=== Package for Use with Antora
If you need to bundle the UI in order to preview the UI on the real site in local development, run the following command:
If you need to package the UI so you can use it to generate the documentation site locally, run the following command:
$ gulp bundle
The UI bundle will be available at [.path]_build/ui-bundle.zip_.
You can then point Antora at this bundle using the `--ui-bundle-url` command-line option.
If any errors are reported by lint, you'll need to fix them.
When the command completes successfully, the UI bundle will be available at [.path]_build/ui-bundle.zip_.
You can point Antora at this bundle using the `--ui-bundle-url` command-line option.
If you have the preview running, and you want to bundle without causing the preview to be clobbered, use:
@@ -166,7 +185,7 @@ The UI bundle will again be available at [.path]_build/ui-bundle.zip_.
== Copyright and License
Copyright (C) 2017-2018 OpenDevise Inc. and the Antora Project.
Copyright (C) 2017-2019 OpenDevise Inc. and the Antora Project.
Use of this software is granted under the terms of the https://www.mozilla.org/en-US/MPL/2.0/[Mozilla Public License Version 2.0] (MPL-2.0).
See link:LICENSE[] to find the full license text.

View File

@@ -10,7 +10,6 @@
:uri-preview: https://antora.gitlab.io/antora-ui-default
:uri-hbs: http://handlebarsjs.com
:uri-gulp: http://gulpjs.com
:uri-yarn: https://yarnpkg.com
:uri-npm: https://npmjs.com
:uri-node: https://nodejs.org
:uri-nvm: https://github.com/creationix/nvm
@@ -53,20 +52,20 @@ Gulp (script file: [.path]_gulpfile.js/index.js_)::
{uri-gulp}[Gulp] is a build tool for JavaScript projects.
It configures a collection of tasks that can be used to perform automated tasks such as compiling files, running a preview server, or publishing a release.
Yarn (command: `yarn`)::
{uri-yarn}[Yarn] manages software packages (i.e., software dependencies) that it downloads from {uri-npm}.
npm (command: `npm`)::
npm manages software packages (i.e., software dependencies) that it downloads from {uri-npm}.
Software this project uses includes libraries that handle compilation as well as shared assets such as font files that are distributed as npm packages.
(While npm itself is often used to install Yarn, we do not use npm for any other purpose).
npm is part of Node.js.
package.json:::
This file keeps track of the dependencies (described using fuzzy versions) that Yarn should fetch.
This file keeps track of the dependencies (described using fuzzy versions) that npm (or Yarn) should fetch.
yarn.lock:::
This file contains a report of which dependencies Yarn resolved.
This information ensures that the dependency resolution is reproducible.
package-lock.json:::
This file contains a report of which dependencies npm resolved.
This information ensures that dependency resolution is reproducible.
node_modules/:::
A local cache of resolved dependencies that Yarn (or npm) fetches.
A local cache of resolved dependencies that npm (or Yarn) fetches.
PostCSS::
This project does not use a CSS preprocessor such as Sass or LESS.
@@ -96,7 +95,7 @@ gulpfile.js/
lib/
tasks/
package.json
yarn.lock
package-lock.json
src/
css/
base.css

View File

@@ -6,18 +6,16 @@
:url-nvm: https://github.com/creationix/nvm
:url-node: https://nodejs.org
:url-gulp: http://gulpjs.com
:url-yarn: https://yarnpkg.com
:url-git: https://git-scm.com
:url-git-dl: {url-git}/downloads
:url-node-releases: https://nodejs.org/en/about/releases/
// These prerequisite instructions are less detailed than Antora's prerequisite instructions, I don't know if this is a concern or not.
An Antora UI project is based on tools built atop Node.js (aka Node), namely:
An Antora UI project is based on tools built atop Node.js, namely:
* {url-node}[Node] (command: `node`)
* {url-node}[Node.js] (commands: `node` and `npm`)
** {url-nvm}[nvm] (optional, but strongly recommended)
* {url-gulp}[Gulp] (command: `gulp`)
* {url-yarn}[Yarn] (command: `yarn`)
* {url-gulp}[Gulp CLI] (command: `gulp`)
You also need {url-git}[git] (command: `git`) to pull down the project and push updates to it.
@@ -29,26 +27,26 @@ First, make sure you have git installed.
If not, {url-git-dl}[download and install] the git package for your system.
== Node
== Node.js
You need Node installed on your machine to use Antora, including the default UI.
Antora follows Node's release schedule, so we advise that you choose an active long term support (LTS) release of Node.
We recommend using the latest active Node LTS version.
While you can use other versions of Node, Antora is only tested against LTS releases.
You need Node.js installed on your machine to use Antora, including the default UI.
Antora follows the Node.js release schedule, so we advise that you choose an active long term support (LTS) release of Node.js.
We recommend using the latest active Node.js LTS version.
While you can use other versions of Node.js, Antora is only tested against LTS releases.
To check whether you have Node installed, and which version, open a terminal and type:
To check whether you have Node.js installed, and which version, open a terminal and type:
$ node --version
You should see a version string, such as:
v10.14.2
v10.15.3
If the command fails with an error, it means you don't have Node installed.
The best way to install Node is to use nvm (Node Version Manager).
Refer to xref:antora:install:linux-requirements.adoc#install-nvm[Install nvm and Node (Linux)], xref:antora:install:macos-requirements.adoc#install-nvm[Install nvm and Node (macOS)], or xref:antora:install:windows-requirements.adoc#install-nvm[Install nvm and Node (Windows)] for instructions.
If the command fails with an error, it means you don't have Node.js installed.
The best way to install Node.js is to use nvm (Node Version Manager).
Refer to xref:antora:install:linux-requirements.adoc#install-nvm[Install nvm and Node.js (Linux)], xref:antora:install:macos-requirements.adoc#install-nvm[Install nvm and Node.js (macOS)], or xref:antora:install:windows-requirements.adoc#install-nvm[Install nvm and Node.js (Windows)] for instructions.
Once you have Node installed, you can proceed with installing Gulp's CLI and Yarn.
Once you have Node.js installed, you can proceed with installing the Gulp CLI.
== Gulp CLI
@@ -58,16 +56,4 @@ You should install the Gulp CLI globally (which resolves to a location in your u
$ npm install -g gulp-cli
== Yarn
Finally, you'll need Yarn, which is the preferred package manager for the Node ecosystem.
You'll need to use the `npm` command to install Yarn, though this is the last time you'll use the `npm` command.
You should install Yarn globally (which resolves to a location in your user directory if you're using nvm) using the following command:
$ npm install -g yarn
Verify Yarn is installed by checking the version:
$ yarn --version
Now that you have Node, Yarn, and Gulp installed, you're ready to set up the project.
Now that you have Node.js and Gulp installed, you're ready to set up the project.

View File

@@ -17,28 +17,28 @@ To start, clone the default UI project using git:
cd "`basename $_`"
The example above clones Antora's default UI project and then switches to the project folder on your filesystem.
Stay in this project folder in order to initialize the project using Yarn.
Stay in this project folder in order to initialize the project using npm.
== Install dependencies
Next, you'll need to initialize the project.
Initializing the project essentially means downloading and installing the dependencies into the project.
That's the job of Yarn.
That's the job of npm.
In your terminal, execute the following command (while inside the project folder):
$ yarn install
$ npm install
This command installs the dependencies listed in [.path]_package.json_ into the [.path]_node_modules/_ folder inside the project.
This folder does not get included in the UI bundle.
The folder is safe to delete, though Yarn does a great job of managing it.
The folder is safe to delete, though npm does a great job of managing it.
You'll notice another file which seems to be relevant here, [.path]_yarn.lock_.
Yarn uses this file to determine which specific version of a dependency to use, since versions in [.path]_package.json_ are typically just a range.
You'll notice another file which seems to be relevant here, [.path]_package-lock.json_.
npm uses this file to determine which concrete version of a dependency to use, since versions in [.path]_package.json_ are typically just a range.
The information in this file makes the build reproducible across different machines and runs.
If a new dependency must be resolved that isn't yet listed in [.path]_yarn.lock_, Yarn will update this file with the new information when you run `yarn install`.
Therefore, you're advised to commit this file into the repository whenever it changes.
If a new dependency must be resolved that isn't yet listed in [.path]_package-lock.json_, npm will update this file with the new information when you run `npm install`.
Therefore, you're advised to commit the [.path]_package-lock.json_ file into the repository whenever it changes.
== Supported build tasks

11604
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

8197
yarn.lock

File diff suppressed because it is too large Load Diff