Как я могу получить чат-узел и живую перезагрузку для работы из одного сценария NPM?

Question

Принимая сценарии следующий раздел из package.json:

"scripts":{ 
    "sass:watch": "npm run sass -- -w ./src/public/stylesheets -r --source-map true", 
    "livereload": "live-reload --port 9091 ./src/**/*", 
    "dev:watch" : "npm run sass:watch; npm run livereload" 
} 

Как я могу успешно получить оба sass:watch и livereload задачи для запуска, не блокируя друг друга, от dev:watch задачи?

В настоящее время, когда я запускаю nam run dev:watchsass:watch блоки livereload. Если я их переупорядочу, возникает одна и та же проблема.

Answer 1

Использование parallelshell.

Here's how I'm doing it.

С живым сервером он будет выглядеть следующим образом:

"serve": "live-server", 
"start": "parallelshell \"npm run scss && npm run scss -- -w\" \"npm run serve\"" 

Answer 2

AFAIK, вы не можете, полезным способом.

Вы можете нажать одну задачу на задний план, добавив & в свою командную строку, но это заставило бы задачу работать, даже когда вы ^C, чтобы остановить выполнение задачи NPM.

В качестве альтернативы, вы можете позвонить npm run ... дважды Б.Г. один:

$ npm run sass:watch & 
$ npm run livereload 

Но это довольно грязный слишком IMO.

Если вы хотите этого, рассмотрите возможность использования gulp.

Answer 3

Посмотрите на Grunt Concurrent

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

Answer 4

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

"dev:watch" : "npm run sass:watch & npm run livereload"

&& бежит задачи в последовательном; & в параллель.

Answer 5

вы можете попробовать пакет одновременно для НПМ

НПМ установить одновременно --save-DEV

затем использовать его для запуска и вашего скрипта:

"dev:watch": "concurrently \" npm run sass:watch \" \" npm run livereload \" ", 

вы можете найти информацию о пакете здесь: https://www.npmjs.com/package/concurrently

Answer 6

Это то, что я использую для небольших проектов на основе НПМ сценарий: Я просто запустить npm start и начать работать;)

• concurrently запускает соответствующие задачи параллельно
• node-sass отвечает за sass-> CSS поколение
• он должен перезапустил задачу Sass с --watch вариантом для мониторинга sass связанных изменений
• и, наконец, lite-server запускает сервер с поддержкой встроенной поддержки. По умолчанию он отслеживает изменения для следующих расширений файлов: html,htm,css,js, но все можно легко настроить с помощью файлов конфигурации bs-config.json или bs-config.js.

Соответствующие части package.json:

... 
    "scripts": { 
    "start": "concurrently --names \"SASS,WATCH,SERVE\" -c \"bgBlue.bold,bgMagenta.bold,bgGreen.bold\" \"npm run sass\" \"npm run sass:watch\" \"npm run serve\"", 
    "serve": "lite-server", 
    "sass": "node-sass style.sass --output ./ --indent-width 4 --output-style expanded --indent-type space --source-map true", 
    "sass:watch": "npm run sass -- --watch" 
    }, 
    ... 
    "devDependencies": { 
    "lite-server": "^2.2.2", 
    "concurrently": "^3.5.0", 
    "node-sass": "^4.5.3" 
    } 

Это хорошо работает для меня на Windows 10 и так же, как и на GNU/Linux на основе дистрибутивы, как Ubuntu.