For this tutorial we will setup gulp for laravel.
It’s fairly easy, but for the sake of confusion I will also explain why we do certain things, as this is not php.

Requirements for this tutorial:
– NodeJS (& npm)
– A laravel project

Every laravel project comes with 2 unknown files, “Package.json” and “gulpfile.js”, these files are read by gulp and nodejs.
Your package.json will look like this:

{
  "private": true,
  "devDependencies": {
    "gulp": "*"
  },
  "dependencies": {
    "laravel-elixir": "*",
    "bootstrap-sass": "*"
  }
}

As you can tell, it depends on “laravel-elixir” & “bootstrap-sass”, you can forget about “bootstrap-sass”, but we will use “laravel-elixir “.
You can also see that the devDependencies depend on “gulp”, Gulp is the cli created in nodejs that will compile your sass files to css.

Now the gulpfile.js, the configuration file for gulp:

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

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

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

As you can tell, it required “laravel-elixir”, laravel elixir is the package created by laravel to pack up all the gulp dependencies needed without a lot of requirements.
Thanks to laravel it has been made a lot easier to set up gulp.

 

Now let’s start, if you have nodejs installed, open a command prompt and go to your laravel project.
then run:

npm install

This will read out the package.json file and install all dependencies needed for gulp.

Now we’ll take a look at the gulpfile,
as you can see it has the following line:

mix.sass('app.scss');

this will tell gulp to compile sass, the app.scss is the file found in resources/assets/sass.
You can also tell gulp where to save the css file if you have multiple in the second argument.

as example:

mix.sass('app.scss', 'public/css/some/other/location/app.css');

and if you have multiple sass files to be compiled to different css file, just add another line with the “mix.sass” function.

Now to compile the sass run this command in the root of your laravel project:

gulp

This will do a onetime compile for your sass files.
If you’re developing on your project and have to do a lot of changes you can run:

gulp watch

This will watch the files you configured in the gulpfile, including the imported files that you import and compile them on each save.

I hope this helped you out, and good luck with sass!