Laravel 5 css and js includes

Include plain and simple css and javascript files in Laravel

For example, you have a css file yourapp.css and a javascript file yourapp.js, they need to be located in public/css and public/js directories respectively, so their file path look like this:

public/css/yourapp.css
public/js/yourapp.js

Then in your blade template file, in resources/views/app.blade.php, include the css and js files like this

<link rel="stylesheet" href="{{URL::asset('css/yourapp.css')}}">
<script type="text/javascript" src="{{URL::asset('js/yourapp.js')}}"></script>

Include css and javascript files using gulp and exlixir in Laravel
1. Download the node.js, the build tool gulp need the npm, node package manager to download it.

2. Go to your laravel project root folder and run the following commands.

npm install --global gulp
npm install

3. Open the gulpfile.js located in the root directory of your Laravel project, copy and paste the following to overwrite the existing content starting from the line of elixir(function(mix)

elixir(function(mix) {
    mix
    .sass('app.scss')
    .styles([
        'yourapp.css'
    ])
    .scripts([
        'yourapp.js'
    ])
    .version(["public/css/all.css", "public/js/all.js"]);
});

4. Create these three files and add some css and js in it

resources/assets/css/yourapp.css
resources/assets/js/yourapp.css
resources/assets/sass/app.scss

5. Run the gulp command to build the css and js, it will generate a final css and js into the public folder

gulp
gulp watch # with watch, it will recompile the css and js once a change is made to the css or js files in assets folder.

6. Use elixir to include the compiled css and js into the template file.

<link href="{{ elixir('css/all.css') }}" rel="stylesheet">
<script src="{{ elixir('js/all.js') }}"></script>

Search within Codexpedia

Custom Search

Search the entire web

Custom Search