laravel-elixir6-useref
v1.1.3
Published
Useref Extension for Laravel Elixir 6.x
Downloads
1
Readme
Laravel-Elixir6-Useref
This is a simple wrapper around Laravel Elixir v6 for Useref. inspire by laravel-elixir-useref
Getting Started
Install the module with npm or yarn:
yarn
$ yarn add laravel-elixir6-userefor
npm
$ npm install --save laravel-elixir6-userefAnd add it to your Elixir-enhanced Gulpfile, like so:
var elixir = require('laravel-elixir');
require('laravel-elixir6-useref');
elixir(function(mix) {
mix.useref([
'layouts/construct.blade.php',
'app/app.blade.php'
]);
});Then you just have to edit your php file(s) and some extra markup, like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- build:css(public) css/all.css -->
<link rel="stylesheet" href="bower_components/dropzone/dist/min/dropzone.min.css" />
<link rel="stylesheet" href="css/app.css" />
<!-- endbuild -->
</head>
<body>
<!-- build:js(public) js/all.js -->
<script src="bower_components/dropzone/dist/min/dropzone.min.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->
</body>
</html>This will scan your asset dependencies in your app.blade.php, concat and minimise those files and put them in your public directory as css/all.css and js/all.js (you can change the name in the tag if you like).
This tool is really powerful if you use laravel-elixir-wiredep to inject your assets in:
@if ( Config::get('app.debug') )
<!-- build:css(public) css/all.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
@else
<link rel="stylesheet" href="{{ elixir("css/all.css") }}">
@endifNote: It will not replace the assets in your app.blade.php - you should check if you are in production / debug mode and output your compiled assets or your source assets:
@if ( Config::get('app.debug') )
<!-- build:js(public) js/all.js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->
@else
<script src="{{ elixir("js/all.js") }}"></script>
@endifOptions
This wrapper accepts four arguments for configuration:
- php file paths (string|array)
- outputDir
- baseDir
- useref (document)
Example
This is an example of a Gulp file that runs wiredep to inject all our assets and then uses useref (searching in the public directory) to compile all the assets in master.blade.php :
var elixir = require('laravel-elixir');
require('laravel-elixir6-useref');
elixir(function(mix) {
mix
.wiredep()
.useref('master.blade.php', null, null, { searchPath: 'public' });
});