Security News
pnpm 10.0.0 Blocks Lifecycle Scripts by Default
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
laravel-elixir-wiredep
Advanced tools
#Laravel-Elixir-Wiredep
This is a simple wrapper around Laravel Elixir for Wiredep.
Install the module with npm:
laravel-elixir >v3.x
$ npm install --save-dev laravel-elixir-wiredep
laravel-elixir < v2.x
$ npm install --save-dev laravel-elixir-wiredep@2.x-release
And add it to your Elixir-enhanced Gulpfile, like so:
var elixir = require('laravel-elixir');
require('laravel-elixir-wiredep');
elixir(function(mix) {
mix.wiredep();
});
Then you just have to edit your php file(s) and some extra markup, like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- bower:css -->
<!-- endbower -->
</head>
<body>
<!-- bower:js -->
<!-- endbower -->
</body>
</html>
This will scan your Bower dependencies on bower.json
and inject them all in your .php
files inside resources/views/
directory. Instead, if you only want to inject dependencies on a single file, you may do:
mix.wiredep({src: 'master.blade.php'})
If you run $ gulp watch
this will also watch your bower.json
for any changes and inject them automatically.
Whenever you install a new bower package with the -S
flag your php files will be updated.
Since Wiredep serves bower components, these must inside the public folder.
Just create a .bowerrc
file in the root of your project folder and specify the destination folder inside the public folder, like so:
{
"directory" : "public/bower_components"
}
This wrapper accepts three optional parameters with configurations:
mix.wiredep(type, config, opts);
'php','sass','scss','less'
These are the default wrapper options and the default wiredep options for each type of file:
sass: {
config: {
baseDir: 'resources/assets/sass',
src: false,
searchLevel: '**/*.sass'
},
opts: {
ignorePath: ''
}
},
scss: {
config: {
baseDir: 'resources/assets/sass',
src: false,
searchLevel: '**/*.scss'
},
opts: {
ignorePath: ''
}
},
less: {
config: {
baseDir: 'resources/assets/less',
src: false,
searchLevel: '**/*.less'
},
opts: {
ignorePath: ''
}
},
php: {
config: {
baseDir: 'resources/views/',
src: false,
searchLevel: '**/*.php'
},
opts: {
ignorePath: /(\..\/)*(public)?/,
fileTypes: {
php: {
block: /(([ \t]*)<!--\s*bower:*(\S*)\s*-->)(\n|\r|.)*?(<!--\s*endbower\s*-->)/gi,
detect: {
js: /<script.*src=['"]([^'"]+)/gi,
css: /<link.*href=['"]([^'"]+)/gi
},
replace: {
js: '<script src="{{filePath}}"></script>',
css: '<link rel="stylesheet" href="{{filePath}}" />'
}
}
}
}
}
You can override the default options, by just passing them as second and third options or in case of PHP files you can omit the first parameter type
and just pass the options.
var elixir = require('laravel-elixir');
require('laravel-elixir-wiredep');
elixir(function(mix) {
mix.wiredep('php',{ src: 'master.blade.php' }, { ignorePath: null } );
//if your first parameter is php you can omit it and achieve the same result
mix.wiredep({ src: 'master.blade.php' }, { ignorePath: null } );
});
This is an example of a Gulp file that Wiredeps only your javascript and CSS dependencies into the resources/views/master.blade.php
:
var elixir = require('laravel-elixir');
require('laravel-elixir-wiredep');
elixir(function(mix) {
mix.wiredep({src: 'master.blade.php'});
});
This is an example of a Gulp file that Wiredeps only your javascript and CSS dependencies into all the PHP files, inside the resources/views/ folder
, that have the bower tags:
var elixir = require('laravel-elixir');
require('laravel-elixir-wiredep');
elixir(function(mix) {
mix.wiredep();
});
This one is an example of a Gulp file that Wiredeps only your scss dependencies into your Scss file and compiles it into the public/css/app.css
:
var elixir = require('laravel-elixir');
require('laravel-elixir-wiredep');
elixir(function(mix) {
mix.wiredep('scss')
.sass('app.scss');
});
On your app.scss just add the bower comments.
// bower:scss
// endbower
@import "someLocalScssFile";
$white: #ffffff;
$black: #000000;
This one is an example of a Gulp file that Wiredeps only your sass dependencies and compiles your Sass file into the public/css/app.css
:
var elixir = require('laravel-elixir');
require('laravel-elixir-wiredep');
elixir(function(mix) {
mix.wiredep('sass')
.sass('app.sass');
});
On your app.sass just add the bower comments.
// bower:sass
// endbower
@import "someLocalSassFile";
$white: #ffffff;
$black: #000000;
This one is an example of a Gulp file that Wiredeps only your less dependencies and compiles your Less file into the public/css/app.css
:
var elixir = require('laravel-elixir');
require('laravel-elixir-wiredep');
elixir(function(mix) {
mix.wiredep('less')
.less('app.less');
});
On your app.less just add the bower comments.
// bower:less
// endbower
@import "someLocalSassFile";
$white: #ffffff;
$black: #000000;
If you want to Wiredep your sass/scss/less styles and also Wiredep Javascript and/or css into your PHP files, you just have to Wiredep twice.
var elixir = require('laravel-elixir');
require('laravel-elixir-wiredep');
elixir(function(mix) {
mix.wiredep('scss')
.sass('app.scss')
.wiredep();
});
FAQs
Laravel Elixir Wiredep extension
We found that laravel-elixir-wiredep demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
Research
Security News
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.