Пишите простые задачи для разработки — сила скриптов 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

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *