in Review, Uncategorized

Laravel Elixir: Cakewalk frontend build configuration

As a frontend developer, you would be accustomed to using task runners like grunt or gulp.

Task runner automate the usually tasks like concatenation, minification, trans-compiling etc. Chances are you even wrote the configuration files for your task runners. If you have written or seen such configuration, you would agree its a tedious task. Finding out which task to run and then configuring the input output directories and what not.

Recently i was exploring laravel and php, and for frontend automation the docs referred to –

    Laravel-elixir

Frontend automation with gulp and laravel elixir

Laravel-elixir is a breeze to use,it uses convention over configuration. Instead of specifying everything it assumes you are following laravel’s convention , this dramatically reduces the level of configuration needed to get you started. You can still specify and customize everything .

Lets see how you can compile sass or less

var elixir = require('laravel-elixir');

elixir(function(mix) {
    mix.sass('app.scss');
});
var elixir = require('laravel-elixir');

elixir(function(mix) {
    mix.less('app.less');
});

Yes that is all you need to do to make it work. But what about javascript.

elixir(function(mix) {
    mix.coffee('app.coffee');
});

or may be you prefer browserify. No Problem!

elixir(function(mix) {
    mix.browserify('app.js');
});

All of the task follow a convention which make them super convenient.

... 
    mix.task_name(file_name);
    mix.task_name([file_name1, file_name2]);
    mix.task_name([file_name1, file_name2], destination_path);
...

Other tasks include

...
    // Concatenation 
    mix.styles(['main.css', 'dashboard.css'])
          .scripts(['main.js', 'dashboard.js'], 'public/js/main.js'); 
          //Copying 
          .copy(source_file, destination_file);
...

As you can see elixir provide a fluent api, so you can chain stuff.
Well what if i need to generate two sets of css files?

...
    mix.sass(['app.scss', 'dashboard.scss'], 'public/js/main.js');
    mix.sass(['admin_index.scss', 'admin_dashboard.scss'], 'public/js/admin.js');
...

Minification is a good practice,it reduce page loading time. Turns out you dont even need to write code for this one. Just run gulp with production flag and it just works.

$> gulp --production

Versioning

Elixir also supports versioning. Versioning helps invalidate browser cache, this makes sure that the user sees the right version of your app. You might be adding
query parameter to hrefs.

...
    mix.version(['css/all.css', 'js/app.js']);
...

Now if you run gulp and check the public directory you’ll see files like app-43ft.js app-23*4.css. Gulp now attaches random hashes to the files. This does solve the cache problem but how the heck are you going to include this in your html?

<link rel="stylesheet" href="{{ elixir('css/all.css') }}">



<script src="{{ elixir('js/app.js') }}"></script>

BrowserSync.

Browser Sync lets you live reload browser on code changes. No need of reloading your browser all the time. It also has a nifty feature of keeping all browser in sync. What this means is you can test on multiple browser(even your phone) not having to scroll in each, they are in sync.

All you need to do

...
    mix.browserSync();
    //Optionally if you have a vagrant setup
    mix.browserSync({'proxy':'domain.dev');
...

and run

$> gulp watch

Elixir is highly extendable, you can write your own tasks which you later can use as usual tasks.See larvel for more details on writing extension.

Finally, what i use in my daily setup is something this

elixir(function(mix) {
    mix.sass(['app.scss', 'index.scss'])
		.browserify([
			'app.js', 'validators.js', 
			'credits.js', 'register.js',
			'upload.js'
		], './public/js/bundle.js')
		.phpUnit()
		.browserSync({proxy:"gabber12.me"});
});

Please drop a comment if you liked/disliked the post.

Write a Comment

Comment