====== NPM Scripts ======

[[https://www.npmjs.com/|NPM]] is a Javascript and Node.js package manager and task runner. Starting with VuFind® 9.0, it has been configured to run several tasks for front end manipulation and packaging. Earlier VuFind® releases relied on [[Grunt]].

To setup NPM to run, first install node and run "npm install" to install all the dependencies in package.json.

===== Build Tasks =====

These tasks build artifacts in the themes through a one-time action.

==== npm run build ====

Generates any artifacts that require pre-processing inside all available themes. As of this writing, this is an alias for ''npm run build:css'', but this could change in the future.

==== npm run build:css ====

Generates any CSS files that require pre-processing inside all available themes. As of this writing, this is an alias for ''npm run build:less'', but as VuFind® evolves, if we migrate to different technologies, we plan to maintain this alias, so your development routines will not be disrupted.

==== npm run build:less ====

:!: Using "npm run build:css" instead is recommended; see above.

Compiles all less files into a compressed css file. This script will detect themes inside of your themes directory and build the proper paths for you.

To use:

<code>npm run build:less</code>

==== npm run build:scss ====

Compiles all sass files into a compressed css file. This script will detect themes inside of your themes directory and build the proper paths for you.

<code>npm run build:scss</code>

==== npm run lessToSass ====

Converts all less files to sass. Mostly for the VuFind® dev team.

===== Development Build Tasks =====

These tasks are equivalent to the similarly-named build tasks above, but they produce development-mode artifacts that allow more detailed debugging.

  * build-dev
  * build-dev:css
  * build-dev:less

===== Watch Tasks =====

These tasks run a monitoring process to automatically run the associated build / development build task whenever files are edited. This can be useful during active development.

  * watch
  * watch:css
  * watch:less
  * watch:lessToSass
  * watch-dev
  * watch-dev:css
  * watch-dev:less