How to use Gulp with Laravel?

Question

Laravel

My task for compiling Blade templates from Jade:

gulp.task('views', function () {
  var jsFilter = filter('**/*.js', { restore: true });
  var cssFilter = filter('**/*.css', { restore: true });
  var htmlFilter = filter('**/*.html', { restore: true });

  return gulp.src('resources/jade/**/*.jade')
    .pipe(jade(config.jade))
    .pipe(useref(config.useref))

    .pipe(cssFilter)
    .pipe(minifyCss())
    .pipe(gulp.dest('public/assets/css'))
    .pipe(cssFilter.restore)

    .pipe(jsFilter)
    .pipe(uglify())
    .pipe(gulp.dest('public/assets/js'))
    .pipe(jsFilter.restore)

    .pipe(htmlFilter)
    .pipe(rename({extname: ".blade.php"}))
    .pipe(gulp.dest('resources/views'));
});

If you connect styles and scripts like this, then everything is ok:

link(rel='stylesheet', href!='assets/css/vendor.css')

// build:css assets/css/app.css
link(rel='stylesheet', href!='assets/css/main.css')
// endbuild
...
script(src!='assets/js/vendor.js')

// build:js assets/js/app.js
script(src!='assets/js/main.js')
// endbuild

But if you add a Laravel helper to generate a URL:

// build:css assets/css/app.css
link(rel='stylesheet', href!='url("assets/css/main.css")')
// endbuild

, then throws an error saying that the file was not found:

How can I fix this?

Answer 1

Elixir
package.json

{
  "private": true,
  "devDependencies": {
    "gulp": "^3.8.8"
  },
  "dependencies": {
    "laravel-elixir": "^3.0.0",
    "bootstrap-sass": "^3.0.0"
  }
}

npm i