Использование опции наблюдения node-sass с npm run-script

Итак, я запускаю задачи в сценариях пакета npm, но хочу передать параметр наблюдения в 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\""
}

Не работает без параллелизма и без стенографии.

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

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

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

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


node.js npm sass node-sass build-tools
person Ryan Metin    schedule 14.01.2016    source источник
comment
Пожалуйста, примите во внимание мой ответ (how-i-get-node-sass-watch-and-live-reload-to-work-from-a-single-npm-script) на Вот этот!   -  person Evgeny Bobkin    schedule 19.07.2017

Ответы (6)


arrow_upward
34
arrow_downward

Это моя установка для создания 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"
person Ryan White    schedule 14.01.2016
comment
Но разве нет способа избежать двойных кавычек, которые он передает? Как я уже сказал, это работает: node-sass src/style.scss dist/style.css -w Это не так: node-sass src/style.scss dist/style.css "-w" Тем не менее, спасибо за советы. Я пока воспользуюсь ими. - person Ryan Metin; 14.01.2016
comment
Вы можете избежать двойных кавычек, используя обратную косую черту. Например: \ -w \, таким образом двойные кавычки не делают JSON недействительным, но они появляются, когда вы запускаете команду в терминале. - person Ryan White; 14.01.2016
comment
Я понял. Я имел ввиду, что npm run scss -- -w не проходит node-sass src/style.css dist/style.scss "-w". - person Ryan Metin; 14.01.2016
comment
Подожди ... забудь. Я идиот. Не знаю, почему я думал, что изменения ничего не делают раньше. Спасибо за помощь. - person Ryan Metin; 15.01.2016

arrow_upward
33
arrow_downward

Основываясь на предыдущих ответах, еще один вариант - использовать настраиваемые аргументы сценария NPM, чтобы они оставались СУХИМИ не повторять аргументы сценария build в сценарии watch:

"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 работает следующим образом:

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

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

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

person jhildenbiddle    schedule 27.07.2016
comment
Чувак, это золото, спасибо. К вашему сведению, для других параметров node-sass: npmjs.com/package/node -sass # интерфейс командной строки - person Nicholas Petersen; 12.11.2018
comment
предупреждение Начиная с Yarn 1.0, скрипты не требуют - для перенаправления параметров. В будущей версии любые явные - будут перенаправляться в скрипты как есть. скрипт должен быть обновлен как "watch:sass": "npm run build:sass && npm run build:sass -w" - person Chukwuemeka Ihedoro; 18.06.2019

arrow_upward
1
arrow_downward

Кстати, вот моя сдача:

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

Изменить: изменение было асинхронным запуском скрипта для начальной компиляции, а затем с флагом наблюдения.

person Ryan Metin    schedule 15.01.2016
comment
Мне пришлось изменить вторую строку на это, чтобы наблюдатель работал (параллельная оболочка 2.0): "start": "parallelshell \"npm run scss\" \"npm run scss -- -w\"" - person Rocco; 20.01.2016
comment
Ха, у меня тоже 2.0. Что делать, если вы запускаете задачи синхронно, например: npm run scss & npm run scss -- -w. В любом случае работает с моей стороны .. - person Ryan Metin; 20.01.2016
comment
не для меня - наблюдатель фактически не оставался в режиме просмотра, поэтому я придерживался параллельной оболочки. Тем временем я создал предварительную задачу: "prewatch": "npm run scss" - person Rocco; 21.01.2016
comment
Не могли бы вы отредактировать и объяснить ответ? «Вот моя сдача» довольно расплывчато. Что такое параллельная оболочка? - person mikemaccana; 08.06.2018

arrow_upward
0
arrow_downward

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

node-sass src/ -wo dist
person Jujhar Singh    schedule 19.12.2017

arrow_upward
0
arrow_downward

Если вы хотите отслеживать и автоматически компилировать изменения при сохранении этих изменений в вашем .scss файле, вы можете использовать это решение:

"scripts": {
  "watch:sass": "node-sass -w path/to/your/scss --output-style compressed", 
  // example  :  node-sass -w public/styles/scss/bootstrap.scss public/styles/style.css --output-style compressed
}
person Mile Mijatović    schedule 11.02.2019

arrow_upward
0
arrow_downward

если вы используете vcode, я предпочитаю использовать расширение, наблюдающее за живым сервером sass, это очень полезный способ

person ALI ATTALAOUI    schedule 25.04.2020