Assets

Assets

Assets

By default sites initiated by Tapestries init command come with support for Laravel Elixir.

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.
browserify: This lets your require modules in the browser by bundling up all of your javascript dependencies.
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.

_assets folder structure

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 source, e.g. source/css.

Compiling your assets

To compile your assets run:

$ gulp

Once gulp has completed it will have already executed Tapestry so your build_local folder will now be up to date with your changes.

You can tell gulp which environment to compile via the --env flag, for example:

$ gulp --env=production

Watching for 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.