Laravel по-русски

Русское сообщество разработки на PHP-фреймворке Laravel.

Ты не вошёл. Вход тут.

#1 07.03.2017 20:56:59

Как включить browsersync в 5.4?

Здравствуйте!

Пользуюсь Valet.
Раньше это делалось через Elixir, теперь вместо него Webpack, но с инструкциями в интернете не разобрался.

Если у кого-то получилось завести, дайте пожалуйста примеры конфигурационных файлов и необходимых команд.

Спасибо!

Не в сети

#2 09.03.2017 05:45:56

Re: Как включить browsersync в 5.4?

загляни в package.json, команды микса запускаются через npm и они там все описаны в секции "scripts". там для релоада используется не browsersync – насколько я помню browsersync перезагружает страницу при пересборке скриптов. в вебпаке используется hot module reload – он подменяет скрипты и стили не перезагружая страницу. не уверен что микс делает именно это (пока сам не пользовался им) но в любом случае нужный скрипт называется hot, то есть запускается с npm run hot.

Не в сети

#3 11.03.2017 18:36:41

Re: Как включить browsersync в 5.4?

npm run hot после npm install из коробки не запускается.

Я как понимаю нужно какие-то конфиги ещё редактировать?

Не в сети

#4 12.03.2017 08:56:44

Re: Как включить browsersync в 5.4?

ну вроде только webpack.mix.js )

Не в сети

#5 12.03.2017 18:11:19

Re: Как включить browsersync в 5.4?

А что там нужно писать? Инструкции которые я находил, у меня не работали.

Не в сети

#6 12.03.2017 18:17:08

Re: Как включить browsersync в 5.4?

Не в сети

#7 12.03.2017 18:26:57

Re: Как включить browsersync в 5.4?

https://www.youtube.com/watch?v=5vp29fwJH1g как тут если сделать (после npm install), выводится http://take.ms/DgIsG

Не в сети

#8 13.03.2017 05:53:36

Re: Как включить browsersync в 5.4?

этот видос показывает работу уже настроенной системы сборки. как именно она настраивается описано в документации по ссылке которую я скинул

Не в сети

#9 28.03.2017 12:19:10

Re: Как включить browsersync в 5.4?

Получилось в итоге вроде запустить npm run hot (это была ошибка версии Laravel, которая была исправлена с обновлением). Но теперь, при переходе по адресу, который указан в консоли и попытке поменять что-то в шаблоне, ничего не происходит (в том числе, изменения не фиксируются в консоли). Всё по самое свежее. Пробовал на всех ос, на разных компьютерах. Эффект один и тот же. 

У кого-нибудь вообще получалось это сделать?

Не в сети

#10 28.03.2017 13:38:37

Re: Как включить browsersync в 5.4?

я как раз недавно настраивал mix, не пользуюсь hot, запускаю watch, а в самом миксе делаю mix.browserSync()

Не в сети

#11 28.03.2017 22:31:01

Re: Как включить browsersync в 5.4?

constb пишет:

я как раз недавно настраивал mix, не пользуюсь hot, запускаю watch, а в самом миксе делаю mix.browserSync()

Можешь пожалуйста прислать свой файл с настройками? И вообще какие действия ты совершал, что бы оно заработало?

Я уже столько времени потратил на это, что просто забить уже жалко sad

Изменено alex1280 (28.03.2017 22:35:39)

Не в сети

#12 29.03.2017 16:55:19

Re: Как включить browsersync в 5.4?

ну package.json у меня практически стандартный, в него добавлено несколько пакетов, которые используются в разработке, но к сборке они не имеют отношения. потом ставим зависимости – npm install (у меня правда yarn, но это непринципиально). затем пишем webpack.mix.js на сборку ассетов. у меня проект учебный, поэтому собрано всё как попало лишь бы работало, выглядит так:

const {mix} = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .sass('resources/assets/sass/spinner.sass', 'public/css')
    .copy('node_modules/bootstrap-sass/assets/fonts', 'public/fonts')
    .styles([
        'node_modules/magnific-popup/dist/magnific-popup.css'
    ], 'public/css/all.css')
    .scripts([
        'node_modules/jquery/dist/jquery.js',
        'node_modules/magnific-popup/dist/jquery.magnific-popup.js'
    ], 'public/js/all.js')

if (mix.config.inProduction) {
    mix.version()
} else {
    mix.browserSync('oplata.dev')
}

ну и собственно дальше npm run watch и погнали. для продакшена собираю отдельно с npm run production

поскольку используется версионирование, то ассеты в блейде подключены не статически а через хелпер например {{ mix('/js/all.js') }} – в отладочной сборке микс-манифест тоже генерируется, так что работает и так и эдак

вроде всё. как видишь, ничего гениального, всё как в доке написано

Не в сети

#13 30.03.2017 01:04:25

Re: Как включить browsersync в 5.4?

Заработало. Спасибо.

А не подскажешь, чем вообще отличается watch от hot? Я читал, что hot не перезагружает страницу, но у меня по крайней мере это не так, перезагружает .

Не в сети

#14 30.03.2017 04:15:22

Re: Как включить browsersync в 5.4?

ну watch просто пересобирает ассеты, за обновление страницы отвечает mix.browserSync(). hot полезен тем кто работает с vue.js и react – он позволяет обновлять код и стили без перезагрузки страницы и даже без потери текущего состояния данных. при разработке SPA это здорово экономит время

Не в сети

#15 30.03.2017 19:20:15

Re: Как включить browsersync в 5.4?

Если кого раздражает всплывашка в верхнем правом углу

    mix.browserSync(
        {
            proxy: "test.dev",
            notify: false
        }

    )

Изменено alex1280 (30.03.2017 19:20:30)

Не в сети

#16 14.04.2017 04:17:08

Re: Как включить browsersync в 5.4?

constb, а не подскажешь, сделать так, что бы sass и js  собирались автоматически без команды npm run dev при каждом сохранении? В Галпе такое было, а тут я уже несколько часов пытаюсь понять как это сделать, не догоняю.

Не в сети

#17 14.04.2017 10:57:14

Re: Как включить browsersync в 5.4?

nom run watch

всё же есть в документации

Не в сети

#18 14.04.2017 15:19:56

Re: Как включить browsersync в 5.4?

constb, я думал hot это то же самое только лучше, поэтому его использовал. Он пишет  DONE  Compiled successfully in 286ms, но файлы не компилирует.
Watch работает, да, спасибо!


А можешь ещё объяснить, что делает вот этот код в твоём примере?:
if (mix.config.inProduction) {
    mix.version()
} else {

Прости если что, я дизайнер smile

Не в сети

#19 14.04.2017 16:36:58

Re: Как включить browsersync в 5.4?

просто стандартно на статические файлы, в том числе и *.js и *.css при отдаче веб-сервер добавляет заголовки, которые помещают их в кэш браузера на сильно долгий срок (хотя зависит от настроек веб-сервера, я говорю про правильно настроенный хостинг). но тут возникает одна маленькая проблемка – если ты эти файлы поменял, изменения не появятся на клиенте. mix.version() делает одну очень простую вещь – добавляет в имя файла его контрольную сумму и /js/app.js превращается в /js/app.6ce6465d6b6142167a30.js причём при каждой пересборке имя меняется – и кэш обновляется. чтобы ссылки на такие имена генерировать в шаблонах используется пхп-хэлпер mix(). тогда в шаблоне (view) <script src="{{ mix('/js/app.js') }}"></script> превратится в браузере в <script src="/js/app.6ce6465d6b6142167a30.js"></script>. это работает потому что version кладёт в паблик файл mix-manifest.json где записаны все соответствия, а пхп-хэлпер этот файл читает

поскольку в тестовой сборке у меня веб-сервер не ставит кэширующие заголовки на статику (я сейчас использую laravel valet), то при разработке мне версионирование не нужно, а вот когда я собираю продакшен-сборку с минификацией и прочими оптимизациями (npm run production) – тогда я и подключаю .version()

Не в сети

Подвал раздела