Melhores formas de request de CSS e JS específicos por página, com Laravel

[ramon-src]

Melhores formas de request de CSS e JS específicos por página, com Laravel

Gostaria de sugerir a criação de um material explicativo sobre qual a melhor maneira de estruturar assets/ fazer uma requisição de um arquivo css ou js para uma página específica. Possuímos os scripts e styles globais nos nossos layouts. Mas algumas páginas de nosso site requerem mudanças específicas na estilização.

[lemesdaniel]

Prefere artigo ou vídeo?

[ramon-src]

O que tu achar melhor de fazer e explicar! Valeu!

[mateusjatenee]

Olha, se vc estiver usando o Blade pode usar um @yield('scripts') ou algo do tipo e na pagina especifica criar uma secao com os scripts.

So pra te dar um caminho enquanto não sai o video/artigo :)

[ramon-src]

@mateusjatenee sim eu estou fazendo isso por enquanto, mas eu queria separar bem as coisas e o que ta mais me cutucando é na parte do CSS, o js tudo bem ficar na mesma página xD.

Mas valeu pela resposta, creio que a mesma poderá servir para outros!

[andreportaro]

Olha, eu cheguei a estender o controller padrão dessa forma:

`namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;
use App\Http\Controllers\Controller;

class MainController extends Controller {

public static $js_files  = [];
public static $css_files = [];

public static function boot()
{
  view()->share('js_files', static::$js_files);
  view()->share('css_files', static::$css_files);
}

public static function carregaView($view, $data, $js_files = null, $css_files = null)
{
    self::$js_files = array('js/jquery.min.js','js/bootstrap.min.js','js/bootstrap-datepicker.js','js/script.js',);
    self::$css_files = array('css/bootstrap.min.css','css/style.css','css/bootstrap-datepicker3.min.css');
    if(isset($js_files)){
        foreach ($js_files as $file){
            array_push(self::$js_files,$file);
        }
    }
    if(isset($css_files)){
        foreach ($css_files as $file){
            array_push(self::$css_files,$file);
        }
    }
    self::boot();
    return \View::make($view)->with($data);
}

}
`

Depois, nos controllers, eu chamava o metodo carregaView, passava um array de js e um de css, assim como os dados.

Não sei se é a melhor forma de conseguir o que você quer!
Eu mesmo abandonei este processo, ainda estou em busca de como inserir de forma mais adequada os assets em cada área diferente.

[vinicius73]

Esse processo não deveria ser nem de conhecimento do php/laravel
A necessidade de injetar Scripts e/ou css em páginas específicas pode demonstrar ineficácia no gerenciamento das mesmas.
Tanto javascript quando css são facilmente "modularizados" para operar apenas nas páginas que deveriam, estando todos em um arquivo só.

Para quem não tem muita intimidade com js e css pode parecer um "bixo de sete cabeças", mas com a aplicação de técnicas simples você consegue resolver isso.

Verei a posse de atender esta solicitação em breve.

[andreportaro]

Não acho que exista a necessidade de "injetar" em páginas específicas, acho
que a pegada é mais organizacional.

Me pergunto se existe uma forma de resolver isso usando gulp/grunt ou algo
do gênero.
Em 10 de mar de 2016 09:16, "Vinicius Reis" [email protected]
escreveu:

Esse processo não deveria ser nem de conhecimento do php/laravel
A necessidade de injetar Scripts e/ou css em páginas específicas pode
demonstrar ineficácia no gerenciamento das mesmas.
Tanto javascript quando css são facilmente "modularizados" para operar
apenas nas páginas que deveriam, estando todos em um arquivo só.

Para quem não tem muita intimidade com js e css pode parecer um "bixo de
sete cabeças", mas com a aplicação de técnicas simples você consegue
resolver isso.

Verei a posse de atender esta solicitação em breve.

—
Reply to this email directly or view it on GitHub
#4 (comment)
.

[vinicius73]

Não só existe como é a ideal @andreportaro

[ramon-src]

@andreportaro No começo de outros projetos eu estava fazendo desta maneira, organizando todos os styles em "partes" e dando imports dos mesmos no arquivo global que iria compilar. Só não sabia que a mesma seria a melhor forma. Então devo juntar tudo em um só arquivo e compilá-lo, e de preferência dar um minify no mesmo?

[vinicius73]

Sim @ramon183
eu "permito" apenas vendor.css, main.css, vendor.js e main.js no html

[ramon-src]

@vinicius73 vendor.css e vendo.js seria os bowers concatenados com o gulp ou grunt?

[vinicius73]

sim @ramon183
https://codecasts.com.br/lesson/gulp-level01-compilando-e-minificando-sass

[joaonivaldo]

@vinicius73 você poderia explicar melhor como modularizar o JS e o CSS conforme você citou. Muito obrigado

[vinicius73]

Veja se ajuda @joaonivaldo https://codecasts.com.br/lesson/javascript-jquery-vol1-01-resolvendo-o-problema

[DaniloCarSan]

Estou com esta duvida também, não sei se estou fazendo do modo correto porem fiz o seguinte:

Criei dois componentes que chamam meus css e js nas minhas views:

Css:
<x-link-style-sheet-component styles="fontawesome,ionicIcons,icheckBootstrap,adminlte,googleFontSourceSansPro" />

Javacript:

<x-script-js-component scripts="jquery,bootstrapBundle,adminlte" />

A logica deste código é mesma para os dois:

<?php
namespace App\View\Components;
use Illuminate\View\Component;


class LinkStyleSheetComponent extends Component
{
 
    public $styles;

    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct($styles)
    {
        $this->styles = $styles;
    }

    private function  getStyles(){

        $styles_url = [
            'icheckBootstrap'=>asset('css/icheck_bootstrap.min.css'),
            'ionicIcons'=>'https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css',
            'adminlte'=>asset('css/adminlte.min.css'),
            'fontawesome'=>[
                asset('css/fontawesome_free.min.css'),
            ],
            'googleFontSourceSansPro'=>'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700'
        ];

        $array = explode(',',$this->styles);

        $styles = [];

        foreach ($array as $style)
        {
            if(!is_array($styles_url[$style]))
            {
                array_push($styles,$styles_url[$style]);
            }
            else
            {
                foreach ($styles_url[$style] as $subStyle)
                {
                    array_push($styles,$subStyle);
                }
            }
        }


        return $styles;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return view('components.link-style-sheet-component',[
            'styles_url'=>$this->getStyles()
        ]);
    }
}

No template de meus components ficam assim;

Css: link-style-sheet-component.blade.php

@foreach ($styles_url as $style)
<link  rel="stylesheet" type="text/css" href="{{$style}}">
@endforeach

Javacript: script-js-component.blade.php

@foreach ($scripts_url as $script)
<script src="{{$script}}" type="text/js" ></script>
@endforeach