Mix и Webpack в Laravel 5 - разбираемся с CSS, JS, Less, Scss и React/Babel за 10 минут

  • DeveloperNotes
  • »
  • Laravel 5
  • »
  • Mix и Webpack в Laravel 5 - разбираемся с CSS, JS, Less, Scss и React/Babel за 10 минут

Давайте разберемся, как в Laravel использовать Mix и Webpack. На самом деле, это очень просто и можно настроить буквально за 10 минут. Всё благодаря тому, что разработчики Laravel уже всё сконфигурировали и настроили за нас! Я расскажу о том, как обработать less, sass, react babel и сжать javascript. Не будем тянуть кота за хвост и сразу же начнем. Предполагается, что у вас уже есть установленный Laravel, и вам нужно сжать несколько JS/CSS файлов в один, минифицировав их.

Установка NodeJS и NPM

Как вы знаете, Mix и Webpack - это программы, написанные на языке JavaScript, которые работают на сервере. Это значит, что для запуска нам понадобится NodeJS и NPM (пакетный менеджер для NodeJS, похожий на composer для PHP).

Я работаю в Linux, поэтому команды, которые я буду писать в консоль - специфичны для Linux. С другой стороны - ваш сайт скорее всего находится на сервере с Linux, поэтому ничего страшного. Чтобы проверить, установлены ли пакеты, наберите в консоли следующие команды:

node -v
npm -v

Если вы видите что-то вроде "Command not found", значит необходимо установить ее. В Ubuntu это можно сделать через apt-get:

sudo apt install nodejs npm

Эта команда установит nodejs и npm. Или же вы можете перейти на официальный сайт NodeJS, чтобы скачать и установить последнюю версию вручную.

Установка Mix в Laravel 5

Чтобы установить Mix, нужно всего лишь перейти в каталог, где установлен ваш Laravel-проект и запустить через консоль следующую команду:

npm install

NPM скачает все NodeJS-пакеты, от которых зависит Mix и установит их в каталог node_modules. Более ничего делать не требуется, всё будет сделано автоматически.

Если вы используете git в разработке, я рекомендую добавить каталог node_modules в .gitignore, и не хранить его в репозитории. Если вы перенесете проект на другой сервер, пакеты следует установить через npm update или npm install, а не через тащить их с собой как часть сайта. Потому, что в некоторых ситуациях содержимое каталога node_modules может быть в несколько раз больше, чем весь проект в целом. Такова жизнь, господа.

Как запустить Mix в Laravel 5?

Теперь мы можем запустить Mix. В данный момент он ничего не будет делать, но все же. Следующая команда запустит микс, соединит все JS/CSS файлы воедино, но не будет их "сжимать":

npm run dev

Ее следует использовать в момент, когда вы что-то разрабатываете. Есть еще одна команда, которая помогает при разработке:

npm run watch

Таким образом NPM будет следить за изменениями в файлах и пересобирать их сразу, как только изменения в них появятся. Очень удобно во время разработки!

Не рекомендую использовать npm run watch на продакшне, т.к. оно требует довольно много ресурсов для своей работы и является не надежной.

А вот так следует собирать наши ассеты на продакшне:

npm run production

Эта команда не только соберет все файлы, но и сожмет их, что и требуется сделать на продакшне, для уменьшения траффика, передаваемого по сети. Это особенно важно в наше время, когда количество пользователей с мобильными телефонами достигает 50%.

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

Как соединить CSS-файлы в один в Laravel Mix?

Самое простое, но очень полезное, что мы можем сделать - это соединить все наши CSS-файлы в один большой файл и удалить оттуда все переносы строк. Это дает два бонуса: во-первых, браузеру придется делать меньше запросов к сайту, чтобы получить весь нужный CSS. Во-вторых, мы уменьшим размер файлов, удаляя ненужные невидимые символы (пробелы и переносы строк). Google очень любит таким образом оптимизированные сайты.

Чтобы это сделать, нам нужно отредактировать файл webpack.mix.js, который находится в корне нашего проекта. Давайте я покажу как именно:

let mix = require('laravel-mix'); // эту строку я не буду писать в следующих примерах

mix.styles(
    [
        'resources/assets/css/bootstrap.css',
        'resources/assets/css/style.css',
    ],
    'public/css/app.css'
);

Итак, мы использовали mix.styles() и передали ему два параметра. Первый параметр - это массив, элементами которого являются пути до файлов, которые мы хотим собрать в один. Второй параметр - это файл с результатом работы Mix'а, весь наш объединенный CSS в одном файле app.css.

Хочу обратить ваше внимание, что исходные файлы лежат в каталоге resources/assets. Этот каталог недоступен через браузер. А вот файл app.css находится в каталоге, доступном через браузер. Это хорошая практика, делайте так же.

Далее нужно запустить Mix, причем на продакшне это нужно сделать с помощью следующей команды, не забудьте:

npm run production

После обработки вы сможете подключить для сайта один файл:

<link href="/css/app.css" rel="stylesheet">

Не забудьте, что каталог public - это каталог нашего проекта. Браузер видит только его содержимое, а не его самого.

Как обработать Less в Laravel Mix?

Чтобы обработать Less, мы используем практический такой же синтаксис, как и выше. Разница только в том, что интерпретатор Webpack соберет все переменные и вложенности за нас. Переживать об этом не надо, но неплохо бы соблюдать порядок файлов (чтобы файл с переменными подключался раньше, чем файл, где используются эти переменные, например). Настройки Mix будут выглядеть следующим образом:

mix.less('resources/less/blog.less', 'public/css')
   .less('resources/less/pages.less', 'public/css');

Таким образом мы собрали два less-файла, и результат обработки положили в каталог public/css. Далее мы можем объединить все файлы в один способом, который я описал выше. Например, вот так:

mix.less('resources/less/blog.less', 'resources/less/compiled');
	.styles([
        'resources/less/compiled/blog.css',
        'resources/assets/css/style.css',
    ],
    'public/css/app.css'
);

И в итоге мы получим один файл следующим образом: сначала обработаем blog.less и положим его в каталог compiled. Далее мы возьмем обработанный less-файл (который теперь называется blog.css) и объединим его с другим файлом styles.css. Соединим их, удалим переносы строк и пробелы и положим результат запишем в файл app.css. Который уже сможем подключить к нашей веб-странице.

Обратите внимание, что мы можем использовать цепочку вызовов методов для mix (по аналогии с тем, как мы использовали такую цепочку в Laravel Route). То есть мы можем написать mix.less().less().less().styles(), если у нас есть такая необходимость. Хотя обычно styles() достаточно всего одного, т.к. он принимает массив на вход.

Как обработать SASS (SCSS) в Laravel Mix?

По аналогии с обработкой less, обработка sass (scss) происходит точно так же. Например, мы хотим обработать один файл products.scss:

mix.sass('resources/sass/products.scss', 'public/css');

Разница только в том, что вместо mix.less() мы использовали mix.sass(), вот и всё.

Официальный гайд по этой теме рассказывает о некоторых параметрах, которые обычно не используются в работе и поэтому я не описываю их в этой статье.

Как соединить и сжать JavaScript-файлы в Laravel Mix?

Теперь поговорим о более вкусном - как нам объединить JavaScript-файлы нашего сайта в один файл и минифицировать (сжать) его? Тоже никакой магии нет, даже думать негде. Нам понадобятся следующие настройки для Mix:

mix.scripts([
    'resources/assets/js/jquery-1.12.4.min.js',
    'resources/assets/js/bootstrap.min.js',
    'resources/assets/js/scripts.js',
    ], 'public/js/app.js')

Это очень похоже на ситуацию, когда мы объединяли CSS, только вместо mix.styles() мы используем mix.scripts(). Первым параметром передаем массив, каждый элемент которого содержит путь до очередного JS-файла в нашем проекте. А вторым параметром - путь до файла, где будет лежать результат работы Mix'а (то есть соединенный и сжатый JS).

Babel в Laravel Mix - как это сделать?

Давайте коротко рассмотрим, как именно добавить React в наш конфиг для Mix. Как вы знаете, сейчас стандартом написания рендера для React является Babel. Поэтому сначала кажется непонятно, как использовать Mix для сборки React-проекта, но на деле все очень просто.

Предположим, что у нас весь React-код лежит в каталоге resources/assets/js. Внутри находится стартовый файл app.js, который содержит подключение корневого компонента:

require('./components/BlogComponent');

И также там находится каталог components, содержащий компоненты (да и вообще все наше приложение на React).

Чтобы не запутать вас, скажу, что код BlogComponent содержит обычный код приложения на React/Babel. Настоящего кода у меня нет под рукой сейчас, но приведу такой пример "из головы":

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export default class BlogComponent extends React.Component {
    constructor (props) {
		...
    }
    componentDidMount(){
    	...
    }
    render(){
        return (
            <div>Это реакт!</div>
		}
	}
}

if (document.getElementById('root')) {
    let channelName = document.getElementById('root').getAttribute("channel");
    ReactDOM.render(<BlogComponent />, document.getElementById('root'));
}

Обратите внимание, что в корневом компоненте происходит подключение React к DOM нашего документа. А метод render() использует внутри Babel, как мы и хотели.

Вернемся немного назад. Так что же нам написать в конфигурации Mix'а? Вы удивитесь, но это всего ОДНА строчка, которая соберет весь наш большой проект:

mix.react('resources/assets/js/app.js', 'public/js')

Вот и всё! Здесь мы попросили Mix собрать только один файл app.js, который внутри себя содержит подключение корневого компонента. Всё остальное, что необходимо для работы нашего React/Babel приложения будет собрано автоматически. Магия, да и только.

Объединяем Less, Sass, React/Babel, Styles и Scripts в одной инструкции для Laravel Mix

Самое забавное, что Mix позволяет нам объединить все то, что я описал выше всего в одной инструкции. Я приведу пример, который используется на одном из моих сайтов, изменив названия файлов и каталогов, на всякий случай:

mix.react('resources/assets/js/react_app.js', 'resources/compiled/js')
    .scripts([
        'resources/assets/js/jquery-1.12.4.min.js',
        'resources/assets/js/bootstrap.min.js',
        ], 'public/app.js')
    .styles([
        'resources/assets/css/bootstrap.css',
        'resources/assets/css/animate.css',
        'resources/assets/css/styles.css',
    ], 'public/app.css');

Как вы видите, мы можем сначала собрать наше приложение на React/Babel (его зависимости подтянутся Mix'ом автоматически), потом объединить его с jQuery и скриптами bootstrap (да, я знаю, что React и jQuery в одном проекте - это странно, но проект старый, и только частями работает на React). Все скрипты запишутся в app.js. И потом мы объединяем все нужные нам css-файлы в один и он записывается в app.css. В самом проекте нужно подключить только app.js и app.css и всё будет работать!

Надеюсь, моя статья оказалась вам полезной и я нигде не напутал с исходниками. Удачи!

Комментарии

Комментариев пока нет. Станьте первым! Конечно, если вы не хотите написать мне гадости.
Обязательное поле.
Подсказка по Markdown, используется для оформления.

DeveloperNotes.ru © 2018 — 2020