Frontender Magazine
Есть несколько модных инструментов для автоматизации сборки в javascript-проектах, которые я никогда не находил привлекательными, потому как знаком с менее известной командой npm run , которой вполне достаточно для всего, что мне необходимо делать, сохраняя при этом достаточно маленький конфигурационный файл.
Вот несколько трюков, которые я использую чтобы получить максимальную отдачу от npm run и полей script в package.json .
Поле «script»
Возможно вы этого не знали, но npm содержит поле под названием scripts в файле package.json проекта для того, чтобы делать такие команды, как npm test , фактически, выполняющая содержимое поля scripts.test , и npm start , вызывающая инструкции из поля scripts.start .
npm test и npm start — это, всего лишь, удобные ссылки для npm run test и npm run start . С помощью npm run можно выполнить совершенно любое содержимое любого поля внутри scripts .
Кроме того, npm run великолепен ещё и потому, что npm автоматически добавляет в $PATH директорию node_modules/.bin , так что вы можете напрямую запускать команды из dependencies или devDependencies , без необходимости устанавливать это модули глобально. npm-пакеты, которые вы хотели бы включить в свой воркфлоу, должны иметь всего лишь простой интерфейс командной строки, и вы сможете написать простую автоматизацию самостоятельно.
Сборка javascript
Я пишу клиентский код, используя для его организации принятые в commonjs module.exports и require() и подключая модули, опубликованные в npm. browserify может преобразовать все вызовы require() в статический код, на этапе сборки, создав единый склееный бандл-файл, который можно загрузить, используя тег script . Для использования browserify я просто держу в package.json поле scripts[‘build-js’] , которое выглядит так:
"build-js": "browserify browser/main.js > static/bundle.js" Если я хочу собрать javascript для продакшна, я также выполняю минификацию — подключаю uglify-js как devDependency и дописываю его через пайп:
"build-js": "browserify browser/main.js | uglifyjs -mc > static/bundle.js" Отслеживание изменений в javascript
Для автоматической перекомпиляции клиентского javascript при любых изменениях файлов, я просто заменяю команду browserify на watchify и добавляю ключи -d и -v для дебага и более подробного вывода.
"watch-js": "watchify browser/main.js -o static/bundle.js -dv" Сборка CSS
Я обнаружил, что cat обычно полностью удовлетворяет мои потребности, так что я просто держу для сборки что-то вроде этого:
"build-css": "cat static/pages/*.css tabs/*/*.css > static/bundle.css" Отслеживание изменений в css
Так же как и с watchify , я пересобираю css при изменениях с помощью замены cat на catw:
"watch-css": "catw static/pages/*.css tabs/*/*.css -o static/bundle.css -v" Последовательности задач
Если у вас есть две задачи, которые вы хотели бы запускать последовательно, то вы можете записать их через npm run и разделив их с помощью && :
"build": "npm run build-js && npm run build-css" Параллельные задачи
Если вам нужно запустить несколько задач параллельно, просто разделите их с помощью & :
"watch": "npm run watch-js & npm run watch-css" Получившийся package.json
Соединив всё, о чем я говорил, мы получим примерно такой package.json
< "name": "my-silly-app", "version": "1.2.3", "private": true, "dependencies": < "browserify": "~2.35.2", "uglifyjs": "~2.3.6" >, "devDependencies": < "watchify": "~0.1.0", "catw": "~0.0.1", "tap": "~0.4.4" >, "scripts": < "build-js": "browserify browser/main.js | uglifyjs -mc > static/bundle.js", "build-css": "cat static/pages/*.css tabs/*/*.css", "build": "npm run build-js && npm run build-css", "watch-js": "watchify browser/main.js -o static/bundle.js -dv", "watch-css": "catw static/pages/*.css tabs/*/*.css -o static/bundle.css -v", "watch": "npm run watch-js & npm run watch-css", "start": "node server.js", "test": "tap test/*.js" > > Если мне нужно выполнить сборку для продакшна, я просто выполняю npm run build . Для локальной разработки я запущу npm run watch .
Вы можете расширять базовое приближение как хотите! Например, вам может понадобиться выполнить build до запуска start , в этом случае вы просто напишете:
"start": "npm run build && node server.js" Или, возможно, вы захотите создать команду npm run start-dev , которая также запустит вотчеры:
"start-dev": "npm run watch & npm start" Вы можете реорганизовать все части так, как хотите!
Когда становится действительно сложно…
Если вы поняли, что вбили слишком много команд в одно поле scripts , то советую вам подумать над тем, чтобы вынести некоторые из этих команд в отдельное место, такое как bin/ .
Эти скрипты можно написать на bash, на node, на perl, да на чем угодно! Просто добавьте свойство #! в начало файла, выполните chmod +x , получится так:
#!/bin/bash (cd site/main; browserify browser/main.js | uglifyjs -mc > static/bundle.js) (cd site/xyz; browserify browser.js > static/bundle.js) "build-js": "bin/build.sh" Если вам совершенно точно нужно собирать ваш проект на windows, просто удостоверьтесь, что у разработчиков, которые пользуются windows, есть копия msysgit, которая поставляется вместе с bash, cygwin или чем-то похожим. Или предложите им перейти на UNIX.
Я много экспериментировал, решая проблему невозможности запуска некоторых команд bash в терминале windows, но работа пока далека от завершения.
Вывод
Я надеюсь, что те примеры использования npm run , которые я описал здесь, помогут тем из вас, кто не был вдохновлен текущим состоянием дел в инструментах для сборки фронтенда, и особенно тем, кто, как и я, не проникся призывами этих инструментов. Я предпочитаю инструменты, пропитанные наследием UNIX, такие, как git, или npm, о котором я говорил здесь. Эти инструменты предоставляют быстрый и минималистичный интерфейс, с которым можно взаимодействовать через bash. Некоторые из этих штук не требуют долгих церемоний, или обсуждений. Можно зайти очень далеко, используя очень простые инструменты, которые делают очень обычные вещи.
Если вам не нравится стиль npm run , о котором я рассказал здесь, вы можете присмотреться к Мakefile, как к простой и проверенной временем альтернативе.
Сборка фронтенда (Laravel Mix)
Laravel Mix — это чистый и гибкий API для определения инструкций сборки Webpack для вашего Laravel-приложения с использованием нескольких основных препроцессоров CSS и JavaScript. С помощью сцепки методов вы можете гибко определить свой конвейер сборки. Например:
mix.js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css'); Если вы не знали, с какой стороны подойти к Webpack и вообще к сборке фронтенда, то вам точно понравится Laravel Mix. Но вам необязательно использовать именно его при разработке своего приложения. Вы можете использовать любой другой инструмент для сборки, или вообще не использовать его.
Установка и настройка
Установка Node
Перед запуском Mix необходимо убедиться, что на вашей машине установлены Node.js и NPM.
node -v npm -v По умолчанию Laravel Homestead включает в себя всё необходимое. Однако, если вы не используете Vagrant, то вы можете легко установить последнюю версию Node и NPM, используя простые графические установщики с их страницы загрузки.
Laravel Mix
Послений оставшийся шаг — установить Laravel Mix. В свежей установке Laravel вы найдете файл package.json в корне вашей структуры директорий. Файл package.json по умолчанию включает все необходимое, чтобы начать. Подумайте об этом как о вашем файле composer.json , кроме того, что он определяет Node-зависимости вместо PHP. Вы можете установить зависимости, запустив:
npm install Если вы занимаетесь разработкой на системе Windows или ваша VM работает на Windows-хосте, вам может потребоваться выполнить команду npm install с ключом —no-bin-links :
npm install --no-bin-links Запуск Mix
Mix — это слой настройки поверх Webpack, поэтому для запуска задач Mix вам нужно только выполнить один из NPM-скриптов, который включен в файл Laravel package.json по умолчанию:
// Запустить все задачи Mix. npm run dev // Запустить все задачи Mix и минифицировать вывод. npm run production Отслеживание изменений ассетов
Команда npm run watch продолжит выполняться в терминале и будет следить за всеми изменениями ваших ресурсов. Когда что-либо изменится, автоматически скомпилируются новые файлы:
npm run watch Вы можете обнаружить, что в определенных средах Webpack не обновляется, когда меняются ваши файлы. Если это как раз то, с чем вы столкнулись, попробуйте использовать команлу watch-poll :
npm run watch-poll Работа с таблицами стилей
Файл webpack.mix.js — ваша точка входа для компиляции всех ассетов. Считайте его легкой оболочкой для настройки поверх Webpack. Задачи Mix можно связать вместе, чтобы конкретно указать как должны компилироваться ваши ассеты.
Less
Метод less можно использовать для компилирования Less в CSS. Давайте скомпилируем наш первичный файл app.less в public/css/app.css .
mix.less('resources/assets/less/app.less', 'public/css'); Множественные вызовы метода less можно использовать для компилирования нескольких файлов:
mix.less('resources/assets/less/app.less', 'public/css') .less('resources/assets/less/admin.less', 'public/css'); Если вы хотите изменить имя файла скомпилированного CSS, вы можете передать полный путь в качестве второго аргумента методу less :
mix.less('resources/assets/less/app.less', 'public/stylesheets/styles.css'); Если нужно переопределить лежащие в основе plug-in опции Less, то можно передать объект в качестве третьего аргумента mix.less() :
mix.less('resources/assets/less/app.less', 'public/css', < strictMath: true >); Sass
Метод sass позволяет компилировать Sass в CSS. Вы можете использовать метод следующим образом:
mix.sass('resources/assets/sass/app.scss', 'public/css'); Как и в случае с методом less , вы можете компилировать несколько файлов Sass в их соответствующие CSS-файлы и даже настроить директорию вывода итогового CSS:
mix.sass('resources/assets/sass/app.sass', 'public/css') .sass('resources/assets/sass/admin.sass', 'public/css/admin'); Дополнительные plug-in опции Node-Sass можно указать в качестве третьего аргумента:
mix.sass('resources/assets/sass/app.sass', 'public/css', < precision: 5 >); Stylus
Схоже с Less и Sass, метод stylus позволяет компилировать Stylus в CSS:
mix.stylus('resources/assets/stylus/app.styl', 'public/css'); Вы также можете установить дополнительные плагины Stylus, такие как Rupture. Сначала установите требуемый плагин через NPM ( npm install rupture ) и затем затребуйте его в своем вызове mix.stylus() :
mix.stylus('resources/assets/stylus/app.styl', 'public/css', < use: [ require('rupture')() ] >); PostCSS
PostCSS — мощный инструмент для трансформации CSS, который включен в Laravel Mix. По умолчанию Mix пользуется популярнм плагином Autoprefixer для автоматического применения всех необходимых вендор-префиксов CSS3. Вы свободно можете добавлять любые дополнительные плагины, которые подходят для вашего приложения. Сначала нужно установить желаемые плагины через NPM и затем обратиться к ним в вашем файле webpack.mix.js :
mix.sass('resources/assets/sass/app.scss', 'public/css') .options(< postCss: [ require('postcss-css-variables')() ] >); Простой CSS
Если вам просто хотелось бы сконцентрировать некоторые простые таблицы стилей CSS в единый файл, то можно воспользоваться методом styles .
mix.styles([ 'public/css/vendor/normalize.css', 'public/css/vendor/videojs.css' ], 'public/css/all.css'); Обработка URL
Так как Laravel Mix строится поверх Webpack, крайне важно понять некоторые концепты Webpack. Для компиляции CSS Webpack будет перезаписывать и оптимизировать любой вызов url() в рамках ваших таблицей стилей. Хотя это и может звучать странно, это невероятно мощный функционал. Представьте, что мы хотим скомпилировать Sass, который включает относительный URL, в изображение:
.example < background: url('../images/example.png'); > Абсолютные пути для любого заданного url() будут исключены из перезаписывания URL. Например, url(‘/images/thing.png’) или url(‘http://example.com/images/thing.png’) не будут изменены.
По умолчанию Laravel Mix и Webpack найдут example.png , скопируют их в вашу папку public/images , а затем перезапишут url() в вашей сгенерированной таблице стилей. Таким образом, ваш скомпилированный CSS будет:
.example < background: url(/images/example.png?d41d8cd98f00b204e9800998ecf8427e); >Хотя эта функция и полезна, возможно ваша существующая папка уже настроена так, как вам нравится. Если это именно ваш случай, можно отключить перезаписывание url() :
mix.sass('resources/assets/app/app.scss', 'public/css') .options(< processCssUrls: false >); После добавления вышеуказанного в ваш файл webpack.mix.js , Mix больше не будет сопоставлять любой url() или копировать ассеты в вашу общую директорию. Другими словами, скомпилированный CSS будет выглядеть так же, как вы его и напечатали изначально:
.example < background: url("../images/thing.png"); > Source Maps (файлы с информацией, которая требуется при отладке)
Хотя они и отключены по умолчанию, source maps (файлы с информацией, которая требуется при отладке) можно активировать, вызвав метод mix.sourceMaps() в вашем файле webpack.mix.js . Хотя это и связано с ценой компиляции/производительности, это обеспечит дополнительную отладочную информацию инструментам разработчика вашего браузера при использовании скомпилированных ассетов.
mix.js('resources/assets/js/app.js', 'public/js') .sourceMaps(); Работа с JavaScript
Mix предоставляет несколько функций для работы с JavaScript-файлами, например: компилирование ECMAScript 2015, бандлинг модулей, минификация и простая конкатенация простых JavaScript-файлов. Даже лучше: это все работает незаметно для пользователя, не требуя ни грамма пользовательской настройки:
mix.js('resources/assets/js/app.js', 'public/js'); Используя эту единственную строку кода теперь вы можете воспользоваться следующими плюсами:
— Синтаксис ES2015. — Модули — Компиляция файлов `.vue`. — Минификация для продакшна.
Извлечение библиотек поставщика
Одним из потенциальных недостатков бандлинга всего JavaScript приложения с вашими библиотеками поставщиков является то, что это затрудняет долгосрочное кэширование. Например, одно обновление вашего кода приложения заставит браузер повторно загружать все ваши библиотеки поставщиков, даже если они не изменились.
Если вы планируете часто обновлять JavaScript своего приложения, то вам следует рассмотреть вариант извлечение всех своих внешних библиотек в отдельный файл. Таким образом, изменение кода вашего приложения не повлияет на кеширование вашего большого файла vendor.js . Метод extract в Mix делает эту задачу чрезвычайно простой:
mix.js('resources/assets/js/app.js', 'public/js') .extract(['vue']) Метод extract принимает массив всех библиотек или модулей, которые вы бы хотели извлечь в файл vendor.js . Используя вышеуказанный сниппет в качестве примера, Mix сгенерирует следующие файлы:
— `public/js/manifest.js`: *Webpack manifest runtime* — `public/js/vendor.js`: *Ваши библиотеки поставщика* — `public/js/app.js`: *Код вашего приложения*
Убедитесь, что загрузили эти файлы в соответствующем порядке, чтобы избежать ошибок JavaScript:
script src="/js/manifest.js"> script> script src="/js/vendor.js"> script> script src="/js/app.js"> script> React
Mix может автоматически установить Babel-плагины, необходимые для поддержки React. Для начала замените mix.js() на mix.react() :
mix.react('resources/assets/js/app.jsx', 'public/js'); Mix в фоновом режиме скачает и включит подходящие Babel-плагины babel-preset-react .
Vanilla JS
Схоже с комбинирование таблиц стилей с mix.styles() , вы также можете скомбинировать и минифицировать любое количество файлов JavaScript при помощи метода scripts() :
mix.scripts([ 'public/js/admin.js', 'public/js/dashboard.js' ], 'public/js/all.js'); Эта опция особенно полезна для прежних версий проектов, где вам не требовалась компиляция Webpack для вашего JavaScript.
Вариация mix.scripts() — mix.babel() . Сигнатура этого метода идентична scripts ; однако, конкатенированный файл получит компиляцию Babel, которая переводит любой код ES2015 в vanilla JavaScript, который поймут все браузеры.
Пользовательская настройка Webpack
Laravel Mix обращается к преднастроенному файлу webpack.config.js . Время от времени вам может потребоваться вручную изменить этот файл. У вас, возможно, есть специальный лоадер или плагин, который нужно указывать, или может вы предпочитаете использовать Stylus вместо Sass. В таких случаях у вас будет два выбора:
Слияние пользовательской настройки
Mix предоставляет полезный метод webpackConfig , который позволит выполнить слияение любых коротких Webpack-переопределений. Это крайне привлекательный выбор, так как от вас не требуется копировать и поддерживать собственную копию файла webpack.config.js . Метод webpackConfig принимает объект, который должен содержать любую специальную настройку Webpack, которую вы желаете применить.
mix.webpackConfig(< resolve: < modules: [ path.resolve(__dirname, 'vendor/laravel/spark/resources/assets/js') ] > >); Пользовательские файлы настроек
Скопируйте файл node_modules/laravel-mix/setup/webpack.config.js в корневую директорию вашего проекта, если вы бы хотели полностью изменить свою настройку Webpack. Затем укажите все ссылки —config в своем файле package.json на этот скопированный конфиг. Если вы решите воспользоваться этим подходом, любые будущие upstream-обновления webpack.config.js вашего Mix следует вручную склеивать с вашим измененным файлом.
Копирование файлов и директорий
Метод copy используется для копирования файлов и папок в новое место. Это может пригодиться, когда нужно переместить определенный ассет из директории node_modules в вашу папку public .
mix.copy('node_modules/foo/bar.css', 'public/css/bar.css'); При копировании директории метод copy сделает структуру директории более плоской. Если нужно поддерживать оригинальную структуру директории, вместо этого следует использовать метод copyDirectory :
mix.copyDirectory('assets/img', 'public/img'); Версии файлов /очистка кэша
Многие разработчики добавляют в имена ресурсов время создания или уникальный токен, чтобы браузер загружал свежие ресурсы вместо обработки устаревшего кода. В Mix для этого служит метод version .
Метод version автоматически добавит уникальный хеш к именам всех скомпилированных файлов, что способствует более удобной очистке кэша:
mix.js('resources/assets/js/app.js', 'public/js') .version(); Сгенерировав версию файла, вы можете использовать глобальную функцию Laravel PHP mix в ваших шаблонах для загрузки соответствующих хешированных ресурсов. Функция mix автоматически определит имя хешированного файла:
link rel="stylesheet" href=">"> Так как во время разработки обычно нет необходимости в версионированных файлах, вы можете указать, чтобы процесс версионировання запускался только во время npm run production :
mix.js('resources/assets/js/app.js', 'public/js'); if (mix.inProduction())
Перезагрузка Browsersync
BrowserSync автоматически производит обновление в браузере при изменениях в ваших ресурсах. Вы можете использовать метод mix.browserSync() :
mix.browserSync('my-domain.dev'); // Or. // https://browsersync.io/docs/options mix.browserSync(< proxy: 'my-domain.dev' >); Этому методу можно передавать либо строку (прокси), либо объект (настройки BrowserSync). Затем запустите дев-сервер Webpack, используя команду npm run watch . Теперь, когда вы изменяете скрипт или файл PHP, смотрите как браузер сразу же обновляет страницу, чтобы отразить внесенные изменения.
Переменные среды
Вы можете внедрите переменные среды в Mix, укахав префикс MIX_ ключу в вашем файле .env :
MIX_SENTRY_DSN_PUBLIC=http://example.com После того как переменная была задана в вашем файле .env , вы можете получить доступ через объект process.env . Если значение меняет во время выполнения задачи watch , вам потребуется перезапустить задачу:
process.env.MIX_SENTRY_DSN_PUBLIC Уведомления
Когда доступно, Mix будет автоматически отображать уведомления ОС для каждого бандла. Это даст вам мгновенную обратную связь о том, была ли компиляция успешной или нет. Однако, иногда может потребоваться отключить эти уведомления. Одним из таких примеров может быть запуск Mix на вашем продакшн-сервере. Уведомления можно отключить через метод disableNotifications .
mix.disableNotifications(); Русскоязычное комьюнити
- Группа в VK
- Телеграм LaravelRUS
- Телеграм Laravel для новичков
- Телеграм LaravelPro
Обучающие ресурсы
- Laracasts
- Codecourse
- Курс Дмитрия Елисеева
- Adam Wathan
Блоги разработчиков
- Laravel News
- Freek Van der Herten
- Brent Roose
- Marcel Pociot
Npm run watch что это
dir.by Сайт dream-land.by
перенесен на dir.by —>
Поиск
watch опция в npm скриптах (наблюдаем за изменениями в файлах)
Посмотрели 2428 раз(а)
← Предыдущая тема
Выполняем в командной строке «npm run MyScript1» | Файл package.json вот такой: «scripts»: | Node.js
Следующая тема →
Отладка Node.js. Смотрим значения переменных, стэк функций, breakpoints в Visual Studio Code
Ваши Отзывы . комментарии.
Автоматическая компиляция ресурсов с помощью Webpack в Laravel
Сборка ресурсов проекта с помощью инструкций сборки Webpack для Laravel-приложения — удобное решение, которое позволяет быстро наращивать функционал и изменения отображения проекта. Однако, при внесении изменений, например в CSS-файлы или JS-скрипты, требуется каждый раз запускать команду на сервере, чтобы эти обновления подтянулись в проект.
Для того, чтобы ещё более автоматизировать процесс работы с проектом на Laravel, можно использовать функцию, которая будет отслеживать все изменения в файлах проекта, которые участвуют в компилировании рабочих файлов, и при внесении в них изменений (и сохранении файла), будут запускать автоматическую перекомпиляцию соответствующих файлов проекта. Таким образом больше не потребуется после внесения каждого изменения запускать из консоли сервера команду на перекомпиляцию.
Для того, чтобы запустить процесс автоматической компиляции обновлений в процессе работы над проектом на Laravel, на сервере нужно запустить команду:
npm run watchВ оригинальной документации пишут, что если с этой командой будут глюки, можно использовать:
npm run watch-pollУ меня всё нормально работает в обоих случаях и изменения автоматом обновляют файлы проекта по сценариям, описанных в файле webpack.mix.js .
Есть одно небольшое неудобство связанное с тем, что для того, чтобы эта функция оставалась активной, нужно её постоянно держать включенной. Поэтому окно сеанса с запущенной программой нужно держать открытой, а для запуска других команд, открывать новые SSH-сессии. Но это пустяки, в сравнению с тем, что не надо каждый раз лезть в консоль и запускать команду перекомпиляции.
Наверняка можно вообще запустить эту команду в фоновом режиме (и тогда она будет висеть в задачах сервера, пока её не остановят или сервер не перезагрузят), но это надо постоянно помнить о том, что на сервере болтается что-то лишнее. Так что одно окно с запущенным сервисом в PUTTY можно потерпеть. =)
Для того, чтобы остановить процесс автоматической компиляции обновляемых файлов проекта на Laravel, нужно в консоли нажать Ctrl + z . Это остановит процесс и вернёт обратно управление в консоль и ей можно будет пользоваться для ввода других команд на сервере.
Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! 😉