What is this?
As you can see in our boilerplate, we rely on the default configuration files for aforementioned tools, which should make your code very portable. Specifically, you could decide on using
webpack without our wrapper task and would still get the same result. However, using the tasks will give you the following advantages:
- Sensible and battle-tested defaults for tools like
- "Smart" file watching based on a dependency graph of your code. This makes sure that editing a Sass or Handlebars partial will only rebuild the necessary files.
- Extended logging, making use of gulp's
loglevelflag. So running a task with
-LLLLwill give you more detailed infos than with
- Config validation using
joi, trying to make sure that you know why a task might be failing instead of just throwing an exception.
When could I use this?
It very much depends on what you are creating. We often build rather static frontend prototypes containing only small application parts. There, a setup based on Gulp task has proven to be very helpful and flexible.
If the asset pipeline part isn't that important, a static site generator like
11ty might be a better fit. It is also possible to combine Estático with tools like
Fractal, which would take care of the templating and component previewing part.
How can I use it?
The tasks and helpers are npm packages published in our
@unic scope. The READMEs explaining how to install and use them are both available on npmjs.com and in the corresponding directories of this repo (see links above).
What does it contain?
- estatico-boilerplate (see notes above)
How can I contribute?
- Clone this repository
- Install lerna globally:
npm i -g lerna
- Bootstrap (installing dependencies and linking them):
If bootstrapping fails, reducing the concurrency might help:
lerna bootstrap --concurrency=1
Every package in
packages/ can be developed separately.
Manage npm dependencies
Since lerna does magic things with packages (symlinking local ones etc.), we need to use
lerna add to add new dependencies to a package. Examples:
lerna add node-sass --scope=@unic/estatico-sass or
lerna add left-pad --dev --scope=@unic/estatico-boilerplate.
To remove dependencies, delete them from the corresponding
lerna bootstrap after any change (either adding or removing).
As described above, the
estatico-boilerplate package is meant as a demo project. I has the main packages specified as dependencies and Lerna takes care of linking them locally. So a change to
estatico-stylelint will immediately be available in
estatico-boilerplate. This is very useful when working on task packages since the corresponding changes can immediately be tested in the boilerplate.
To run all tests in every package we can call
lerna exec -- npm test. For a specific one we can use
lerna exec --scope=@unic/estatico-stylelint -- npm test (or
npm run lerna-test after navigating into a package).
npm release will run
lerna publish --conventional-commits and generate a CHANGELOG via
Conventional Changelog. For this changelog to be properly created, the correct commit message format needs to be used.