0

Estou criando um site onde, em todas as páginas as tags de script e link para importar as bibliotecas JS e CSS são repetidas.

Existe alguma forma para, por exemplo, eu criar um arquivo scripts.html (por exemplo) e importar este arquivo para todas as minhas páginas consequentemente?

Porque ao adicionar uma nova biblioteca preciso ir página a página e realizar a inclusão manual e, dessa forma, eu incluiria em somente um arquivo e isto iria para toda as outras automaticamente.

Tentei por JQuery através das funções load() e html() mas não consegui, alguém tem alguma solução a respeito?

Segue exemplo abaixo:

<!-- Última versão CSS do BootsStrap compilada e minificada -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<!-- Metis Menu -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.7.0/metisMenu.min.css" />

<!-- Template SB Admin 2 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/startbootstrap-sb-admin-2/3.3.7+1/css/sb-admin-2.min.css" />

<!-- ícones do Template -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<!-- Data Tables -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.dataTables.min.css" />
4
  • Você não usa nenhuma tecnologia server-side? Isso geralmente é feito no lado do servidor.
    – Jéf Bueno
    Commented 24/05/2017 às 18:48
  • Já cogitou a ideia de agrupar todos os scripts em apenas um arquivo e minificá-lo? Há ferramentas que fazem isso por você e, ao final, você só precisará importa um arquivo. O mesmo pode fazer com o CSS.
    – Woss
    Commented 24/05/2017 às 18:48
  • No caso a importação, por exemplo, são de várias bibliotecas hospedadas em cdn, segue abaixo. Vale a pena minificar todas as bibliotecas em um arquivo só? Commented 24/05/2017 às 18:49
  • Edite a pergunta e adicione o código diretamente nela se for relevante ao problema. Basta colar o código no editor, selecioná-lo e pressionar o atalho Ctrl+K para formatá-lo corretamente.
    – Woss
    Commented 24/05/2017 às 18:51

2 Respostas 2

1

Você pode vir a utilizar o RequireJS para gerenciar os seus scripts.

Neste caso você terá apenas 3 scripts, um com o RequireJS em si, um de configuração, e outro com os scripts necessários para a sua pagina.

Incluir RequireJS

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.js"></script>

Configuração.:

requirejs.config({
    shim : {
        "bootstrap" : { "deps" :['jquery'] },
        "datatables" : { "deps" :['jquery'] },
        "theme" : { "deps" :['bootstrap','datatables'] }
    },
    paths: {
        "jquery" : "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js",
        "bootstrap" : "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js",
        "datatables" : "https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/js/jquery.dataTables.js",
        "theme" : "https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/js/dataTables.bootstrap.js"   
    }
});

Então o script da sua pagina seria algo assim.:

require(['jquery', 'bootstrap', 'datatables', 'theme'], function($){
    $(function(){
        $("#outdoor").carousel();
        $("#tabela").Datatables();
    });
});
0

Como o @jbueno comentou, se você utilizar alguma linguagem no lado do servidor, esse tratamento será feito muito mais fácil nela, seja ela PHP, Python, C#, Java ou qualquer outra. Não só mais fácil como recomendado. Porém, se desejas mesmo fazer algo do tipo no lado do cliente, pode fazer conforme descrevi abaixo. Já adianto: não dou garantias que é a melhor solução, nem se é recomendado utilizá-la em produção. Funciona, mas mas isso não quer dizer que possa ser utilizado. Fique a seu critério e a seu risco.

Uma maneira é gerenciar todos os arquivos através do JavaScript. Você mantém uma lista de arquivos CSS e uma de arquivos JS que deseja inserir na página e, como JavaScript, você percorre essas listas adicionando cada arquivo, utilizando createElement para definir um novo elemento na página e configurando-o conforme o arquivo a ser inserido.

Veja um exemplo:

// Lista de arquivos CSS a serem carregados na página:
const styles = [
  "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css",
  "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css",
  "https://getbootstrap.com/examples/starter-template/starter-template.css"
];

// Lista de arquivos JS a serem carregados na página:
const scripts = [
  "https://code.jquery.com/jquery-2.2.4.min.js",
  "https://getbootstrap.com/dist/js/bootstrap.min.js"
];

// Objetos de manipulação do DOM:
const head = document.getElementsByTagName('head')[0];
const body = document.getElementsByTagName('body')[0];

// Insere os arquivos CSS na página:
for (let i in styles) {
  let style = document.createElement("link");

  style.rel = 'stylesheet';
  style.type = 'text/css';
  style.href = styles[i];

  head.appendChild(style);
}

// Insere os arquivos JS na página:
for (let i in scripts) {
  let script = document.createElement("script");

  script.src = scripts[i];
  script.type = "text/javascript";

  body.appendChild(script);
}
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
  <div class="starter-template">
    <h1>Bootstrap starter template</h1>
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>
</div>

O arquivo JS seria a ser inserido em todas as páginas e, para adicionar um arquivo CSS ou JS, bastaria adicioná-lo à lista styles ou scripts.

Funciona, mas não sei dizer se é recomendado fazer algo deste tipo em produção e quais são os pontos fracos da solução.

2
  • Uma nota, usando esta técnica os scripts e estilos são carregados em paralelo, então se o bootstrap terminar o carregamento antes do jQuery, ele irá levantar uma exceção, pois ele depende do jQuery. Commented 24/05/2017 às 19:48
  • Bem observado, @TobiasMesquita.
    – Woss
    Commented 24/05/2017 às 19:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .