chore: better dev experience #3896
Conversation
npm start now runs `grunt dev` which in turn runs the connect server, sets up babel watching, browserify watching (for both src and test files), and css and alternate builds watching. Additionally, it will copy over the dev build files into the dist folder so that if you're linking videojs and you have a project that gets video.js from the dist, you can link and develop with more easy without rerunning all of `grunt dist` each time. Additionally, this specifically does not run more time consumming operations like minification.
| @@ -142,10 +151,6 @@ module.exports = function(grunt) { | |||
| babel: { | |||
| files: ['src/js/**/*.js'], | |||
| tasks: ['babel:es5'] | |||
| }, | |||
| jshint: { | |||
There was a problem hiding this comment.
we no longer use jshint.
| @@ -127,6 +127,15 @@ module.exports = function(grunt) { | |||
| }, | |||
| dist: {}, | |||
| watch: { | |||
| dist: { | |||
| files: [ | |||
There was a problem hiding this comment.
these are the files that users most likely try to get from the dist folder, so, we copy on changes to them.
| @@ -405,6 +410,14 @@ module.exports = function(grunt) { | |||
| 'watch:babel', | |||
| 'browserify:tests' | |||
| ], | |||
| dev: [ | |||
There was a problem hiding this comment.
we specifically don't run watch:minify because it is a time consuming process.
| 'watch:novtt', | ||
| 'watch:skin', | ||
| 'watch:dist', | ||
| 'shell:babel' |
There was a problem hiding this comment.
we run shell:babel to use babel's built-in file watching. grunt-babel provides watching using grunt's watch module that we use above, however, it recompiles all the files instead of the files that were changed.
| "test": "grunt test", | ||
| "docs": "npm run docs:lint && npm run docs:api", | ||
| "docs:api": "jsdoc -r src/js -d docs/api -c .jsdoc.json", | ||
| "docs:lint": "remark -- './**/*.md'", | ||
| "docs:fix": "remark --output -- './**/*.md'" | ||
| "docs:fix": "remark --output -- './**/*.md'", | ||
| "babel": "babel src/js -d es5" |
There was a problem hiding this comment.
a simple babel command to compile our source files to the destination folder.
| @@ -437,6 +450,12 @@ module.exports = function(grunt) { | |||
| } | |||
| }, | |||
| shell: { | |||
| babel: { | |||
| command: 'npm run babel -- --w', | |||
There was a problem hiding this comment.
this runs our npm babel script (a simple babel command) with the --w flag for watch. When a file changes, just that one will be compiled.
npm start now runs
grunt devwhich in turn runs the connect server,sets up babel watching, browserify watching (for both src and test
files), and css and alternate builds watching.
Additionally, it will copy over the dev build files into the dist folder
so that if you're linking videojs and you have a project that gets
video.js from the dist, you can link and develop with more easy without
rerunning all of
grunt disteach time.Additionally, this specifically does not run more time consumming
operations like minification.