Русское сообщество разработки на PHP-фреймворке Laravel.
Ты не вошёл. Вход тут.
Страницы 1
Здравствуйте!
Пользуюсь Valet.
Раньше это делалось через Elixir, теперь вместо него Webpack, но с инструкциями в интернете не разобрался.
Если у кого-то получилось завести, дайте пожалуйста примеры конфигурационных файлов и необходимых команд.
Спасибо!
Не в сети
загляни в package.json, команды микса запускаются через npm и они там все описаны в секции "scripts". там для релоада используется не browsersync – насколько я помню browsersync перезагружает страницу при пересборке скриптов. в вебпаке используется hot module reload – он подменяет скрипты и стили не перезагружая страницу. не уверен что микс делает именно это (пока сам не пользовался им) но в любом случае нужный скрипт называется hot, то есть запускается с npm run hot.
Не в сети
npm run hot после npm install из коробки не запускается.
Я как понимаю нужно какие-то конфиги ещё редактировать?
Не в сети
ну вроде только webpack.mix.js )
Не в сети
А что там нужно писать? Инструкции которые я находил, у меня не работали.
Не в сети
Не в сети
https://www.youtube.com/watch?v=5vp29fwJH1g как тут если сделать (после npm install), выводится http://take.ms/DgIsG
Не в сети
этот видос показывает работу уже настроенной системы сборки. как именно она настраивается описано в документации по ссылке которую я скинул
Не в сети
Получилось в итоге вроде запустить npm run hot (это была ошибка версии Laravel, которая была исправлена с обновлением). Но теперь, при переходе по адресу, который указан в консоли и попытке поменять что-то в шаблоне, ничего не происходит (в том числе, изменения не фиксируются в консоли). Всё по самое свежее. Пробовал на всех ос, на разных компьютерах. Эффект один и тот же.
У кого-нибудь вообще получалось это сделать?
Не в сети
я как раз недавно настраивал mix, не пользуюсь hot, запускаю watch, а в самом миксе делаю mix.browserSync()
Не в сети
я как раз недавно настраивал mix, не пользуюсь hot, запускаю watch, а в самом миксе делаю mix.browserSync()
Можешь пожалуйста прислать свой файл с настройками? И вообще какие действия ты совершал, что бы оно заработало?
Я уже столько времени потратил на это, что просто забить уже жалко
Изменено alex1280 (28.03.2017 22:35:39)
Не в сети
ну 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') }} – в отладочной сборке микс-манифест тоже генерируется, так что работает и так и эдак
вроде всё. как видишь, ничего гениального, всё как в доке написано
Не в сети
Заработало. Спасибо.
А не подскажешь, чем вообще отличается watch от hot? Я читал, что hot не перезагружает страницу, но у меня по крайней мере это не так, перезагружает .
Не в сети
ну watch просто пересобирает ассеты, за обновление страницы отвечает mix.browserSync(). hot полезен тем кто работает с vue.js и react – он позволяет обновлять код и стили без перезагрузки страницы и даже без потери текущего состояния данных. при разработке SPA это здорово экономит время
Не в сети
Если кого раздражает всплывашка в верхнем правом углу
mix.browserSync(
{
proxy: "test.dev",
notify: false
}
)
Изменено alex1280 (30.03.2017 19:20:30)
Не в сети
constb, а не подскажешь, сделать так, что бы sass и js собирались автоматически без команды npm run dev при каждом сохранении? В Галпе такое было, а тут я уже несколько часов пытаюсь понять как это сделать, не догоняю.
Не в сети
nom run watch
всё же есть в документации
Не в сети
constb, я думал hot это то же самое только лучше, поэтому его использовал. Он пишет DONE Compiled successfully in 286ms, но файлы не компилирует.
Watch работает, да, спасибо!
А можешь ещё объяснить, что делает вот этот код в твоём примере?:
if (mix.config.inProduction) {
mix.version()
} else {
Прости если что, я дизайнер
Не в сети
просто стандартно на статические файлы, в том числе и *.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()
Не в сети
Страницы 1