npm run watch что это
Laravel 8 · Компиляция исходников (Mix)
Введение
Laravel Mix – это пакет, разработанный создателем Laracasts Джеффри Уэй, предлагает гибкий API для определения шагов сборки Webpack для вашего приложения с использованием нескольких распространенных препроцессоров CSS и JavaScript.
Другими словами, Mix упрощает компиляцию и минимизацию файлов CSS и JavaScript вашего приложения. Посредством простой цепочки методов вы можете гибко определять свой сценарий по сборки исходников. Например:
Если вы однажды были сбиты с толку и ошеломлены, начав работу с Webpack и компиляцией ресурсов, то вам понравится Laravel Mix. Однако от вас не требуется использовать его при разработке приложения; вы можете использовать любой желаемый инструмент сборки, или даже не использовать его вовсе. Справедливо и обратное: вы можете использовать Laravel Mix без привязки вашего приложения к фреймворку Laravel.
Если вам нужно начать разработку приложения с помощью Laravel и Tailwind CSS, ознакомьтесь с одним из наших стартовых комплектов приложения.
Установка и настройка
Установка Node
Перед запуском Mix вы должны сначала убедиться, что на вашем компьютере установлены Node.js и NPM:
Вы можете легко установить последнюю версию Node и NPM с помощью простых графических установщиков с официального веб-сайта Node. Или, если вы используете Laravel Sail, вы можете вызывать Node и NPM через Sail:
Установка Laravel Mix
Запуск Mix
Наблюдение за изменениями исходников
Команда npm run watch продолжит работу в консоли и будет следить за изменениями во всех соответствующих файлах CSS и JavaScript. Webpack автоматически перекомпилирует ваши исходники, когда обнаружит изменение в одном из этих файлов:
Webpack может не обнаруживать изменения ваших файлов в определенных локальных средах разработки. Если это наблюдается в вашей системе, рассмотрите возможность использования команды watch-poll :
Работа с таблицами стилей
Файл webpack.mix.js вашего приложения является отправной точкой для компиляции всех ресурсов. Думайте об этом как о легкой конфигурационной обертке вокруг Webpack. Задачи Mix могут быть объединены в цепочку, чтобы точно определить, как должны компилироваться ваши ресурсы.
Tailwind CSS
Tailwind CSS – это современный, низкоутилитарный фреймворк для создания удивительных сайтов, не покидая HTML-разметку. Давайте рассмотрим, как начать использовать его в проекте Laravel совместно с Mix. Во-первых, мы должны установить Tailwind с помощью NPM и сгенерировать наш конфигурационный файл Tailwind:
Затем вы должны добавить каждый из «слоев» Tailwind в файл resources/css/app.css вашего приложения:
После того, как вы указали необходимые слои Tailwind, необходимо обновить файл webpack.mix.js вашего приложения, чтобы скомпилировать ваш CSS, использующий Tailwind:
PostCSS
PostCSS – мощный инструмент для преобразования вашего CSS, включен в Laravel Mix из коробки. По умолчанию Mix использует популярный плагин Autoprefixer для автоматического применения всех необходимых префиксов CSS3. Однако вы можете добавлять любые дополнительные плагины, подходящие для вашего приложения.
Сначала установите нужный плагин через NPM и включите его в свой массив плагинов при вызове метода postCss Mix. Метод postCss принимает путь к вашему файлу CSS в качестве первого аргумента, а в качестве второго аргумента – каталог, в который следует поместить скомпилированный файл:
Или вы можете выполнить postCss без дополнительных плагинов, чтобы получить простую компиляцию и минификацию CSS:
Метод sass позволяет вам скомпилировать Sass в CSS, понятный веб-браузерам. Метод sass принимает путь к вашему файлу Sass в качестве своего первого аргумента и каталог, в который должен быть помещен скомпилированный файл, в качестве второго аргумента:
Вы можете скомпилировать несколько файлов Sass в отдельные файлы CSS и даже настроить каталог назначения результирующего CSS, вызывая метод sass несколько раз:
Обработка URL
Поскольку Laravel Mix построен поверх Webpack, важно понимать несколько концепций Webpack. Для компиляции CSS Webpack перезапишет и оптимизирует любые вызовы url() в ваших таблицах стилей. Хотя поначалу это может показаться странным, это невероятно мощная функциональность. Представьте, что мы хотим скомпилировать Sass, который включает относительный URL-адрес изображения:
Абсолютные пути для любого заданного url() будут исключены из перезаписи URL. Например, url(‘/images/thing.png’) или url(‘http://example.com/images/thing.png’) не будут изменены.
Какой бы полезной ни была эта функция, возможно, что ваша существующая структура папок уже настроена так, как вам нравится. В этом случае вы можете отключить перезапись url() следующим образом:
Карты исходников CSS
Сопоставление стилей исходников
Работа с JavaScript
Mix содержит несколько функций, которые помогут вам работать с вашими файлами JavaScript, например, компиляция современного ECMAScript, объединение модулей, минификация и объединение простых файлов JavaScript. Более того, все это работает без проблем, не требуя ни унции специального конфигурирования:
Теперь, с помощью одной строчки кода вы можете воспользоваться следующими преимуществами:
После того, как ваш JavaScript скомпилирован, вы можете ссылаться на него в своем приложении:
React
Mix автоматически установит плагины Babel, необходимые для поддержки React. Для начала добавьте вызов метода react :
За кулисами Mix загрузит и включит соответствующий плагин babel-preset-react Babel. После того, как ваш JavaScript скомпилирован, вы можете ссылаться на него в своем приложении:
Извлечение сторонних библиотек
Одним из потенциальных недостатков объединения всего кода JavaScript для конкретного приложения со сторонними библиотеками, такими как React и Vue, является то, что это затрудняет долгосрочное кеширование. Например, одно обновление кода вашего приложения заставит браузер повторно загрузить все сторонние библиотеки, даже если они не изменились.
Чтобы избежать ошибок JavaScript, обязательно загружайте эти файлы в правильном порядке:
Пользовательская конфигурация Webpack
Иногда требуется дополнительные изменения базовой конфигурации Webpack. Например, у вас может быть специальный загрузчик или плагин, на который нужно сослаться.
Версионирование / очистка кеша
Метод version добавит уникальный хеш к именам файлов всех скомпилированных исходников, что сделает очистку кеша более удобной:
После создания файла версионирования вы не узнаете его точное имя. Итак, вы должны использовать глобальную функцию Laravel mix в вашем шаблоне для загрузки хешированного ресурса. Глобальная функция mix фреймворка Laravel автоматически определит текущее имя хешированного файла:
Поскольку файлы с поддержкой версий обычно нужны только в эксплуатационном окружении, вы можете указать, чтобы процесс управления версиями выполнялся только во время запуска npm run prod :
Корректировка базовых URL-адресов с помощью Mix
После указания URL-адреса, функция mix будет подставлять указанный префикс при создании URL-адресов для ресурсов:
Перезагрузка с помощью Browsersync
BrowserSync может автоматически отслеживать изменения в ваших файлах и вносить изменения в браузер, не требуя обновления страницы вручную. Вы можете включить эту поддержку, вызвав метод mix.browserSync() :
Параметры BrowserSync можно указать путем передачи объекта JavaScript в метод browserSync :
Переменные окружения
Уведомления
Когда доступно, Mix будет автоматически отображать уведомления ОС при компиляции, давая вам мгновенную информацию о том, была ли компиляция успешной или нет. Однако, могут быть случаи, когда вы предпочтете отключить эти уведомления. Одним из таких примеров может быть запуск Mix на вашем рабочем сервере. Уведомления можно отключить с помощью метода disableNotifications :
Ускоряем npm-скрипты
Таск раннеры существенно упростили жизнь веб разработчиками автоматизируя рутинные действия связанные с запуском тестов, проверкой кода, объединением в один файл, транспайлингом и прочими не менее полезными делами. Опустим вопрос необходимости подобных инструментов, конечно, можно и без них, но они существенно упрощают жизнь и делают более качественным процесс разработки.
Все пользуются таск раннерами в той или иной мере: кто-то старинным грантом, кто-то постепенно уходящим с арены галпом и многими другими, а кто-то уже во всю использует npm-скрипты.
Последние мы сегодня разберем во всех деталях, а так же способы их ускорения и расширения возможностей
Причины использовать npm как таск раннер
Написанное ниже является субъективным опытом, и на истину последней инстанции не претендует, тем-не-менее является важными причинами дальнейшего повествования.
По мере появления перечисленных выше таск раннеров, они были мной испробованы в бою, и в каждом из них (конечно же) есть плюсы, и минусы. Рассмотрим их вкратце.
У гранта низкий порог вхождения, благодаря конфигам, которые в тот же момент являются его краеугольным камнем, заставляя генерировать их программно, из-за большого количества передаваемых полей. Галп решает эту проблему целиком, добавляя минимализм и скорость выполнения, благодаря стримам, что повышает порог вхождения, требуя от пользователей понимания того, как все работает изнутри.
И так, отойдя от гранта, разобравшись со стримами и написав лаконичный Gulpfile я успокоился и продолжил разработку текущего проекта. Для следующего приложения, я, конечно, снова написал Gulpfile. И для следующих. И для многих других.
После чего сам gulp, и его плагины начали обновляться, а потом и его зависимости, которые бывало нужно было обновлять самостоятельно. Конечно можно не использовать сервисы, следящие за обновлениями пакетов, устранением уязвимостей, исправлением ошибок и всем прочим, но это не самый хороший подход к разработке.
Таким образом мы подошли к главному недостатку большинства такс раннеров: их нужно обновлять, их зависимости нужно обновлять и зависимость зависимостей тоже. Для монолитных приложений это не представляет проблемы. Проблемы начинаются тогда, когда частей приложения много, и каждая из них является независимым модулем, а это ли не основная парадигма разработки на node.js?
Итак, вместо того, что бы обновлять: gulp, gulp-jshint и jshint, я лучше просто буду использовать jshint напрямую, с помощью интерфейса командной строки, который не часто меняется, значительно упрощая себе этим жизнь.
npm-скрипты
Когда я начал активно использовать npm-скрипты, я, как и многие разработчики, осознал неудобство и многословность такого подхода, к примеру, если нужно организовать проверку линтерами, код будет выглядеть таким образом:
Тогда скрипт, который запускает все проверки будет выглядит так:
Очень уж многословно, а тут всего-то 3 скрипта запускаются.
Удобные npm-скрипты
npm-run-all
Предыдущий пример получился очень многословным (гораздо более коротким чем в случае с грантом и галпом, но тем-не-менее) и сложночитаемым. npm-run-all существенно все упрощает. С его помощью, код делающий тоже самое будет выглядеть так:
И делать примерно то же самое: поочередно запускать скрипты.
npm-run-all очень не плохо себя показывает в плане удобства, но по принципу действия он не сильно уходить от npm run : каждая команда вызывается отдельно, что значительно замедляет весь процесс.
Быстрые npm-скрипты
Redrun
Что может redrun?
Взаимодействие
Установим tape для тестов, и запишем простейший тест, который проходит.
Теперь в секцию scripts файла package.json добавим несколько разделов:
После чего запустим тест с помощью npm :
А теперь то же самое, только с помощью redrun :
Даже на таком простом примере видно, что скорость выполнения почти в 3 раза выше.
Теперь попробуем тоже самое со скриптом npm watch:test :
Попробуем тоже-самое выполнить с помощью npm :
С помощью npm нам потребовалось 11 секунд, для того, что бы узнать, что nodemon не установлен.
Теперь все работает: запускается наблюдатель, который смотрит за изменениями в папках test и lib и перезапускает tape test.js — именно то, что нам нужно. При этом остается возможность использовать компактный синтаксис скриптов в package.json.
Процесс разработки
Redrun пишется по TDD, по этому вносить изменения: добавлять фичи, или фиксить баги — очень просто. Если читатель заметит не очевидное и не документированное расхождение в работе redrun по сравнению с аналогичными инструментами: создавайте ишью, присылайте пул реквесты — будем исправлять.
Управление front-end проектом с помощью NPM
Недавно я задался вопросом поиска инструментария для разработки мобильных приложений на html/css. Из требований были: доступность, легковесность, простота настройки. Выбор пал на встроенный Node менеджер NPM. NPM содержит
инструментарий для базовых тасков типа install и запуска пользовательских скриптов. Также NPM не такой громоздкий, как Grunt и не требует адаптации модулей под себя, т.к. запускает модули с командной строки.
NPM, как средство разработчика
NPM умеет организовывать работу уже существующих модулей между собой. Да,
иногда решения не изящны и уступают Grunt, но каждой задаче должен быть соответствующий инструментарий. Т.к. NPM всего лишь запускает
модули через командную строку, то вам не нужно создавать или ждать не достающий
модуль, скорее всего он уже реализован.
Установка NPM
Приятное в NPM то, что он установлен у вас, если установлен Node.JS. Вам необходимо написать только файл конфигурации и вы
сможете выполнять базовые действия по сборке и тестированию ваших проектов.
Пример NPM конфига
В данном случае нам интересны блоки devDepencies и scripts. В devDepencies мы указываем какие модули будем использовать в разработке. В scripts создаем скрипты для сборки, тестирования проекта.
Давайте добавим пару полезных модулей.
Jade. Модуль шаблонизатора Jade, будем использовать чтобы генерировать наш html.
Uglify-JS2. Модуль для минимизации JS кода.
Less. Модуль для компиляции css из less файлов.
JSHint. Модуль для проверки JS кода на качество. Очень советую использовать.
Supervisor. Модуль для запуска JS приложений или команд при изменении файлов в каталоге.
Сохраняем это в package.json. Переходим в каталог и выполняем npm install. NPM загрузит модули в каталог node_modules.
Это только установка модулей, что касается их запуска, то нужно добавить секцию scripts в наш конфиг. Также
нам понадобятся UnixUtils на Windows.
less скрипт компилирует less из папки src/less в css и кладет в папку build/css
uglify-js2 скрипт минимизирует весь js код из папки src, включая библиотеки из папки lib и кладет его в папку build/js
jade скрипт компилирует html из папки src/jade и кладет его в build
build Поочередно запускает скрипты less, uglify и jade
start Алиас для Build
watch запускает supervisor и смотрит за каталогом src и при изменении файлов с расширением less, js, jade запускает скрипт build
Запусить любой из скриптов можно командой npm run %commandname%. Например, npm run build. Например, npm run build для сборки проекта или npm run watch для наблюдение за каталогом и пересборки в случае изменения файлов.
NPM и TDD\BDD
Интеграция с IDE
Т.к. NPM использует коммандную строку, то интеграция NPM с IDE становиться очень простой задачей. Например, расширение Shell Turtlestein для Sublime Text 2 позволяет запускать команды из IDE и смотреть output комманд прямо из IDE.
Npm run watch что это
Когда речь заходит о создании простого фронт-энд проекта, то как начать? Какие инструменты вам нужны? Я подозреваю, что у каждого будет свой ответ. Вы начинаете с каркаса (JS или CSS), или готового шаблона? Возможно, вы используете таск-менеджер для выполнения задач (например, Gulp) для организации потребностей вашего проекта. Или вы начинаете с простого HTML и CSS-файла?
Разнообразие инструментов может быть запутанным, а иногда и подавляющим. В этой серии статей я хочу помочь разработчикам разобраться в некоторых инструментах и методологиях, которые стали привычными для создания веб-проектов. В течение следующих трех статей мы построим вместе простой стартовый проект. Вот что вы изучите:
Не стесняйтесь пропускать те части, с которыми вы уже знакомы.
Зачем нужен репозиторий для стартового проекта?
В любом проекте вы, скорее всего, захотите иметь такие инструменты:
В более крупных проектах существует гораздо больше вариантов инструментов, которые мы могли бы добавить в набор, чтобы помочь нам создать эффективные и доступные веб-сайты. Возможно, нам понадобится упаковщик модулей, разделение кода и преобразование js кода (например из typescript в javascript). Что касается CSS, возможно, мы хотели бы подключить наши критически важные CSS или очистить неиспользуемые селекторы.
Все эти инструменты требует времени на установку и настройку, и делать это с нуля каждый раз, когда мы начинаем новый проект, было бы не лучшим решением. Вот почему полезно иметь стартовый репозиторий, который мы можем клонировать или скачать, со всеми необходимым и настроенными инструментами, чтобы сразу же начать кодирование.
Выбор инструментов
Я не тот человек, который любит проводить время, устанавливая и настривая сложные инструменты. Я хочу, чтобы установка инструментов требовала от меня как можно меньше времени, чтобы я мог сконцентрироваться на том, что я люблю делать! Хотя я использовал Gulp в прошлом, сейчас это кажется не такой необходимой частью инструментария: практически все зависимости можно установить через NPM и настроить их с помощью скриптов NPM не сложнее, чем настроить их с помощью Gulp. Поэтому использвание таск-менеджера кажется немного избыточным и только добавляет дополнительную зависимость к проекту.
Инструменты, которые я выбрал здесь, являются личными предпочтениями и подходят для тех проектов, которые я люблю создавать. Они не обязательно являются каким-то стандартом, и существует множество различных способов и других инструментов, для разработки фронтенда. Но я надеюсь, что это руководство поможет вам лучше познакомиться с некоторыми инструментами, которые стали популярными среди разработчиков, чтобы вы могли сделать свой собственный выбор.
Учитывая это, давайте начнем строить наш стартовый проект и узнаем об инструментах, которые мы будем использовать на этом пути. Не стесняйтесь пропускать любые темы, с которыми вы уже знакомы.
Установка Node.js
Самое первое, что нам нужно сделать, чтобы настроить наш проект на работу со скриптами в NPM, это убедиться, что у нас установлен Node.js глобально. Звучит достаточно просто, но уже сейчас все становится немного сложнее, когда мы понимаем, что существует ряд различных способов как это сделать:
При установке Node также устанавливается NPM (менеджер пакетов Node Package Manager). Это, по сути, огромная библиотека инструментов (или пакетов) разработки Javascript с открытым исходным кодом, которые может опубликовать любой желающий. Мы имеем прямой доступ к этой библиотеке инструментов и можем установить любой из них в нашем проекте.
NPM или Yarn?
Инициализация проекта
Этот файл содержит всю информацию о нашем проекте, и здесь мы можем редактировать детали, которые мы только что пропустили.
Структура проекта
Начнем со структуры папок, которая выглядит следующим образом:
Создание структуры папок из командной строки
Вы можете создать вышеуказанную структуру директорий вручную, либо в IDE, либо в файловой системе компьютера. Но если вы хотите сэкономить время, вы можете сделать это из терминала. В корне проекта вы можете запустить:
Построчно, этот код:
Теперь давайте добавим в наш файл index.html следующий код, чтобы мы могли видеть наш сайт в браузере:
Установка зависимостей
Теперь, когда у нас есть основная структура директорий, мы можем начать установку некоторых пакетов и написать скрипты NPM, которые позволят нам создавать и просматривать наш сайт. Скрипты, которые мы собираемся написать, будут:
После выполнения этой команды вы должны увидеть пару новых вещей:
Виды зависимостей
Кроме того мы установим Browsersync в качестве dev зависимости. Browsersync запустит локальный сервер и будет перезагружать браузер при изменении файлов.
Пишем сценарии NPM
Sass в CSS
Добавьте несколько стилей во вновь созданный файл, затем вернитесь в терминал и запустите выполните:
Автоматическая перезагрузка страниц
Сначала давайте напишем скрипт, запускающий сервер, который мы будем называть serve :
Отслеживание изменений
В настоящее время нам все еще нужно запустить наш scss скрипт, когда мы хотим скомпилировать наши Sass стили. Нам нужны наши скрипты, чтобы сделать это:
Мы можем написать скрипт NPM, который запускает другие сценарии. Давайте добавим скрипт, который следит за изменениями и запускает наш скрипт scss :
Комбинирование скриптов
Теперь нам нужно запустить две команды параллельно: Команду serve для запуска нашего сервера и команду watch:css для компиляции нашего Sass в CSS, которая вызовет перезагрузку страницы. Используя скрипты NPM, мы можем легко выполнять команды последовательно, используя оператор && :
Чтобы мы могли запускать команды параллельно, нам нужно установить другой пакет. NPM имеет несколько вариантов на выбор. Тот, который выбрал я npm-run-all :
Теперь мы можем установить некоторые пакеты и написать сценарии для автоматизации некоторых других задач, таких как оптимизация изображений, создание спрайтов SVG и минификации JS.
Это стартовый проект может отлично подойти для небольших проектов, но чем больше задач мы хотим выполнить, тем больше скриптов нам понадобится написать, и тем сложнее будет ими управлять. Итак, в следующей статье мы рассмотрим, как Parcel, упаковщик модулей, поможет автоматизировать многие из этих задач с минимальной конфигурацией, и предоставить инструменты, необходимые для построения больших проектов.
Laravel Mix — сборка фронтенда
Laravel Mix ранее был известен как Elixir и поставлялся в виде отдельного плагина, но с версии 5.4 он был включён в официальную поставку фреймворка. Разница между Elixir и Mix в том, что последний является надстройкой над Webpack, в то время как первый основан на Gulp. Laravel Mix умело работает с JavaScript, не только минифицируя его, но и адаптируя под версию ECMAScript 5, гарантируя тем самым, что скрипт будет запускаться на старых браузерах.
Установка
Перед установкой нужно убедиться, что установлен Node и менеджер пакетов npm. Проверить можно с помощью двух команд:
Для установки laravel-mix (и всех прочих пакетов из package.json ) — нужно выполнить команду из директории проекта:
Запуск
Запустить все задачи:
Запустить все задачи и следить за изменениями файлов:
Если какой-либо файл был изменен, он производит автоматически его компиляцию. Эту команду есть смысл использовать, если нужно внести большие правки в стили или скрипты.
Запустить все задачи и минифицировать файлы:
Настройка
Использование метода js() позволяет произвести транспиляцию в версию ECMAScript 5, минифицировать js-код, произвести сборку модулей и получить на выходе JavaScript, который может работать в старых браузерах.
Для объединения и минификации нескольких js-файлов предназначен метод scripts() :
Для объединения и минификации нескольких css-файлов предназначен метод styles() :
По умолчанию работа с source maps отключена, потому что это очень сильно замедляют процесс компиляции и требуют больше ресурсов процессора — но это всегда можно изменить.