Компиляция и минификация CSS и JS

 

Laravel оснащена отдельным продвинутым пакетом Laravel Mix, позволяющим работать с минификацией и компиляцией файлов JS и CSS.

Если вкратце о том, что это дает - то объединяет отдельные файлы стилей CSS и скриптов JS сайта в единые файлы. А также дает возможность браузерам читать информацию о последних изменениях файлов.

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

Для работы пакета Mix необходимо предварительно установить NodeJS на хостинге.

В корне сайта расположен файл webpack.mix.js. В этом файле прописываются все настройки пакета Laravel Mix. Это выглядит примерно так:

    //содержимое файла webpack.mix.js
    
    mix
        // задаем пути для компилятора JS файлов
        .js('resources/js/app.js', 'public/js')
        // задаем пути для компилятора CSS файлов
	.postCss('resources/css/compiled.css', 'public/css')
       // если сайт использует VueJS то прописываем настройку здесь
       .vue()
      // задаем компиляцию версионности файлов
      .version();
  

Ниже расскажем подробнее о том, для чего нужна каждая из настроек:

 

JS скрипты

 

Путь для компилятора JS файлов определяет из какого файла настроек JS компилятора будет компилироваться файл JS и в какой папке он будет храниться. В данном случае файл настроек хранится в /resources/js/app.js и все данные при компиляции в соответствии с настройками из данного файла переносятся в файл /public/js/app.js

В файле настроек /resources/js/app.js можно подключать дополнительные JS модули и скрипты.

Параметр .vue() добавляет в конечный скомпилированный файл всех JS скриптов возможности работы с VueJS.

Чтобы подключить скомпилированный файл /public/js/app.js в шаблон сайта, необходимо в шаблоне прописать код:

    //любой файл шаблона сайта 
    //например: /resourses/views/layout.php
    
    <script src="{{ mix('js/app.js') }}"></script>
  

Таким образом получим ссылку в шаблоне на общий файл всех JS скриптов /public/js/app.js который нужно после внесения изменений в JS скриптах перекомпилировать командой

    //вызывается из консоли (SSH)
    
    npm run development
  

Если в настройках файла webpack.mix.js указано .version(), то будет генерироваться ссылка вида:

    //пример генерируемого html кода
    
    <script src="/js/app.js?id=10a71218b3f749171a98"></script>
  

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

 

CSS стили

 

Для скорости загрузки сайта полезным будет скомпилировать все стили файла в единый CSS файл и минимизировать его. В приведенном выше примере файл настроек компилирования CSS файла должен находится по пути /resources/css/compiled.css.

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

    //подключение файлов CSS в файл компиляции
    
    @import '/css/source/loading.css';
    @import '/css/source/fancybox.css';
  

В данном случае в файл /resources/css/compiled.css будет включено содержимое двух файлов /css/source/loading.css и /css/source/fancybox.css.

Остается добавить компилируемый файл в шаблон дизайна сайта кодом:

    //любой файл шаблона сайта 
    //например: /resourses/views/layout.php
    
    <link rel="stylesheet" href="{{ mix('/css/compiled.css') }}" />
  

Таким образом получим ссылку в шаблоне на общий файл всех CSS скриптов /public/css/compiled.css который нужно после внесения изменений в любом из включаемых файлов CSS перекомпилировать командой, аналогичной указанной выше для JS компиляции.

Аналогично компиляции JS скриптов, если в настройках файла webpack.mix.js указано .version(), то будет генерироваться ссылка на CSS вида:

    //пример генерируемого html кода
    
    <link rel="stylesheet" href="/css/compiled.css?id=6eda40cc5fd55cd5741d" />
  
Кейсы