Asset pipeline can be defined as a tool or service mechanism to compress, minify and concatenate the assets like css, javascript. With this process, we can improve our app performance by minimising the number of http request. In laravel, we can achieve this using the built in package called “Elixir” which was added in Laravel 5. It will be running on the gulp tool. Gulp makes the process easier. Let us look into the elixir in detail.
What is Elixir?
Jeffrey Way has evolved Elixir which simplify the process of asset compression, concatenation and compilation, it includes some basic type of tasks:
1. Compilation of sass, less and coffee files
2. Concatenation
3. Versioning
4. Copying files
Configuration & Installation Setup
Before using Elixir, you need to have node.js installed on your machine. To check this installation, run this command,
node -v
Then, you need to pull in Gulp as a global NPM package:
npm install --global gulp
package.json file will have the contents and the dependencies for the elixir command to run.
To use elixir, from the root of your Laravel application run the command (before running this command, make sure that the user has admin permission to install this) :
npm install
In the root folder, you may have gulpfile.js file to execute your tasks(minify,concatenate,merge multiple files into a single file)
Laravel provides methods to compile the less, sass, coffee scripts and for combining the multiple css and script files. Let’s see those methods below in detail.
Less & Sass
Less and Sass methods are used for compiling less and sass files into css correspondingly.
elixir(function(mix) {
mix.less('app.less');
});
This will compile a less file named app.less which is placed under resources/assets/less. Once the compilation is done, the file will be stored in public/css. You can also mention the destination directory as an optional parameter to the less method as below.
elixir(function(mix) {
mix.less('app.less', 'public/stylesheets/style');
});
To compile sass files, you would do the same thing but instead of storing the sass file in resources/assets/less you would save it in resources/assets/sass folder and compile it using
elixir(function(mix) {
mix.sass('app.scss');
});
Here also you can customise the destination folder as said above. Also multiple less or sass files can be used in this method in first argument as array.
Coffeescript
Coffee method allow you to compile the coffee script into plain javascript. The output files will be stored in resources/assets/coffee directory.
elixir(function(mix) {
mix.coffee(['app.coffee', 'controllers.coffee']);
});
The above method will compile all the scripts mentioned in the array and will generate a single file called app.js in public/js directory.
Concatenation
You can concatenate files with elixir, to combine your stylesheets just use styles method. It will combine the mentioned css files into a single file and output css file will be placed in public/css/all.css
elixir(function(mix) {
mix.styles([
'normalize.css',
'main.css'
]);
});
The same is applicable for script files using the scripts method. Here output javascript files will be stored in public/js/all.js.
mix.scripts([
'module1.js', 'module2.js'
]);
You can also combine the list of css files or script files under a particular directory by simply mentioning the directory name instead of mentioning all the file names separately.
mix.stylesIn('public/css');
and for javascript files
mix.scriptsIn('public/js');
Versioning
Elixir provides the versioning concept for the complied css and script files.
To version a file you simply:
mix.version('path/to/file');
You are allowed to pass multiple files for this method to add versioning. Once the versioning process is done, all files will be stored in public/build. Output filenames will be generated by appending a query string to the file or using random strings.
Versioned files will be included in blade template using the below code,
<link rel="stylesheet" href="{{ elixir('css/main.css') }}" />
<script src="{{ elixir('js/main.js') }}"></script>
Copying files
The copy method can be used to copy files and directories to new locations. All these operations are relative to the project’s root directory:
elixir(function(mix) {
mix.copy('vendor/foo/foo.css', 'public/css/abc.css');
});
elixir(function(mix) {
mix.copy('vendor/package/views', 'resources/views');
});
Running Elixir tasks
To run the tasks listed above, you can simply run
gulp
This will run all the tasks mentioned in gulpfile. If you are in production environment, you can run this
gulp --production
To watch the file for frequent changes, you need to run
gulp watch
This will listen for the changes in css and script files for the changes. If any changes are done, compilation will be done automatically and updated file will be used in your application.
Finally with the help of gulp tool and elixir helper functions, we have done the process of compilation and versioning of styles and scripts. Elixir is a useful tool to integrate Gulp into your Laravel projects. You can make use of this, to make your app to perform faster.