Загрузка CSS и JS файлы модульно

Как я продолжаю добавить на свой веб-сайт, для каждого HTML-файла я добавить мне нужно включитьЗагрузка CSS и JS файлы модульно

<!-- Source for .css style rules --> 
<link rel="stylesheet" type="text/css" href="/Hexdra/assets/css/style.css" /> 
<link type="text/css" href="/Hexdra/assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" /> 

<!-- JavaScript for using a custom file for resources. --> 
<script src="/Hexdra/assets/scripts/angular.js"></script> 
<script src="/Hexdra/assets/scripts/modernizr.custom.05819.js"></script> 
<script src="/Hexdra/assets/scripts/siteScript.js"></script> 

<!-- Angular Apps--> 
<script type="text/javascript" src="/Hexdra/app/tank.js"></script> 
<script type="text/javascript" src="/Hexdra/app/form.js"></script>

Сво не ужасный метод, и это работает каждый раз. Я просто знаю, что должен быть более простой метод.

Я знаю, что theres, но это не похоже на самый простой способ.

Я знаю библиотеку js require.js, и это замечательно, но если я не думаю, что могу использовать это для своих CSS-файлов.

Что мне нужно - это метод ссылки на один файл, загрузка одного файла, а затем он имеет какую-то структуру или код, который затем импортирует все остальные необходимые файлы CSS и JS.

Что заставило меня видеть, что мне нужна такая система, чтобы выбрать все файлы для bootstrap без загрузки каждого из них, как я загрузил мои CSS и JS выше.

Я уверен, что у меня не хватает какой-либо ключевой терминологии, поэтому, пожалуйста, помогите мне вместе с новыми терминами или идеями, которые Im на пороге, но еще не нашли словосочетание, чтобы быть в состоянии описать.

источник

2016-03-15 Drew Ackerman

Для CSS всегда есть @import инструкций. См. Здесь на MDN: @import

Определите один файл CSS и используйте @import url("some-other.css"), чтобы загрузить все ваши файлы CSS через единственный «основной» файл CSS.

Для CSS вы можете использовать препроцессор CSS как LESS или SASS для объединения всех ваших файлов в один файл с помощью шага сборки. Тот же принцип применим и к JavaScript, а также через какой-то комплект, независимо от того, является ли оно r.js для приложения application.js для приложения AMD.exe или Browserify для более обычных исходных файлов стиля CommonJS.

источник

2016-03-15 23:55:38 zero298

Я использую мЕНЬШЕ, чтобы построить свой CSS. Было бы неправильно каким-то образом связывать мой LESS CSS и Bootstraps CSS? –

Нет ничего плохого в ссылке на кучу файлов в вашем индексе, но лучше всего создавать приложение с чем-то вроде Gulp перед его развертыванием на производство. Ваш процесс глотки должен объединить все css и js в соответствующие мини-файлы css и js. Для этого есть много преимуществ. Жаль быть настолько кратким

источник

2016-03-15 23:58:14 ether6

Isnt gulp приложение, которое используется для распространения окончательного кода? Я использую визуальную студию, и я считаю, что она поддерживает GULP. Я проверю это, спасибо. –

Вы не сказали, что ваш фоновым язык, но если вы используете PHP вы можете сделать что-то вроде этого:

index.php

<?php 
    include 'inc/head.inc.php'; 
?> 
<body> 
    <div>All your stuff follows here</div> 
    <?php include 'inc/nav.inc.php'; ?>

вкл/head.inc.php:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title>MyDomain</title> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="description" content="some stuff I do" /> 
    <meta name="keywords" content="stuff, things, quality" /> 
    <meta name="robots" content="index,follow" /> 

    <link rel="stylesheet" type="text/css" href="/Hexdra/assets/css/style.css" /> 
    <link type="text/css" href="/Hexdra/assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" /> 

    <!-- JavaScript for using a custom file for resources. --> 
    <script src="/Hexdra/assets/scripts/angular.js"></script> 
    <script src="/Hexdra/assets/scripts/modernizr.custom.05819.js"></script> 
    <script src="/Hexdra/assets/scripts/siteScript.js"></script> 

    <!-- Angular Apps--> 
    <script type="text/javascript" src="/Hexdra/app/tank.js"></script> 
    <script type="text/javascript" src="/Hexdra/app/form.js"></script> 

</head>

источник

2016-03-16 00:04:12 gibberish

Пока что нет бэкэнд-языка. Просто HTML, CSS и ANGULAR. У меня есть небольшой файл JSON. Но его просто данные на самом деле не являются задним языком, как php или asp.net. –

Как насчет развертывания? Вы строите это локально в XAMPP или некоторых таких? В какой среде вы разместите сайт? Используйте этот конец - вы все равно будете там. * Если вы намерены разместить у себя типичную хостинговую компанию (например, GoDaddy/HostGator $ 50/year или аналогичный), то вы, скорее всего, будете использовать стек LAMP и будете иметь доступ к PHP.Когда вы устанавливаете XAMPP или MAMP/WAMP, у вас есть PHP. У него есть. * – gibberish

Загрузка CSS и JS файлы модульно

ответ

Смежные вопросы