Merge pull request #3367 from webcompat/issue/3362/1

Fixes #3362 - Remove grunt tasks and clean up package.json
webcompat · Jul 1, 2020 · 6300c39 · 6300c39
2 parents 9968555 + e184cfb
commit 6300c39
Show file tree

Hide file tree

Showing 16 changed files with 30 additions and 380 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
diff --git a/config/deploy.ignore b/config/deploy.ignore
@@ -18,8 +18,7 @@ docs/
 env/
 fabfile.py*
 git_modules/
-grunt-tasks/
-Gruntfile.js
+webpack/
 icon-licenses/
 Makefile
 node_modules/

diff --git a/docs/dev-env-setup.md b/docs/dev-env-setup.md
@@ -261,36 +261,46 @@ The logs are saved in the file `webcompat.log`.
 
 After certain kinds of changes are made, you need to build the project before serving it from a webserver will work.
 
-- CSS: a build will run cssnext, combine custom media queries, and concat all source files into webcompat.dev.css. You'll need to rebuild the CSS to see any changes, so it's recommended to use a watch task (see `npm run watch`).
-- JS: a build will run eslint and minify, and concat source files.
-- JS templates (`.jst` files): if you are making changes to a Backbone template in a `.jst` file, you will need to re-run the `build` command to update the pre-compiled `templates.js` file before you will see the results.
-- HTML templates: the changes should be served from disk without the need for rebuilding.
 - Python: the Flask local server will detect changes and restart automatically. No need to rebuild.
+- HTML templates: the changes should be served from disk without the need for rebuilding.
+- JS and CSS: We use webpack for asset bundling. 
 
-You can build the entire project (CSS stylesheets, JavaScript scripts, and optimized images) by executing this command on macOS/Linux:
+See main webpack commands below:
+
+You can build the entire project (CSS stylesheets, JavaScript code) by executing this command
+in a new terminal tab:
 
 ```bash
 npm run build
 ```
 
-and this command on Windows:
+This build is meant for development and does not include optimizations for production. 
+Note that this command will not watch for changes in JS or CSS. 
+
+If you need to watch for changes and rebuild the assets on the fly, run this command instead:
 
 ```bash
-npm run watch
+npm run dev
 ```
 
-Linting means that you check that the code respects some syntactic rules defined for this project.
+We use linting, which will check that the code respects some syntactic rules defined for this project.
+To run linters:
 
 ```bash
-# linting style, JS and python.
+# linting style, JS, CSS and python.
 npm run lint
 ```
 
 Fixing static JS files with project coding styles, if an error occurs:
 
 ```bash
 # fixing linting style JS
-npm run fix
+npm run lint:fix:js
 ```
 
-By default, a build will _not_ optimize images (which is done before deploys). If you'd like to optimize images, you can run `npm run imagemin`.
+or CSS:
+
+```bash
+# fixing linting style CSS
+npm run lint:fix:css
+```
diff --git a/grunt-tasks/cmq.js b/grunt-tasks/cmq.js
diff --git a/grunt-tasks/concat.js b/grunt-tasks/concat.js
diff --git a/grunt-tasks/cssmin.js b/grunt-tasks/cssmin.js
diff --git a/grunt-tasks/cssnext.js b/grunt-tasks/cssnext.js
diff --git a/grunt-tasks/imagemin.js b/grunt-tasks/imagemin.js
diff --git a/grunt-tasks/jst.js b/grunt-tasks/jst.js
diff --git a/grunt-tasks/uglify.js b/grunt-tasks/uglify.js