Laravel Elixir Setup and Uses

Laravel Elixir provides a clean, fluent API for defining basic Gulp tasks for your Laravel application. Elixir supports several common CSS and JavaScript pre-processors, and even testing tools. Using method chaining, Elixir allows you to fluently define your asset pipeline. For example:

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

Gulp is a task/build runner for development. It allows you to do a lot of stuff within your development workflow. You can compile sass files, uglify and compress js files and much more.

Installation & Setting Up

• First Setup Node
• Try Following command to check node version

• node -v 

    
• Install Gulp Globally
• Try Following command 

• npm install --global gulp-cli (for windows)

• sudo npm install --global gulp-cli (for linux)

• npm install -- (to install npm dependency: use sudo for linux do install all dependency)

After   Installing all dependency , run following code to notify all changes related to app.scss or any file your are willing to work.

gulp watch 

Lets say, we want to make change to app.scss and convert it to css file under public folder.

To do this, first change 

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

to

elixir(function(mix) {
    mix.sass('app.scss','public/style.css');
});

now change code in app.scss file and you'll see all changes in public/style.css file.