Пишите простые задачи для разработки — сила скриптов NPM

Забудьте о средствах запуска задач, таких как «Grunt/Gulp», или сборщиках, таких как «Webpack/Parcel», если все, что вам нужно, это несколько простых задач, которые вы можете выполнить с помощью «скриптов npm».

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

Список задач:

• Скомпилировать Sass в CSS
• Сгенерируйте файлы исходной карты
• Обработка префиксов поставщиков браузера
• Минимизируйте CSS

Эти задачи могут быть созданы с помощью силы npm-скрипты, а не средства выполнения задач или упаковщики. Он чище, проще, имеет меньше зависимостей, никаких сторонних плагинов/оберток… Вместо этого прямое использование CLI пакетов.

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

Позвольте мне показать вам, как это просто!

Пришло время создать один проект, назовем его «dummy-project», а затем напишем все эти задачи, используя npm scripts которые были упомянуты выше.

Создайте наш первый «фиктивный проект» с использованием Терминал и смените каталог на него…

cd ~/Sites && mkdir dummy-project && cd dummy-project

Создайте каталог и поместите нас в него…

Теперь давайте создадим package.json файл очень быстро…

npm init -y

Сгенерируйте файл без вопросов…

Теперь этот файл создан, и мы можем продолжить. Теперь пришло время установить любой devDependencies что нам требуется для наших упомянутых задач.

В данном случае это будут:

1. Автопрефикс
2. Интерфейс командной строки CleanCSS
3. NodeSass
4. Интерфейс командной строки PostCSS

Чтобы установить их все, мы запустим следующую команду:

npm i -D autoprefixer clean-css-cli node-sass postcss-cli

Установите dev-зависимости с помощью npm — менеджера пакетов…

Очевидно, так как мы хотим скомпилировать и для продакшена, у нас также должна быть задача, которая будет очищать наш продакшн каталог… Мы можем использовать rimraf для этого.

Теперь давайте построим структуру нашего проекта…

• У нас будетsrc каталог для разработки
• В нашем src каталог, мы создадим файл с именем dummy.scssкоторый будет содержать наш код Sass с синтаксисом Scss
• У нас будетdist каталог для производства, который будет автоматически сгенерирован

Пришло время написать эти скриптовые задачи… Открыть package.json файл в вашем любимом редакторе кода, найдите "scripts" объект и удалить "test" свойство внутри него…

* Обратите внимание, вы можете называть команды скрипта как хотите. Это просто условность, которую я предпочитаю…

Пока мы внутри "scripts" объект в нашем package.json файл, теперь мы можем начать писать наши команды.

Очистите каталог «dist»

"clean": "rimraf dist",

Скомпилируйте Sass в CSS из «src» в «dist»

"compile": "node-sass --output-style=expanded --source-map=true src/dummy.scss dist/dummy.css",

Используйте Autoprefixer для обработки префиксов поставщиков браузера

"prefix": "postcss dist/dummy.css --use=autoprefixer --map=false --output=dist/dummy.css",

Нам понадобится одно дополнение для Автопрефикс в нашем файле «package.json», и это должно определить браузеры, которые нам нужны. Как сказано в этом посте, мы будем поддерживать «последние 2 версии» каждого браузера. Мы могли бы поместить следующее сразу после закрывающей скобки"scripts".

"browserslist": ["last 2 versions"],

Обработка минификации с помощью CleanCSS

"minify": "cleancss --level=1 --source-map --source-map-inline-sources --output dist/dummy.min.css dist/dummy.css",

Как вы понимаете, я оставил эту запятую в нашей последней команде скрипта. Если бы мы закончили, это привело бы к ошибке при запуске любого npm команда.

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

Обычная практика состоит в том, чтобы назвать эти два как dev а также build… Но, конечно, вы можете назвать их как хотите.

Команда для развития

"dev": "npm run compile -- --watch",

Вам может показаться странным видеть дополнительный -- в этой команде. Если бы мы использовали yarn это было бы не так, но в npm нам нужно написать их, если мы передаем некоторые аргументы в npm script что мы написали…

Команда для производства

"build": "npm run clean && npm run compile && npm run prefix && npm run minify"

И мы официально закончили!

Наш package.json файл теперь должен содержать контекст снизу, исключая шаблон, который мы создали с нашим начальным npm команда…

PS Не удаляйте этот шаблон…

Теперь мы можем использовать любой из этих npm скрипты, которые мы только что написали для нашего dummy-project и добиться того, что нам изначально требовалось. Напишите немного Sass в наш пустой файл, чтобы протестировать его…

1. npm run dev— Для начала разработки он будет следить за изменениями и соответственно перекомпилировать
2. npm run build— Чтобы подготовить его к производству. Так и будет clean в dist каталог, compile ваш Sass в CSS, запустите его autoprefixer чтобы добавить любые требуемые префиксы поставщиков и, наконец, запустить его minify для создания дополнительного минифицированного файла.

До скорого

Первоначально написано на моем Medium