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.
==== Basic steps
* `grunt eslint` -> `npm -s lint:js`
* create `.eslintignore`
* `grunt stylelint` -> `npm -s lint:css`
* create `.stylelintignore`
* `grunt banana` -> `npm -s lint:i18n`
* `grunt svgmin` -> `npm -s run svgmin`
* create `.svgminrc.json` from `Gruntfile.js`
* `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`
==== 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 ]])
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
==== 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
```
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 minify && npm -s run doc",
"test" : "npm 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/",
"minify" : "npm -s run svgmin",
"svgmin" : "svgo --config=.svgminrc.json -q -r -f resources/",
"doc" : "jsduck",
"install:link" : "npm -s link eslint-config-wikimedia && npm -s link eslint-plugin-no-jquery && npm -s link eslint-plugin-json@1.4.0 && npm -s link eslint-plugin-qunit",
"install:global": "npm i -s -g eslint && npm i -s -g eslint-config-wikimedia && npm -s run install:link && npm i -s -g stylelint && npm i -s -g stylelint-config-wikimedia && npm i -s -g 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}