On one of my projects, I was tasked with building an application package with Gulp. This is a useful tool to compile and organize files as needed, and integrates well with the Laravel framework, another great tool for building applications.
Installation Beyond Laravel Documentation
However, the website’s documentation on the Laravel site to merge Gulp with Laravel, by way of Laravel-Elixir, appears to be missing a step or two. The required tools, nodejs and npm, do not download the correct versions by default.
In order to get the Gulp file to execute as expected, without throwing errors such as “no tasks defined”, additional libraries are needed. Under normal conditions Gulp requires tasks to perform a job and rightly should throw errors when these are missing. Except Laravel-Elixir allows functions to be defined instead of tasks, all of which are executed when running the gulpfile with default options.
At the time of this post, I have found that installing the prerequisite nodejs may not be as easy as it seems. Simply running “apt-get install nodejs” does not install the proper version for Gulp.
Rather, the commands below were needed. If nodejs currently exists, uninstall it so as to not conflict with the new installation.
curl -sL https://deb.nodesource.com/setup | sudo bash –
sudo apt-get update
sudo apt-get install nodejs
sudo npm -g install npm@latest
I have also found that Gulp required these libraries to retain full functionality and run the functions such as browserify and mix:
sudo apt-get install build-essential
sudo apt-get install libnotify-bin
With the prerequisite libraries installed, now the commands listed on the Laravel documentation may begin:
sudo npm install –global gulp
sudo npm install
If you know the exact library needed, a smaller installation may be used. For example, “sudo npm install laravel-elixir” works for basic functionality and instructions.
Should Gulp already be installed, but not work properly, delete the node_modules/ directory and begin again from npm install –global gulp
Using Gulp
Here the Laravel documentation (https://laravel.com/docs/5.0/elixir#installation) excels at describing succinctly how to use its functions.
Gulp uses the browserify to move javascript files and the less function to compile .less files into css or run coffee scripts. These are all handled without creating tasks. For example, this gulpfile is entirely legitimate when used with Laravel-Elixir:
var elixir = require(‘laravel-elixir’);
elixir(function(mix) {
mix.less([
‘file1.less’,
‘file2.less’,
‘file3.less’
]);
});
elixir(function(mix) {
mix.less(‘directory/cssToCompile.less’, ‘public/css/directory/plreport.css’);
});
elixir(function(mix) {
mix.browserify(“views/javascriptFile.js”);
});
Troubleshooting:
Early on I noticed this error occurring:
[23:23:59] gulp-notify: [Laravel Elixir] Less Compiled!
[23:23:59] gulp-notify: [Error in notifier] Error in plugin ‘gulp-notify’
Message:
notify-send must be installed on the system.
[23:23:59] Finished ‘less’ after 19 ms
[23:23:59] Starting ‘browserify’…
This means that the required library, libnotify-bin, was not installed properly per the installation steps above. To resolve, I removed the node_modules directory and started over with a fresh npm installation.
