Skip to content
GitLab

Improve build tool to make it easier to maintain and more pleasant to use

Closed Administrator requested to merge github/fork/pvdlg/build-rework-2 into v4-dev

Created by: pvdlg

Reopening (and rebase) #21777 following a mistake during a merge....

Following #20332 I've spent some time trying to improve the build process by switching to npm scripts only. See comment. My analysis is that npm scripts, while looking incredibly simple in theory, present several constraints and that the problems of the build tool are not necessarly related to the tools but mostly the way tasks are organized and orchestrated.

So I decided to evaluate a solution that would make the build tool simpler to use, easier to maintain, robust and more importantly pleasant to use for developers, while building as much as possible on the existing that works.

It turns out it was not that hard and really fun to do :-), so after a couple hours the evaluation turned something that was almost there. So I decided to polish it, update the doc and propose a PR so anyone can can have a look. Image speak more than words so this is what I have now:

bootstrap-new-build

Here is the improvement that this PR brings.

Easy setup

npm install and that's it.

Simple to use

Only 3 commands for the user/developer:

  • dist: build JS, CSS and Docs.
  • test: build JS, CSS, Docs, test and lint.
  • watch: Start everything to dev efficiently.

Only 4 commands for the maintainer:

  • prep-release: prepare release.
  • publish: publish doc on GitHub.
  • change-version: update version in source files.
  • update-shrinkwrap: update shrinkwrap dependencies management.

Pleasant to develop with

npm run watch, Open your browser and voila! All changes made in scss, js and docs are automatically reflected in live on the local doc website. See gif above :)

Fast

  • build runs in 6s (it used to be 24s)
  • test runs in 20s
  • watch react to a modification of js, scss or docs files, handle everything and reload the docs on the browser in about 1s (it used to be up to 10s just for sass + time for Jekyll to process the change)

Easier to maintain

  • Gruntfile is now 10 line of code and shouldn't have to be modified anymore.
  • For each task there is a short declarative config file under build/grunt.
  • Grunt tasks have been reorganized in a more logical way and can be found in build/grunt/aliases.js.
  • No more custom JS script.
  • No more Javascript function here and there (like in current Gruntfile.js).
  • Most of the Javascript code has been eliminated. Only the meaningful configuration remains in build/grunt and build/grunt/aliases.js and is written in a more declarative way than it would in an npm script.

Stable

  • Most of the individual tasks are the one Bootstrap has been running for a while now, so that limit the risk of regression.
  • All the Grunt plugins are reliable and well maintained plugins (often more up to date than some npm cli equivalent).

How do I use it?

  • git clone -b build-rework https://github.com/vanduynslagerp/bootstrap
  • cd bootstrap
  • npm install
  • npm run watch
  • Open you browser to localhost:9001
  • Start coding! Each modification is applied within 1s and the doc website is reloaded automatically. Just code and watch the result live.

I understand the Bootstrap team, like many others, seems to desire to move to pure npm scripts. That said, I think I reached a pretty satisfying result, that worth to be evaluated, which is the point of this PR.