node package manager

laravel-elixir-jade

laravel-elixir-jade

Simple Laravel Elixir wrapper to compile Jade to Blade/PHP.

Compiled Templates are located in your /resources/views/ folder as default.

Installation

Run the following command in your Laravel project:

npm install laravel-elixir-jade

Next, add the following line into your gulpfile.js:

require('laravel-elixir-jade');

And your done!

NOTE: Jade files, with default options, should be in a /resources/jade/ folder. Make sure to create one!

Options

For Jade's options, see http://jade-lang.com/api/

Additional options

  • blade: if false, it will compile to *.php instead of *.blade.php.
  • html: if true, it will compile to *.html
  • extension: for any other file extensions, set the value as string, with or without .
  • jadephp: !experimental! if true, it will use gulp-jade-php, else gulp-jade

All other options should be pretty straight forward.

These are the default options:

{
    baseDir: './resources',
    blade: true,
    html: false,
    dest: '/views/',
    pretty: true,
    search: '**/*.jade',
    src: '/jade/',
    jadephp: false
}

Example gulpfile.js

var elixir = require('laravel-elixir');
 
require('laravel-elixir-jade');
 
elixir(function(mix) {
    mix.jade({
        search: '*.jade',
        src: '/templates/'
    });
});

Usage

Mixins for Blade statements by other people

@JaminFarr made an excellent gist of jade mixins which you can use with laravel-elixir-jade, as well as @franzose whose awesome gist can be found here.

Simple stuff

If you want to use something like url() or URL::asset(), you can do it like this:

//- Example Stylesheet
link(href!='{{ URL::asset("assets/css/example.css") }}', rel='stylesheet')
 
//- Attributes
span(class='{{ $cool_class }}')
 
//- Block
div
    | Hello {{ $username }}!
 
//- Inline
div Welcome back, {{ $username }}!

NOTE: Just remember to use != to prevent HTML from being escaped in the output or escape " and ' yourself with a backslash.