Learn Laravel Elixir by codes

タグ： Laravel5.1   Laravel5.2  

It is an easy way to learn Laravel Elixir, see a sample code. Specially when you are bogging in Elixir. So I'll post this.

Please read an official document to install environments and Laravel Elixier, and follow them. I recommend to try this, install a fresh Laravel project. When people try something at first time, there are tendencies to break it.

A npm setting file, package.json included a dependency with Bootstrap CSS framework SASS version. So, we start to learn how to use this. Samples in this post, works on both Laravel version 5.1 and 5.2.

First of all, just remove // from one line code in resources/assets/sass/app.scss. This line instruct to include Bootstrap's SASS files by SASS syntax.

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

Next, change resources/views/welcome.blade.php to use Bootstrap. This came from Bootstrap sample codes. Maybe you are Bootstrap professional, so make this freely.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Laravel Exiler Sample</title>

    <!-- Bootstrap -->
    <link href="{{ elixir('css/app.css') }}" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <div class="container">
        <h1>Hello, Laravel!</h1>

        <ul class="nav nav-pills">
        <li role="presentation" class="active"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">Sample1</a></li>
        <li role="presentation"><a href="#">Sample2</a></li>
        </ul>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

By <link href="{{ elixir('css/app.css') }}" rel="stylesheet">, instruct to use Elixir's versioning facility. Check Elixir document.

And the last phase of this tutorial, change gulpfile.js on the root of your project directory, like following.

// Copyright on Hirohisa Kawase, if you post about this, link here please.

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

elixir(function(mix) {
    // BrowserSync
    // This function will work when you kick the command 'gulp watch'.
    // Sometime, first access to Access URL by a browser fails.
    // Don't worry, just access again the Access URL.
    mix.browserSync({proxy:'some.local'})
    // As mentioned in the Elixir document,
    // the first argument is option for BrowserSync.
    // When you don't specify a proxy URL that your project's virtual host URL,
    // 'homestead.app' will be used as proxy url.
    // If you want to use PHP build-in server,
    // so type like 'php artisan serve --host=127.10.10.10' for avoiding to use
    // localhost's loop back IP(127.0.0.1),
    // then specify '127.10.10.10:8000' as proxy url for browserSync method.

    // SASS compiling.
    // When you kick 'gulp --production' command, generated css will been compressed. 
    // resources/assets/sass is default source directory.
    // public/css is default destination directory.
    .sass('app.scss')

    // Versioning for app.css file.
    // public is default source directory.
    // public/build is default destination directory.
    .version('css/app.css')

    // File copy. When source file have never been change, do nothing.
    .copy('node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js', 'public/js/bootstrap.min.js');
});

The comments talk a lot, so I never say any more. However it is good to know for you at first.

  1. When you run gulp command, run sequentially you specified.
  2. When you run gulp watch command, each Elixir task run asynchronously.

On run gulp watch, each Elixir task watch out file change. Some tasks have default source directories, so this kind of tasks watch those directories. And when you specified source files/directories as the first argument of task method, also have been watched.

Just how to use them. At first, kick gulp command in your terminal. When watching file change, initial copy don't work.

Then from next time use gulp watch as watch dog to catch up changes on your resources and views file. This command never finish automatically, so you can break by pushing CTRL+C (or something else to stop execution).

Try change welcome view file or insert like body{background-color:green;} to app.scss. Automatically run those codes, and reflect changes into browser/mobile screen. (See Laracasts video about Elixir if you want to see how work without typing any codes...)

Much love.