Replace gulp with npm scripts (chartjs#7402)

Gulp removed from toolchain in favour of simpler build process

Author: kurkle

.editorconfig

@@ -9,10 +9,6 @@ charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 
-[gulpfile.js]
-indent_style = space
-indent_size = 2
-
 [*.yml]
 indent_style = space
 indent_size = 2

.eslintrc.yml

@@ -22,3 +22,5 @@ plugins: ['html']
 rules:
   class-methods-use-this: 0
   no-empty-function: 0
+  complexity: [1, 10]
+  max-statements: [1, 30]

.github/workflows/ci.yml

@@ -28,9 +28,6 @@ jobs:
         Xvfb :99 -screen 0 1024x768x24 &
         echo "::set-env name=DISPLAY:::99.0"
       if: runner.os == 'Linux'
-    - name: Install gulp
-      run: npm install --global gulp
-      if: runner.os == 'macOS'
     - name: Install chrome
       run: |
         brew update
@@ -45,13 +42,13 @@ jobs:
     - name: Build and Test
       run: |
         npm install
-        gulp build
-        gulp test --coverage ${BROWSERS}
+        npm run build
+        npm test
     - name: Package
       run: |
         npm run docs
         npm run typedoc
-        gulp package
+        npm pack
     - name: Publish Test Results
       run: cat ./coverage/lcov.info | ./node_modules/.bin/coveralls
       shell: bash

.travis.yml

@@ -9,12 +9,12 @@ services:
   - xvfb
 
 script:
-  - gulp build
-  - gulp test --coverage
+  - npm run build
+  - npm test
   - ./scripts/docs-config.sh
   - npm run docs
   - npm run typedoc
-  - gulp package
+  - npm pack
   - cat ./coverage/lcov.info | ./node_modules/.bin/coveralls || true
 
 sudo: required

docs/docs/developers/contributing.md

@@ -6,7 +6,7 @@ New contributions to the library are welcome, but we ask that you please follow
 
 - Before opening a PR for major additions or changes, please discuss the expected API and/or implementation by [filing an issue](https://github.com/chartjs/Chart.js/issues) or asking about it in the [Chart.js Slack](https://chartjs-slack.herokuapp.com/) #dev channel. This will save you development time by getting feedback upfront and make review faster by giving the maintainers more context and details.
 - Consider whether your changes are useful for all users, or if creating a Chart.js [plugin](plugins.md) would be more appropriate.
-- Check that your code will pass tests and `eslint` code standards. `gulp test` will run both the linter and tests for you.
+- Check that your code will pass tests and `eslint` code standards. `npm test` will run both the linter and tests for you.
 - Add unit tests and document new functionality (in the `test/` and `docs/` directories respectively).
 - Avoid breaking changes unless there is an upcoming major release, which are infrequent. We encourage people to write plugins for most new advanced features, and care a lot about backwards compatibility.
 - We strongly prefer new methods to be added as private whenever possible. A method can be made private either by making a top-level `function` outside of a class or by prefixing it with `_` and adding `@private` JSDoc if inside a class. Public APIs take considerable time to review and become locked once implemented as we have limited ability to change them without breaking backwards compatibility. Private APIs allow the flexibility to address unforeseen cases.
@@ -17,40 +17,34 @@ Active committers and contributors are invited to introduce yourself and request
 
 ## Building and Testing
 
-Chart.js uses <a href="https://gulpjs.com/" target="_blank">gulp</a> to build the library into a single JavaScript file.
-
 Firstly, we need to ensure development dependencies are installed. With node and npm installed, after cloning the Chart.js repo to a local directory, and navigating to that directory in the command line, we can run the following:
 
 ```bash
 > npm install
-> npm install -g gulp-cli
 ```
 
-This will install the local development dependencies for Chart.js, along with a CLI for the JavaScript task runner <a href="https://gulpjs.com/" target="_blank">gulp</a>.
+This will install the local development dependencies for Chart.js.
 
 The following commands are now available from the repository root:
 
 ```bash
-> gulp build                // build dist files in ./dist
-> gulp build --watch        // build and watch for changes
-> gulp unittest             // run tests from ./test/specs
-> gulp unittest --watch     // run tests and watch for source changes
-> gulp unittest --coverage  // run tests and generate coverage reports in ./coverage
-> gulp lint                 // perform code linting (ESLint)
-> gulp test                 // perform code linting and run unit tests
-> gulp test --browsers ...  // test with specified browsers (comma-separated)
+> npm run build             // build dist files in ./dist
+> npm run autobuild         // build and watch for source changes
+> npm run dev               // run tests and watch for source and test changes
+> npm run lint              // perform code linting (ESLint, tsc)
+> npm test                  // perform code linting and run unit tests with coverage
 ```
 
-More information can be found in [gulpfile.js](https://github.com/chartjs/Chart.js/blob/master/gulpfile.js).
+`npm run dev` and `npm test` can be appended with a string that is used to match the spec filenames. For example: `npm run dev plugins` will start karma in watch mode for `test/specs/**/*plugin*.js`.
 
 ### Documentation
 
 We use [Docusaurus v2](https://v2.docusaurus.io/docs/introduction) to manage the docs which are contained as Markdown files in the docs directory. You can run the doc server locally using the commands provided by Docusaurus:
 
-```
-$ cd docs
-$ npm install
-$ npm run start
+```bash
+> cd docs
+> npm install
+> npm run start
 ```
 
 ### Image-Based Tests
@@ -60,10 +54,11 @@ Some display-related functionality is difficult to test via typical Jasmine unit
 Generated charts in image-based tests should be **as minimal as possible** and focus only on the tested feature to prevent failure if another feature breaks (e.g. disable the title and legend when testing scales).
 
 You can create a new image-based test by following the steps below:
+
 - Create a JS file ([example](https://github.com/chartjs/Chart.js/blob/f7b671006a86201808402c3b6fe2054fe834fd4a/test/fixtures/controller.bubble/radius-scriptable.js)) or JSON file ([example](https://github.com/chartjs/Chart.js/blob/4b421a50bfa17f73ac7aa8db7d077e674dbc148d/test/fixtures/plugin.filler/fill-line-dataset.json)) that defines chart config and generation options.
 - Add this file in `test/fixtures/{spec.name}/{feature-name}.json`.
 - Add a [describe line](https://github.com/chartjs/Chart.js/blob/4b421a50bfa17f73ac7aa8db7d077e674dbc148d/test/specs/plugin.filler.tests.js#L10) to the beginning of `test/specs/{spec.name}.tests.js` if it doesn't exist yet.
-- Run `gulp unittest --watch --inputs=test/specs/{spec.name}.tests.js`.
+- Run `npm run dev`.
 - Click the *"Debug"* button (top/right): a test should fail with the associated canvas visible.
 - Right click on the chart and *"Save image as..."* `test/fixtures/{spec.name}/{feature-name}.png` making sure not to activate the tooltip or any hover functionality
 - Refresh the browser page (`CTRL+R`): test should now pass
@@ -81,8 +76,8 @@ Well structured, detailed bug reports are hugely valuable for the project.
 
 Guidelines for reporting bugs:
 
- - Check the issue search to see if it has already been reported
- - Isolate the problem to a simple test case
- - Please include a demonstration of the bug on a website such as [JS Bin](https://jsbin.com/), [JS Fiddle](https://jsfiddle.net/), or [Codepen](https://codepen.io/pen/). ([Template](https://codepen.io/pen?template=JXVYzq)). If filing a bug against `master`, you may reference the latest code via https://www.chartjs.org/dist/master/Chart.min.js (changing the filename to point at the file you need as appropriate). Do not rely on these files for production purposes as they may be removed at any time.
+- Check the issue search to see if it has already been reported
+- Isolate the problem to a simple test case
+- Please include a demonstration of the bug on a website such as [JS Bin](https://jsbin.com/), [JS Fiddle](https://jsfiddle.net/), or [Codepen](https://codepen.io/pen/). ([Template](https://codepen.io/pen?template=JXVYzq)). If filing a bug against `master`, you may reference the latest code via <https://www.chartjs.org/dist/master/Chart.min.js> (changing the filename to point at the file you need as appropriate). Do not rely on these files for production purposes as they may be removed at any time.
 
 Please provide any additional details associated with the bug, if it's browser or screen density specific, or only happens with a certain configuration or data.

gulpfile.js

@@ -6,9 +6,16 @@ const json = require('@rollup/plugin-json');
 const resolve = require('@rollup/plugin-node-resolve');
 const webWorkerLoader = require('rollup-plugin-web-worker-loader');
 const builds = require('./rollup.config');
+const yargs = require('yargs');
+
 
 module.exports = function(karma) {
-	const args = karma.args || {};
+	const args = yargs
+		.option('verbose', {default: false})
+		.argv;
+
+	const grep = args.grep === true ? '' : args.grep;
+	const specPattern = 'test/specs/**/*' + grep + '*.js';
 
 	// Use the same rollup config as our dist files: when debugging (--watch),
 	// we will prefer the unminified build which is easier to browse and works
@@ -17,15 +24,17 @@ module.exports = function(karma) {
 	const regex = args.watch ? /chart\.js$/ : /chart\.min\.js$/;
 	const build = builds.filter(v => v.output.file.match(regex))[0];
 
-	if (args.watch) {
-		build.output.sourcemap = 'inline';
-	}
-
 	karma.set({
 		frameworks: ['jasmine'],
 		reporters: ['progress', 'kjhtml'],
 		browsers: (args.browsers || 'chrome,firefox').split(','),
-		logLevel: karma.LOG_WARN,
+		logLevel: karma.LOG_INFO,
+
+		client: {
+			jasmine: {
+				failFast: !!karma.autoWatch
+			}
+		},
 
 		// Explicitly disable hardware acceleration to make image
 		// diff more stable when ran on Travis and dev machine.
@@ -56,13 +65,14 @@ module.exports = function(karma) {
 			{pattern: 'test/fixtures/**/*.json', included: false},
 			{pattern: 'test/fixtures/**/*.png', included: false},
 			'node_modules/moment/min/moment.min.js',
-			'test/index.js',
-			'src/index.js',
-			'node_modules/chartjs-adapter-moment/dist/chartjs-adapter-moment.js'
-		].concat((args.inputs || 'test/specs/**/*.js').split(';')),
+			{pattern: 'test/index.js', watched: false},
+			{pattern: 'src/index.js', watched: false},
+			'node_modules/chartjs-adapter-moment/dist/chartjs-adapter-moment.js',
+			{pattern: specPattern, watched: false}
+		],
 
 		preprocessors: {
-			'test/specs/**/*.js': ['rollup'],
+			[specPattern]: ['rollup'],
 			'test/index.js': ['rollup'],
 			'src/index.js': ['sources']
 		},
@@ -77,7 +87,8 @@ module.exports = function(karma) {
 			],
 			output: {
 				name: 'test',
-				format: 'umd'
+				format: 'umd',
+				sourcemap: karma.autoWatch ? 'inline' : false
 			}
 		},