Buildozer is a simple build system to compile Sass, minify images or SVGs and compile javascript. It's a wrapper built around Gulp which frees you from configuring and maintaining packages.
- Installation
- Commands
- Order of script execution
- Default folder structure
- Customizing the folder structure
- Browserslist
- PostCSS plugins
- Copy
- Config search
- Linting
- Options
- Contributing to Buildozer
- Thanks
# With npm
npm i buildozer
# Or install with yarn
yarn add buildozer
Both the build
and watch
commands output the files to the same directory.
buildozer build
The build
task can be used for production environments. The build command:
- Copy files if needed
- Clean all destination folders
- Lint source code if configured
- Compiles Sass to CSS
- Use autoprefixer for vendor prefixing
- Minifies the CSS output
- Minifies images and svg
- Transpiles ES6 to ES5
- Minifies javascript
- Concatenate
.js
files in theconcat
folder
buildozer watch
The watch
task will watch the source files for changes and rebuild a task when a change is detected:
- Copy files if needed
- Clean all destination folders
- Lint source code if configured
- Compiles Sass to CSS
- Use autoprefixer for vendor prefixing
- Add Sass sourcemaps if applicable
- Minifies images and svg
- Transpiles ES6 to ES5
- Concatenate
.js
files in theconcat
folder - Run
browsersync
if configured
buildozer clean
is run to clear all folders defined in dest
. buildozer copy
, buildozer css
, buildozer js
, buildozer js-concat
, buildozer svg-sprite
and buildozer img
can be used to run the subtasks of buildozer build
.
- Set environment: Set the environment to
production
for thebuild
task. This way, the assets are minified on production. - Clean: Remove all files from destination folders.
- Copy: Copy all files defined in
copy
array. - CSS: Compile CSS.
- JS: Compile javascript files and concat if configured.
- Image: Minify images & generate svg sprite if configured.
Buildozer knows what files it needs to compile because it uses a predefined folder structure:
project/
├── css/
│ ├── main.scss
│ └── …
├── js/
│ ├── concat
│ │ └── …
│ ├── main.js
│ └── …
└── img/
├── loading.gif
├── image.jpg
├── logo.svg
└── …
… which compiles to:
project/
└── dist/
├── css/
│ ├── main.css
│ └── …
├── js/
│ ├── all.js
│ ├── main.js
│ └── …
└── img/
├── loading.gif
├── image.jpg
├── logo.svg
└── …
Buildozer uses a .buildozerrc
configuration file which uses the yaml syntax and defines which paths are used. By default, this file looks like this:
src_base_path: ./
dest_base_path: ./
css:
- src: css/**/*.css
dest: dist/css
- src: css/**/*.scss
dest: dist/css
- src: css/**/*.sass
dest: dist/css
img:
- src: img/**/*.png
dest: dist/img
- src: img/**/*.jpg
dest: dist/img
- src: img/**/*.jpeg
dest: dist/img
- src: img/**/*.gif
dest: dist/img
- src: img/**/*.svg
dest: dist/img
js:
- src: js/**/*.js
dest: dist/js
js-concat:
- src: js/concat/*.js
name: all.js
dest: dist/js
svg-sprite:
- src: img/sprite/*.svg
name: sprite.svg
dest: dist/img/sprite
browsersync:
server: null # Static sites
proxy: null # Dynamic sites
reload: null # Glob to watch for reload
If you want to configure your own paths, you can run buildozer config
to generate a .buildozerrc
in your folder and change the paths however you like. All src
paths are prefixed src_base_path
, the dest
paths are prefixed with dest_base_path
.
If you want to combine multiple .js
files into one file, you can drop the files in js/concat
and Buildozer will generate a single all.js
file. The files themselves are also compiled to the destination folder for whenever they need to be used stand alone.
You can combine multiple <svg>
s you use into one sprite. Just drop the files in the img/sprite
folder and the sprite will be generated as dist/img/sprite/sprite.svg
.
Browsersync can be enabled for as well serving static sites (server
option) or dynamic sites (proxy
option). With the reload
option, you can define a glob to watch for. Browsersync will then reload the page if one of the matching files is changed. For example, use **/*.html
to watch for changes in HTML files.
Browserslist is a single configuration for all tools that need to know what browsers you support. Just create a Browserslist compatible configuration and define the browsers you want to support.
For example you could place a .browserslistrc
in your document root.
# Browsers that we support
last 1 version
> 1%
IE 10 # sorry
Tools like Autoprefixer will compile according to the Browserslist configuration you defined.
Loading extra PostCSS plugins can be done by overriding the default config. This can be done in multiple ways documented on the postcss-load-config repository.
For example you could place a postcss.config.js
in your document root.
module.exports = () => {
return {
plugins: {
'rfs': {},
'autoprefixer': {},
'cssnano': {}
}
}
};
Additionally files can be copied before if needed. Useful whenever you need some files from the node_modules
folder which you don't have available on production.
copy:
- src: node_modules/jquery/dist/jquery.min.js
dest: js/vendor
- src: node_modules/bootstrap/dist/js/bootstrap.min.js
dest: js/vendor
In your .buildozerrc
configuration file, it is possible to enable config search. With this feature you can drop .buildozerrc
in sub folders within your project which will be detected by Buildozer. This way you can bundle your CSS, JS or images in a folder they belong to without the need of a seperate setup. Make sure to exclude folders in which you do not want to look for configuration files with the ignore
option.
config_search:
enabled: true
ignore:
- '**/vendor/**'
- '**/node_modules/**'
The following structure represents a simplified Drupal folder structure in which .buildozerrc
files are used to create a modular setup:
drupal_project/
├── modules/
| └── custom/
| ├── custom_module_1/
| | ├── js/
| | │ └── module-js.js
| | └── .buildozerrc
| └── custom_module_2/
| ├── img/
| │ └── module-img.svg
| └── .buildozerrc
├── themes/
| └── custom/
| └── custom_theme/
| ├── css/
| │ └── main.scss
| ├── js/
| │ └── main.js
| └── .buildozerrc
└── .buildozerrc # In this file `config_search` is enabled
As soon as Buildozer detects a linting configuration file, linting will be enabled. Buildozer takes a pretty aggressive approach when the linting rules are not followed: if the linting fails, no CSS or JS will be build.
ESLint is JavaScript linter which can easily be enabled by dropping your cosmiconfig configuration in the folder which you want to be linted.
project/
├── css/
│ └── …
├── js/
│ └── …
├── img/
│ └── …
├── .buildozerrc
├── .eslintignore # Optional ignore file
└── .eslintrc
Apart from just javascript linting, Buildozer also provides CSS linting with stylelint. Just drop the configuration file to get started:
project/
├── css/
│ └── …
├── js/
│ └── …
├── img/
│ └── …
├── .buildozerrc
└── .stylelintrc
Use buildozer build --verbose
(or watch) to output more details. With this option all files which are copied are logged. You'll also see some more information about the images which are compressed.
Use buildozer watch --fix
(or build) to fix linting issues that can be fixed automatically.
Autoprefixer will always run, even if you don't configure it in a custom PostCSS config. To disable it, use buildozer build --disable-autoprefixer
.
The environment variable env
determines whether files need to be minified. Minification will be enabled whenever this variable is set to production
. If anything else is set, minification will be disabled. By default, the build
command uses production
, unless the variable is overridden by something else like buildozer build --env=development
.
Looking to contribute something to Buildozer? Just have a look at the open issues to check if there's anything interesting. You can also just have a look at the source code to see if there's anything which can be improved.
These are the steps you'll need to take to create a new PR.
- Make sure you have the latest node and npm version installed
- Fork the buildozer repository
- Clone your fork
- Make a new branch describing what you want to fix/add
- Develop your excellent code
- Make sure to add tests if needed
- Some tests are meant to fail, these tests are checked in
test/fail-tests.js
- Run
npm test
to check every test passes - Commit, push & create a PR
- Describe what is changed in your PR description
Thanks Intracto for development maintenance & icons8 for providing a logo.