This is a detailed process template for transitioning grunt tasks into npm scripts based on lessons learned from the MMV project. The exact steps might vary between projects.
Purpose: removing Grunt from the build pipeline. The basic steps follow established patterns, the 'fix' and 'install' scripts are new. Feel free to discuss and propose alternatives.
Parent task tracking the individual projects: {T246321}
==== Basic steps
* `grunt eslint` -> `npm -s lint:js`
* create `.eslintignore` ([[ https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MultimediaViewer/+/574636/8/.eslintignore | sample ]])
* `grunt stylelint` -> `npm -s lint:css`
* create `.stylelintignore` ([[ https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MultimediaViewer/+/574636/8/.stylelintignore | sample ]])
* `grunt banana` -> `npm -s lint:i18n`
* `grunt svgmin` -> `npm -s run svgmin`
* create `.svgminrc.json` from `Gruntfile.js` ([[ https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MultimediaViewer/+/574636/8/.svgminrc.json | sample ]])
* `npm run build`: run scripts `test`, `minify`, `doc` (as applicable)
* `npm test`: run `lint`
* `npm run lint`: run all lint steps in chain
* `npm run lint:fix`: run all lint steps in chain with `--fix` argument to fix trivial style errors:
* `npm -s run lint:js -- --fix`, etc. Note the extra `--` that separates the task argument.
* `npm minify`: run `svgmin` script
==== Developer productivity
Optional scripts to help set up the dev environment.
* `install:global`: install the necessary node_modules globally
* `install:link`: symlink the node_modules that must be present locally for eslint to work
* Add `DEVELOPERS.md` ([[ https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MultimediaViewer/+/574636/8/DEVELOPERS.md | sample ]])
==== Cleanup devDependencies
* Uninstall grunt and its plugins, except the mediawiki-specific `grunt-banana-checker`
* Update and commit `package-lock.json` for CI
Uninstall grunt:
```
npm -s un grunt
npm -s un grunt-eslint
npm -s un grunt-stylelint
npm -s un grunt-svgmin
npm -s i eslint@^6.5.1
```
Note: even though 'eslint' is pulled by 'eslint-config-wikimedia', it still needs to be installed separately, otherwise it fails to load. The version constraint is the same as in 'eslint-config-wikimedia'.
Update and commit `package-lock.json`:
```
npm install [--package-lock-only]
```
Before commit test:
```
npm -s ci
npm -s test
```
==== Sample `package.json`
```
{
"private": true,
"scripts": {
"build" : "npm -s test && npm -s run doc",
"test" : "npm -s run lint",
"lint" : "npm -s run lint:js && npm -s run lint:css && npm -s run lint:i18n",
"lint:fix" : "npm -s run lint:js -- --fix && npm -s run lint:css -- --fix && npm -s run lint:i18n",
"lint:js" : "eslint --cache --max-warnings 0 **/*.{js,json}",
"lint:css" : "stylelint resources/**/*.{less,css}",
"lint:i18n": "banana-checker --requireLowerCase=0 i18n/",
"svgmin" : "npx svgo --config=.svgminrc.json -q -r -f resources/",
"doc" : "npx jsduck",
"install:svgmin" : "npm i -s -g svgo",
"install:doc" : "npm i -s -g jsduck",
"install:link" : "npm link eslint eslint-plugin-no-jquery eslint-plugin-json@1.4.0 eslint-plugin-qunit eslint-config-wikimedia && npm link stylelint stylelint-config-wikimedia grunt-banana-checker",
"install:global" : "npm i --link eslint-plugin-no-jquery eslint-plugin-json@1.4.0 eslint-plugin-qunit stylelint",
"uninstall:global": "npm un -s -g svgo eslint eslint-plugin-no-jquery eslint-plugin-json eslint-plugin-qunit eslint-config-wikimedia stylelint stylelint-config-wikimedia grunt-banana-checker"
},
"devDependencies": {
"eslint": "^6.5.1",
"eslint-config-wikimedia": ">=0.15.0",
"stylelint-config-wikimedia": ">=0.9.0",
"grunt-banana-checker": ">=0.8.1"
}
}
```
Note: `eslint-config-wikimedia` depends on
* `eslint-plugin-json@1.4.0`, it hasn't been updated to v2.1.0
* `eslint-plugin-mediawiki@0.1.0`, it hasn't been updated to v0.2.1
==== Previous related tasks
{T204176}
{T204260}
{T179195}
{T56218}