CODEWITHSUNDEEP
gruntjslaravel-5gulpbowerlaravel-elixir
user3718908x100
user3718908x100

Reputation: 8509

How to use Laravel 5 with Gulp, Elixir and Bower?

I am completely new to all this, 'Bower' and 'Gulp' and Laravel 'Elixir'. I purchased a template that uses them (unfortunately) and now I need some help on how to go about implementing them. I have already installed NPM and Bower. All my packages have been downloaded into:

resources > assets > vendor

This is a screenshot:

enter image description here

Now my question is how do I include all those packages I downloaded in my view? From my understanding I can't run less files directly in the browser, it only runs once due to 'browser caching' or something like that, also the JS scripts are just too many to include in my page.

I want a way where I can work on my files and have them automatically compiled with the compiled files being referenced in my app.php file.

This is a link to the GulpJS file included in my template: http://pastebin.com/3PSN6NZY

Upvotes: 1

Views: 769

Answers (1)

Bill Dukelow
Bill Dukelow

Reputation: 464

You do not need to compile every time someone visits. The compiled sass/js should be run in dev and then the output files referenced.

If you have gulp installed on the project, you should see a gulp.js file in the root of your project. If not, visit here for instructions:

Gulp/Elixer installation and setup

In your gulp.js file:

var elixir = require('laravel-elixir');

elixir(function(mix) {
    mix.less([
    'app.less',
    'normalize.less',
    'some-other-less.less',
    'and-another.less'
]);


mix.scripts(['app.js', 'some-other-js.js'], 'public/js/output-file.js');


});

While in development you can run gulp watch from the command line to listen for changes and run compile tasks when it hears a change. Then you simply reference the output files in the public directory as you normally would.

If you don't want to listen, you can just run the gulp command for a single once-off task run.

The docs are pretty straight forward and can be found here:

Gulp/Elixer docs

Upvotes: 1

Related Questions