Laravel по-русски

Kertis138

Сообщений: 23

Elixir настройка

Здравствуйте!
Интересует меня два вопроса.

1)
Есть папка assets/sass в которой два файлика - _variables.scss и app.scss. Там начальные настройки. Отлично.
Как я понимаю, если мне нужно добавить свои файлы, то я импортирую их в app.scss и gulp их собирает в один файл.
Но вот, что мне не понятно: если у меня один раздел сайта требует одни стили, а другой раздел другие - то как мне распределить эту самую компиляцию и не цеплять лишние файлы? А то получается у меня независимо от раздела сайта всегда цепляются ВСЕ скрипты...
Писать для каждого файла свой путь? Что в таком случае делают?

2)
Если я хочу добавить какие то css от стороннего производителя, то я кладу их  public/vendor, а затем в blade делаю
{{ asset('vendor/VendorNAME/style.css')}}
Это верный подход? Или для этого нужно в какую-то другую папку все складывать?

Изменено Kertis138 (11.02.2017 00:51:38)

constb +141

Мастер

Сообщений: 624

Re: Elixir настройка

А то получается у меня независимо от раздела сайта всегда цепляются ВСЕ скрипты...

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

Это верный подход? Или для этого нужно в какую-то другую папку все складывать?

нет. зависимости устанавливаются в resources/vendor и собираются вместе со скриптами и стилями сайта в один app.css и  один app.js. если есть админка – будет ещё admin.css и admin.js. шрифты либо кладутся в resources/fonts либо устанавливаются с зависимостями в resources/vendor и копируются в паблик с elixir.copy(). всё содержимое паблика (кроме index.php и .htaccess) добавляется в .gitignore. чтобы автоматически обновлять браузерный кэш собранных ассетов используется exlixir.version() и зависимости подключаются с помощью elixir(путь). asset() предназначен для другого – аплоады кладут в storate/public и на него создаётся ссылка c php artisan storage:link. конкретный путь на сторадж задаётся в config/filesystems.php и asset() затем автоматически генерит ссылки на загруженные файлы. если поменять путь на паблике (/storage по дефолту) или использовать в качестве стораджа например Amazon S3, то путь выдаваемый asset() тоже поменяется – см. https://laravel.com/docs/5.4/filesystem

Kertis138

Сообщений: 23

Re: Elixir настройка

нет. зависимости устанавливаются в resources/vendor и собираются вместе со скриптами и стилями сайта в один app.css и  один app.js.

Спасибо большое за помощь! Вы очень точно описали все те проблемы, с которыми я столкнулся. Не многие могут так быстро понять проблему и помочь с решением, за что я Вам особенно благодарен
Но у меня получилось немного не так, как Вы сказали. Так как сторонние библиотеки не всегда в SCSS, пришлось разделить сборку на app.css + all.css. Аналогично получилось и с Typescript.

Typescript файлы импортирую в одном файле app.ts.
И потом в базовом шаблоне, от которого наследуются все другие подключаю 4 файла:

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

СОБСТВЕННО САМ GULP-ФАЙЛ

const elixir = require('laravel-elixir');
require('laravel-elixir-typescript');

elixir((mix) => {
    mix.sass('app.scss').version("css/app.css").version("css/app.css");
    mix.sass([
    	"../../../resources/vendor/animate.css",
    	"../../../resources/vendor/bootstrap-social.css",
    	"../../../resources/vendor/material-switch.css",
    	"../../../resources/vendor/buttons/scss/buttons.scss"],"public/css/all.css").version("css/all.css");

    mix.typescript('app.ts').version("js/app.js");
    mix.scripts([
    	"../../../resources/vendor/buttons/js/buttons.js"]).version("js/all.js");

	mix.copy('resources/images', 'public/images').version('public/images');
});

Все ли я правильно делаю?

Может можно это как то упростить и соединить в один файл?
И есть ли возможность сделать более красивый доступ к resources/vendor ?

Изменено Kertis138 (12.02.2017 12:15:11)

constb +141

Мастер

Сообщений: 624

Re: Elixir настройка

я не уверен насчёт typescript, а вот в scss вроде должно быть возможно импортировать и обычные css-файлы – там же синтаксис тот же самый, тем более что ты уже и так вызываешь .sass() на css-файлы. и хотя это тоже один из вариантов – сохранять зависимости в отдельный бандл, который бы реже обновлялся чем остальные ассеты, мне кажется имеет смысл уже только для совсем здоровых веб-приложений.

в вызов .scripts() можно включить и скомпилированный app.js – в этом случае в all.js будут все скрипты и app.js уже не нужно будет версионировать. или ещё как вариант – импортировать buttons.js в тайпскрипте – там наверняка это должно поддерживаться. откуда он вообще взялся этот buttons? может его можно из npm загрузить пакетом и импортировать в app.ts через тайпскриптовый вариант require() ?

второе – по-возможности в шапке подключать только стили, а скрипты – перед закрытием тэга body, в футере. таким образом загрузка скриптов не блокирует рендер страницы, и к слову google pagespeed даёт более высокий рейтинг сайту. единственный плагин который требует загрузки в шапке сайта, насколько я помню, это Modernizr.

третье – у тебя там дважды вызывается .version() на app.css

четвёртое – я сомневаюсь в том что нужно версионировать images, я по крайней мере никогда так не делал.

Kertis138

Сообщений: 23

Re: Elixir настройка

Большое спасибо за помощь!!!

Изменено Kertis138 (13.02.2017 18:42:38)

Kertis138

Сообщений: 23

Re: Elixir настройка

Итак, сделал как вы предлагали и все замечательно работает, но возник небольшой вопрос:
Я подключаю всего два файла - app.css и app.js, где абсолютно все скрипты и стили для всех маршрутов.

Есть у меня view - v1 и v2.
У одного скрипт делает alert("v1"), у второго alert("v2"). Но так как я разом подключаю все скрипты, то при любом маршруте вызовется оба Алерта.
Как решить такую проблему?
Помимо app.js создавать другие скрипты и вручную их подключать в нужных view? Или есть что то более красивое?

constb +141

Мастер

Сообщений: 624

Re: Elixir настройка

есть. во-первых нужно скрипты писать так чтобы они работали в зависимости от данных в дереве документа. например есть некий компонент А, код которого вызывает alert(1) и он находится в виде ААА, а есть компонент Б, код которого вызывает alert(2) и он находится в виде БББ. примем для простоты что мы работаем с jQuery. тогда в виде ААА у нас будет например

<div class="js-component-a">...</div>

а в виде БББ у нас будет

<div class="js-component-b">...</div>

тогда код такого вида

jQuery(function($) {
    $('.js-component-a').each(function() {
        alert(1)
    })
    $('.js-component-b').each(function() {
        alert(2)
    })
})

покажет alert(1) только в виде ААА (как и любом другом содержащем компонент А), а alert(2) – только в БББ. вообще компонентизация фронтенда, даже если ты работаешь с простым jquery, очень помогает держать под контролем степень сложности кода. даже в большом и сложном проекте, все индивидуальные компоненты оказываются разложены по своим обработчикам (а лучше – отдельным js-файлам) и ты всегда знаешь где что найти

в случае когда вся страница является компонентом, ты можешь сделать что-то вида <body class="@yield('body_class')"> и с помощью @section в виде ААА «прокинуть» на body класс js-show-me-alert-1 а в БББ – js-show-me-alert-2. и поставить соответствующие обработчики

в случае если сам алерт является компонентом, в страницу можно поместить <span class="js-show-alert" data-content="1"> и затем сделать что-то вроде $('.js-show-alert').each(function () { alert($(this).data('content')) })

в общем вариантов множество. в jquery если селектору соответствует пустое множество элементов DOM то все вызываемые на полученном пустом jquery-объекте функции просто не будут делать вообще ничего

и обрати внимание на префикс js- в именах классов. опять же для контроля сложности – всегда используй разные селекторы для стилей и для js-кода

Kertis138

Сообщений: 23

Re: Elixir настройка

Еще раз Большое Спасибо!