Как создать несколько выходных файлов с помощью скриптов npm?

Я пробую сценарии npm вместо gulp. И я столкнулся с проблемой, могу ли я иметь один сценарий npm, например, для компиляции файлов scss с помощью node-sass для разработки и для prod, или у меня есть несколько сценариев для этих целей:

вот мой package.json:

...

"scripts": {
    "scss": "node-sass app/src/styles/main.scss --output app/.tmp/styles/",
    "autoprefixer": "postcss -u autoprefixer -r app/.tpm/styles/*",
    "scss:prod": "node-sass app/src/styles/main.scss --output app/dist/styles/",
    "autoprefixer:prod": "postcss -u autoprefixer -r app/dist/styles/*",
    "cssnano": "postcss -u cssnano -r app/dist/styles/main.css",
    "build:styles": "npm run scss:prod && npm run autoprefixer:prod && npm run cssnano"
},

Можно ли разделить мою задачу scss на один скрипт с несколькими выходами для папок dev и prod?


npm npm-scripts
person lalexa    schedule 27.02.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

короткий ответ: для этой цели лучше всего использовать несколько скриптов

Например:

...
"scss:dev": "node-sass app/src/styles/main.scss --output app/dev/styles/"
"scss:prod": "node-sass app/src/styles/main.scss --output app/dist/styles/"
...

(Обратите внимание, что единственная разница заключается в пути вывода / назначения)

Затем подумайте о том, чтобы сгруппировать все задачи, связанные со стилями, как dev или prod. Например:

...
"build-styles:prod": "npm run scss:prod && ..."
"build-styles:dev": "npm run scss:dev && ..."
...

Вы также можете стремиться иметь один сценарий для dev и один для build, который выполняет все задачи, то есть те, которые в дополнение к простой обработке задач, связанных со стилями. Например:

...
"dev": "build-styles:dev && ..." 
"build": "build-styles:prod && ..."
...

Затем вы можете просто запустить $ npm run dev или $ npm run build через свой интерфейс командной строки по мере необходимости, и все задачи будут выполнены.

Примечание: вы обнаружите, что иногда имя сценария не нужно отличать суффиксом :prod или :dev, поскольку один сценарий может служить либо цель (как dev, так и build). Однако обычно, когда пути вывода / назначения различаются, при необходимости рассмотрите возможность использования префикса :dev или :prod.

Почему?

Да, по общему признанию, это довольно многословно и не особенно DRY, но людям его легче читать и поддерживать. IMO "легче читать" и лучше обслуживается каждый раз.

Кроме того, вы можете обнаружить, что иногда не только путь вывода / назначения различается между требованиями для dev и build. Например, для dev целей вы можете захотеть, чтобы ваша задача с именем "scss:dev" также включала sourceMaps вариант для упрощения отладки, но вы не хотите, чтобы исходные карты включались в окончательный код сборки / дистрибутива.

Но мне нужен один сценарий, иначе мир перестанет крутиться :)

Можно ли разделить мою задачу scss на один скрипт с несколькими выходами для папок dev и prod?

Да, возможен один сценарий. Учитывая сценарий с именем "scss" в вашем OP, вы можете использовать цепочку (&&) следующим образом:

...
"scss": "node-sass app/src/styles/main.scss --output app/.tmp/styles/ && node-sass app/src/styles/main.scss --output app/dist/styles/"
...

Или с дополнительной зависимостью проекта:

...
"scss": "node-sass app/src/styles/main.scss --output app/.tmp/styles/ && catw app/.tmp/styles/main.css > app/dist/styles/main.css"
...

Это компилирует main.scss, который выводит начальное main.css. Затем мы cat main.css и выводим дубликат в папку dist. (Примечание: здесь используется catw вместо cat, потому что cat не работает на разных платформах)

person RobC    schedule 27.02.2017