Unikapps

How to use Laravel-elixir with Cakephp 3

The short answer:
Just set your assets and public paths like this in gulpfile.js:

elixir.config.assetsPath = 'path_to_assets';
elixir.config.publicPath = 'webroot';
elixir.config.appPath = 'src';

The Long Answer:
My main PHP framework is CakePHP, recently I worked in a project using Laravel. One of the things I like about it, is Laravel Elixir.

What is Laravel Elixir ?
Laravel Elixir provides an API to easily perform the common Gulp tasks like compiling LESS, SASS, coffeescript or even testing by using method chaining.

Example:

elixir(function(mix) {
   mix.sass('app.scss');
});

In laravel this will compile resources/assets/scss/app.scss and copy it to public/css/app.css

But what about CakePHP, that’s what we are here for, right! Guess what? We can use the same syntax with any project, and let’s illustrate this using CakePHP 3

First let’s create new CakePHP project using composer and name it CakeElixir

> composer create-project --prefer-dist cakephp/app CakeElixir

When the installation is complete create package.json file in the root of your application CakeElixir/package.json with this content

//CakeElixir/package.json 
{
  "private": true,
  "devDependencies": {
    "gulp": "^3.8.8"
  },
  "dependencies": {
    "laravel-elixir": "^4.0.0",
    "bootstrap-sass": "^3.0.0"
  }
}

In command line navigate to CakeElixir in my case it’s in c:/xampp/htdods/ CakeElixir and run

cd /xampp/htdocs/CakeElixir
>npm install

This will install Gulp, laravel-elexir and bootstrap-sass. If your operating system is Windows and the previous command does not work, use this one like mentioned here

>npm install --no-bin-links

It will take some time to install the dependencies. After that create CakeElixir/gulpfile.js with this content :

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

And we finally get to CakePHP, to make elixir work with it we need to do some configurations.

First thing the assets folder, if you remember in laraver it’s in resources directory but in CakePHP there is no such logic, so I prefer to put it in the root of the project. Go ahead and create folder named CakeElixir/assets and update gulpfile.js

var elixir = require('laravel-elixir');
elixir.config.assetsPath = 'assets'; //This will contain all our source files
elixir.config.publicPath = 'webroot'; // compiled files goes here

elixir(function(mix) {
   mix.sass('app.scss');
});

For more configuration properties check here

Resources are mapped like this:
Less files are in assets/less
Sass files are in assets/scss
Scripts are in assets/js
Styles are in assets/css

Let’s create assets/scss/app.scss with some basic content:

$background: #F5F5F5;
body {
  background: $background; 
}

In the command line run:

>gulp

If you did everything right, assets/scss/app.scss will be compiled and saved to webroot/css/app.css

And don’t foget to add app.css to your layout:

 echo $this->Html->css('app.css') 

Check the main Laravel-elixir page for more informations.

If you are stuck somewhere or if you have any questions, let me know by adding a comment below.

Happy coding.