Elixir is a clean, fluent API for Gulp which came bundled with Laravel versions 5.0 to 5.3; in order to use it you first need to make sure that you have Node.js and NPM installed. Then pull in the dependencies needed to compile your assets:
$ npm install
Each project initiated with Tapestry will have the following Elixir packages installed and configured:
- imagemin: This attempts to optimise your images, reducing filesize without compromising quality.
- exec: This is used so that gulp can execute Tapestry once all assets have been compiled.
- browserSync: This serves your built files locally and refreshes the browser when files have been updated.
The default folder for your projects assets is
source/_assets, it has the following folder structure:
webroot/ └── source/ └── _assets/ ├── img ├── js └── less
Elixir will look for each asset type – e.g. Less, js, – in a subfolder named after that asset type; this behavior can be changed but requires additional configuration so is best avoided.
Once compiled, Elixir will output each asset type to an appropriate folder within
To compile your assets run:
Once gulp has completed it will have already executed Tapestry so your
build_local folder will now be up to date with your changes.
To have Gulp watch your project for changes and compile on demand run:
$ gulp watch
The watch command prompts Elixir to monitor your source folder and recompile each time a file is modified, using the watch command enables BrowserSync; this will open a new browser with the compiled project opened and automatically reload the page each time the project get recompiled.