Использование опции node -sass watch с запуском npm script

Итак, я запускаю задачи в сценариях пакетов npm, но хочу передать опцию watch в npm start.

Это работает:

"scripts": {
  "scss": "node-sass src/style.scss dist/style.css -w"
}

Это не компилирует, не отслеживает и не вызывает никаких ошибок:

"scripts": {
  "scss": "node-sass src/style.scss dist/style.css",
  "start": "parallelshell \"npm run scss -- -w\""
}

Не работает без parallelshell или без сокращения.

Я предполагаю, что проблема заключается в том, что run- script передает дополнительный аргумент в кавычки, поэтому команда выводится следующим образом:

node-sass src/style.scss dist/style.css "-w"

Я бы хотел, чтобы это работало без добавления каких-либо зависимостей. Что мне не хватает?

Btw, я в Windows 10 с командной строкой / git bash.

Ответ 1

Это моя настройка для построения css

"scripts": {
  "css": "node-sass src/style.scss -o dist",
  "css:watch": "npm run css && node-sass src/style.scss -wo dist"
},
"devDependencies": {
  "node-sass": "^3.4.2"
}

Флаг -o устанавливает каталог для вывода css. У меня есть не наблюдающая версия "css", потому что смотрящая версия "css: watch" ~ не строит, как только она запускается ~, она работает только при изменении, поэтому я вызываю

npm run css

перед вызовом

node-sass src/style.scss -wo dist

Если вы хотите, чтобы он запускался при изменении, а не при первом запуске, просто используйте

"css:watch": "node-sass src/style.scss -wo dist"

Ответ 2

Основываясь на предыдущих ответах, другой вариант заключается в том, чтобы использовать NPM пользовательские аргументы script, чтобы оставаться СУХОЙ, не повторяя build script аргументов в watch script:

"scripts": {
  "build:sass": "node-sass -r --output-style compressed src/style.scss -o dist",
  "watch:sass": "npm run build:sass && npm run build:sass -- -w"
}

В приведенном выше примере watch:sass script работает следующим образом:

Запустите build:sass script. Это скомпилирует ваш CSS.
Запустите build:sass script, но на этот раз включите флаг -w. Это скомпилирует ваш CSS при изменении одного из файлов SASS.

Обратите внимание на параметр --, используемый в конце watch:sass script. Это используется для передачи пользовательских аргументов при выполнении script. Из docs:

Начиная с [email protected], вы можете использовать собственные аргументы при выполнении скриптов. Специальный параметр - используется getopt для разграничения конца опций. npm передаст все аргументы после - непосредственно на ваш script.

Ответ 3

Btw, здесь мое изменение:

"scss": "node-sass src/style.scss dist/style.css",
"start": "parallelshell \"npm run scss && npm run scss -- -w\"

Теперь, чтобы получить это для выполнения моих задач postcss...

Ответ 4

Простейший, на мой взгляд, для небольшого быстрого проекта просто открывает новое окно bash и вставляет:

node-sass src/ -wo dist