I am following this: https://laravel.com/docs/5.3/elixir
Here is my gulpfile.js:
elixir(mix => {
mix.webpack('app.js')
.styles([
'bootstrap.min.css',
'agency.css',
'font-awesome.min.css',
'bootstrap-social.css',
'bootstrap-datetimepicker.min.css',
'select2.min.css',
'icheck.css',
'custom.css'
])
.scripts([
'jquery.easing.min.js',
'jqBootstrapValidation.js',
'agency.min.js',
'moment.js',
'bootstrap-datetimepicker.min.js',
'select2.min.js',
'contact_me.js',
'icheck.min.js',
'ckeditor.js',
'echo.js',
'custom.js'
])
.version(['css/all.css', 'js/all.js']);
});
Here, I'm simply merging all css and js files into two files: all.css and all.js to minimise HTTP request(to improve performance)
Those two merged files, getting stored at
public/build/css/all-5ba9458ba4.css
public/build/js/all-1723826a20.js
And I'm including them into templates like:
<link rel="stylesheet" href="{{ elixir('css/all.css') }}">
<script src="{{ elixir('js/all.js') }}"></script>
The issue here is that those combined css and js i.e all.css and all.js getting stored inside of "build" directory.
So, I need to move other related dependencies (like fonts) inside that build directory.
So, what is the solution over here?
Any help would be appreciated.
Thanks,
Parth vora
Elixir's version method allows you to set a path I believe
mix.version(['css/all.css', 'js/all.js'], 'public');
Then use
elixir('path/to/script.js', null) // note the null
In your case
<link rel="stylesheet" href="{{ elixir('css/all.css', null) }}">
<script src="{{ elixir('js/all.js', null) }}"></script>
This should work:
mix.version(['style.css', 'script.js'], 'public');
https://laravel.com/docs/5.3/elixir#versioning-and-cache-busting
As per this documetation, I think there is no such option to provide custom path for version method.
https://laravel.com/docs/5.3/elixir#versioning-and-cache-busting
Related
Getting to know laravel (using version 6) and i was wondering how i can make sure that my view is using my Vue component? In this case its the HelloWorld.vue component i want rendered in the albums.blade.php view file.
In my app.js i have made sure to register the component like this:
Vue.component('hello-world', require('vue\src\components\HelloWorld.vue').default);
And then im using it like this inside the albums.blade.php:
<hello-world></hello-world> and i have also made sure to include the script tag referring to app.js like this:
<script src="{{ asset('js/app.js') }}" defer></script>
With no success... any inputs?
See my folder structure here
you need to use laravel mix for vue js
Laravel Mix
change your <script src="{{ asset('js/app.js') }}" defer></script>
to <script src="{{ mix('js/app.js') }}" defer></script>
Place check Laravel Mix docs
My personal config using Laravel mix is:
app.js
require('./bootstrap');
import Vue from 'vue';
window.Vue = Vue;
/** Auto register components */
const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
// Other things
// ....
const app = new Vue({
el: '#app'
});
albums.blade.php
Place this script tag at the bottom of the page.
<script src="{{ mix('js/app.js') }}"></script>
Then you could use the component like this:
<div>
<hello-world></hello-world>
</div>
Recommendation
Consider learning Laravel 9 instead of Laravel 6. This because 9 is the newest version and also the actual LTS release.
In my head section of my form.layout.blade.php I have the following:
<head>
<script src="/js/main.js"></script>
<head>
This is layout file is loaded before all pages are loaded. Is there a way to not load main.js for a specific route?
you can use if statement like this. main.js will not load on this page
#if(!Request::is('subpage/url'))
<script src="/js/main.js"></script>
#endif
The workaround I used for not loading scripts on all sites, is that I put script paths in variables in controllers, something like this:
public function show($id){
$scripts[] = '/js/main.js';
view()->share('scripts', $scripts);
return view('view', $someData);
}
This allows me to use this script only on a page I really need it, like this:
#if(isset($scripts))
#foreach($scripts as $key => $value)
<script src="{{mix($value)}}"></script>
#endforeach
#endif
Hope that this can lead you in right direction.
You can use if statements
#if(!in_array(Route::currentRouteName(), ['route.name', ...]))
<script src="/js/main.js"></script>
#endif
Ths should be simple enough, but...
I have a layout view dashboard-layout.blade.php with:
#section('headscripts')
<script src="{{ mix('/js/app.js') }}" defer></script>
#show
And a billing.blade.php view that extends the layout file:
#extends('layouts.dashboard-layout')
#section('headscripts')
#parent
<script src="https://js.braintreegateway.com/web/dropin/1.17.2/js/dropin.min.js"></script>
#endsection
The problem is, this only outputs the first script...what am I doing wrong?
You can simply use #stack('name here') instead of #yield('name here')
and use
#push('name here')
// Add Your Script Here
#endpush
instead of
#section('name here')
// Scripts
#endsection
to solve your problem.
I have added in my public folder one folder called js and inside a script.js. In the view:
<script type="text/javascript" src="{!! asset('/js/script.js') !!}"></script>
and all is working in local but on the server I receive a get error:
https://url/js/script.js
How is it possible?
you should use {{ }} instead of {!! !!}
<script type="text/javascript" src="{{ asset('js/script.js') }}"></script>
{!! !!} used for Displaying Unescaped Data
By default, Blade {{ }} statements are automatically sent through
PHP's htmlspecialchars function to prevent XSS attacks. If you do not
want your data to be escaped, you may use the following syntax:
1st Simple Way To give the path: As Per Laravel 5.4 File Structure asset folder inside the resources folder So Suppose Your file inside that. ( resources/asset/ ) So You Can Use Like Below Example:
<script type="text/javascript" src="{{ URL::asset('js/jquery.js') }}"></script>
<link rel="stylesheet" href="{{ URL::asset('css/somestylesheet.css') }}" />
2nd Way You can just pass the path to the style sheet .
{!! HTML::style('css/style.css') !!}
You can just pass the path to the javascript.
{!! HTML::script('js/script.js'); !!}
Add the following lines in the require section of composer.json file and run composer update "illuminate/html": "5.*"
Register the service provider in config/app.php by adding the following value into the providers array:
'Illuminate\Html\HtmlServiceProvider'
Register facades by adding these two lines in the aliases array:
'Form'=> 'Illuminate\Html\FormFacade',
'HTML'=> 'Illuminate\Html\HtmlFacade'
3rd Way Place your assets in public directory and use the following:
<script type="text/javascript" src="{{ URL::asset('js/jquery.js') }}"></script>
<link rel="stylesheet" href="{{ URL::asset('css/somestylesheet.css') }}" />
OR ( Use URL::to() )
<link rel="stylesheet" type="text/css" href="{{ URL::to('css/style.css') }}">
<script type="text/javascript" src="{{ URL::to('js/jquery.min.js') }}"></script>
and all is working in local but on the server I receive a get error:
By server, are you referring to a remote server (e.g. VPS)? or PHP's built-in web server?
Have you tried running php artisan cache:clear as well?
I think you can try this for solve issue for http and https because your script and css no run in https url:
First you can create SchemalessUrlGenerator file in App\Libraries:
<?php
namespace App\Libraries;
use Illuminate\Http\Request;
use Illuminate\Routing\RouteCollection;
use Illuminate\Routing\UrlGenerator;
use Illuminate\Support\Str;
class SchemalessUrlGenerator extends UrlGenerator
{
public function __construct(RouteCollection $routes, Request $request)
{
parent::__construct($routes, $request);
}
public function to($path, $extra = [], $secure = null)
{
// First we will check if the URL is already a valid URL. If it is we will not
// try to generate a new one but will simply return the URL as is, which is
// convenient since developers do not always have to check if it's valid.
if ($this->isValidUrl($path)) {
return $path;
}
$scheme = $this->getScheme($secure);
$extra = $this->formatParameters($extra);
$tail = implode('/', array_map(
'rawurlencode', (array) $extra)
);
// Once we have the scheme we will compile the "tail" by collapsing the values
// into a single string delimited by slashes. This just makes it convenient
// for passing the array of parameters to this URL as a list of segments.
$root = $this->getRootUrl($scheme);
if (($queryPosition = strpos($path, '?')) !== false) {
$query = mb_substr($path, $queryPosition);
$path = mb_substr($path, 0, $queryPosition);
} else {
$query = '';
}
return '//' . $this->trimUrl($root, $path, $tail).$query;
}
/**
* {#inheritdoc}
*/
protected function getScheme($secure)
{
// Don't be smart Laravel... ask the browser?!?!
// negotiate the schema to be the same as how page was served
return '//';
}
}
Then you can add SchemalessUrlGenerator related code in App\Providers\AppServiceProvider in register method
$routes = $this->app['router']->getRoutes();
// // Replace UrlGenerator with SchemalessUrlGenerator that will serve content using "//" instead
// // of "http" or "https"
$schemalessUrlGenerator = new SchemalessUrlGenerator($routes, $this->app->make('request'));
$this->app->instance('url', $schemalessUrlGenerator);
Hope this help for you!
I'm still new to Laravel. Anyway, I'm making a small system of viewing and creating articles to be shown in the main site. I wanted to create a page that displays an article from the database, using a parameter from the URL, like this:
http://localhost:8000/read/1
The above, for example, will display the article with 'id' value of 1 in the database.
So it works just fine, but problem is, after I got it to work (which took me some time since I'm a newbie), the whole style just disappears from the page. I tried to rewrite everything but it still didn't work. New pages that I create include the style just fine.
This is my route line:
Route::get('read/{id}', array('as' => 'read', 'uses' => 'NewsController#readArticle'));
NewsController readArticle function:
public function readArticle($id) {
$article = NewsMessage::where('id', $id) -> first();
return View::make('news.read', array('article' => $article));
}
And the file read.blade.php (located in views/news/read.blade.php)
#extends('layouts.main')
#section('content')
{{ $article -> title }}
#stop
So the whole PHP code works fine and I manage to get the title. But for some reason, the whole style disappears and this is what I see:
http://puu.sh/ctO6J/db30fbe102.png
So any idea, what have I dont wrong that caused this? The other pages work just fine with the style included.
Thank you!
The issue is that the path to the image is incorrectly specified.
You can either use the built in asset methods or something like {{ URL::to('/')/imagepathhere/filename.jpg }}
Assuming you have your styles links wrote as:
#extends('layouts.main')
#section('styles')
<link href="css/custom.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet" />
#endsection
#section('content')
{{ $article -> title }}
#endsection
Correct Syntax:
#extends('layouts.main')
#section('styles')
<link href="{{ asset('css/custom.css') }}" rel="stylesheet" />
<link href="{{ asset('css/styles.css') }}" rel="stylesheet" />
#endsection
#section('content')
{{ $article -> title }}
#endsection
And make sure your css folder is located at public folder when calling with asset() helper.
This issues of disappearing the whole page styles is causing by accessing the image or css file or any other resources, and the solution is to use asset() helper function.
NOTE: YOUR ROUTES AND CONTROLLER HAS NO ISSUE, YOU DON'T NEED TO TOUCH EITHER.