web-dev-qa-db-ja.com

npm run-scriptでnode-sass監視オプションを使用する

したがって、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\""
}

Parallelshellがなければ、または速記がなければ機能しません。

問題は、実行スクリプトが引用符で余分な引数を渡すことであるため、コマンドは次のようになります。

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

依存関係を追加せずにこれを機能させたいです。私は何が欠けていますか？

ところで、私はコマンドプロンプト/ git bashでWindows 10にいます。

node.jssassnpmbuild-toolsnode-sass
21
Ryan Metin

これは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：watch」は実行直後にビルドされないため、非監視バージョン「css」があります。変更時にのみ実行されるため、

npm run css

電話する前に

node-sass src/style.scss -wo dist

最初に実行するときではなく、変更時にのみ実行する場合は、単に使用します

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

前の回答に基づいて、NPMの カスタムスクリプト引数 を利用してDRY 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フラグを含めます。これにより、SASSファイルの1つが変更されたときにCSSがコンパイルされます。

--スクリプトの最後で使用されるwatch:sassオプションに注意してください。これは、スクリプトの実行時にカスタム引数を渡すために使用されます。 docs から：

[email protected]の時点で、スクリプトの実行時にカスタム引数を使用できます。特別なオプション-は、オプションの終わりを区切るためにgetoptによって使用されます。 npmは、-の後にすべての引数を直接スクリプトに渡します。

25
jhildenbiddle

ところで、ここに私の変更があります：

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

編集：変更は、最初のコンパイルと監視フラグを使用した非同期スクリプトの実行でした。

1
Ryan Metin

.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
}
0
Mile Mijatovic

私の意見では最も簡単で、小規模なプロジェクトの場合、新しいbashウィンドウを開いて貼り付けるだけです。

node-sass src/ -wo dist
0
Jujhar Singh