Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

laravel-elixir-wiredep

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

laravel-elixir-wiredep

Laravel Elixir Wiredep extension

  • 2.1.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

#Laravel-Elixir-Wiredep

This is a simple wrapper around Laravel Elixir for Wiredep.

npm npm

Getting Started

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.

NOTE

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"
}

Options

This wrapper accepts three optional parameters with configurations:

mix.wiredep(type, config, opts);
  • type - a string with the type of file 'php','sass','scss','less'
  • config - an object with the configs for the laravel-elixir-wiredep package
  • opts - an object with the configs for the wiredep package, you can get more info about it here

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 } );
});

Examples

PHP

Wiredep one PHP file

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'});
});
Wiredep multiple PHP files

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();
});

Styles

Scss

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;
Sass

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;
Less

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;

Multiple Wiredeps

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();
});

Keywords

FAQs

Package last updated on 29 Feb 2016

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc