Laravel-Mix: разные пути вывода для разработки и производственной сборки (на примере css)

Все что мы видим в webpack.mix после крафта приложения ниже:

const { mix } = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

Я знаю, как запустить разработку и производственную сборку, но не знаю, как ее настроить. В этом вопросе мы рассматриваем пример компиляции sass в css по разным путям в зависимости от типа сборки, однако я предполагаю, что работа со сборками es6 и pug будет аналогичной.

Структура проекта:

???? публичный

???? css-продукт

???? ресурсы

???? активы

???? сасс

???? css-dev

Я хочу:

  • Выполнение разработки: файлы из resources/assets/sass компилируются resources/assets/css-dev, без искажений, без конкатенации.
  • Производственное выполнение: файлы из resources/assets/sass компилируются в resources/assets/css-prod, удаляются и объединяются.

Где я должен определить эти настройки?


laravel-mix laravel-5.4
person Takeshi Tokugawa YD    schedule 10.05.2017    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Это можно сделать в webpack.mix.js:

...
if (mix.inProduction()) {
  jsOutputDir = '/path/to/production';
  cssOutputDir = '/path/to/production';
} else {
  jsOutputDir = '/path/to/development';
  cssOutputDir = '/path/to/development';      
}

mix.js('resources/assets/js/xxxx.js', jsOutputDir)
   .css('resources/assets/css/xxxx.css',cssOutputdir)

теперь запустите npm run dev или npm run production, ваши файлы JavaScript и css в другом каталоге, удачи.

person zigo geng    schedule 27.10.2017

arrow_upward
0
arrow_downward

на самом деле это можно сделать без изменения или добавления новых выходных каталогов. Вы можете легко создавать свои ресурсы для разработки или производства, как и в старом веб-пакете. Например:

//Run all mix in development
npm run dev

//Run mix in production
npm run production

npm run production минимизирует все ваши задачи микширования и будет храниться в общедоступном каталоге.

Пожалуйста, прочитайте здесь.

person claudios    schedule 10.05.2017
comment
Спасибо за ответ. К сожалению, это не то, что я хочу знать. Мне нужно, чтобы css для разработки был в /resources, а css для производства — в /public. Является ли это возможным? - person Takeshi Tokugawa YD; 10.05.2017
comment
Что ж, вы можете добавить второй параметр в свой микс, где вы хотите указать каждое направление. - person claudios; 10.05.2017
comment
Он уже добавлен в оператор .sass('resources/assets/sass/app.scss', 'public/css');, и, насколько я понимаю, вывод будет скомпилирован в public/css в случаях npm run dev и npm run production. Где я могу определить другой выходной путь для сборки разработки? - person Takeshi Tokugawa YD; 10.05.2017
comment
это должно быть «ресурсы/активы/css» в качестве второго параметра. - person claudios; 10.05.2017
comment
Вы имеете в виду, что мне нужно изменить его вручную на public/assets/css, когда я хочу собрать рабочий пакет после завершения разработки? - person Takeshi Tokugawa YD; 10.05.2017