在npm run-script中使用node-sass watch選項

因此，我在npm包腳本中運行任務，但我想通過npm start中的watch選項。在npm run-script中使用node-sass watch選項

這工作：

"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"

我想這是不添加任何依賴關係的工作。我錯過了什麼？

順便說一句，我在Windows 10的命令提示符/ git bash。

來源

2016-01-14 Ryan Metin

請考慮我的答案（[何燦I-得到節點 - 薩斯手錶和活重載到工作從一個單NPM-腳本]（https://stackoverflow.com/questions/34350417/how-can-i-get-node -sass-watch-live-reload-to-work-from-a-single-npm-script/45183762＃45183762））！ –

這是我設置的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：看」〜不只要它的運行〜建立，它只能運行在變化，所以我打電話之前調用

npm run css

node-sass src/style.scss -wo dist

如果你只希望它在改變運行，而不是在第一次運行時，只需使用

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

來源

2016-01-14 18:45:13

是否沒有辦法逃避它通過的雙引號？就像我說的，這個工程：'node-sass src/style.scss dist/style.css -w' 這不是：'node-sass src/style.scss dist/style.css「-w 「' 儘管感謝您的提示。我現在就用它們。 –

您可以使用反斜槓來避免雙引號。就像：\「 - w \」，這樣雙引號不會使JSON無效，但是當您在終端 –

中運行命令時，它會顯示出來。我的意思是'npm run scss - -w'不能通過'node-sass src/style.css dist/style.scss「-w」'。 –

順便說一句，這是我的變化：

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

我們得到那個管通過我postcss任務...

來源

2016-01-15 17:51:28

我必須將第二行更改爲此功能才能使觀察者工作（parallelshell 2.0）： '「start」：「parallelshell \」npm run scss \「\」npm run scss - - -w \「」' – Rocco

呃，我也有2.0。如果你同步運行任務，如：'npm run scss＆npm run scss - -w'。以我的方式工作無論如何.. –

不適合我 - 觀察者實際上並沒有保持在「觀看」模式，所以我堅持parallelshell文檔。同時我創建了一個「prewatch」任務：''prewatch「：」npm run scss「 – Rocco

建立在以前的答案，另一種選擇是利用故宮的custom script arguments通過不重複在watch腳本build腳本參數保持乾燥：

"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腳本的工作原理如下：

運行build:sass腳本。這將編譯你的CSS。
再次運行build:sass腳本，但這次包括-w標誌。當你的一個SASS文件發生變化時，這將編譯你的CSS。

注意在watch:sass腳本末尾使用的--選項。這用於在執行腳本時傳遞自定義參數。從docs：

As of [email protected], you can use custom arguments when executing scripts. The special option -- is used by getopt to delimit the end of the options. npm will pass all the arguments after the -- directly to your script.

來源

2016-07-27 01:13:15 jhildenbiddle

https://media.giphy.com/media/1Z02vuppxP1Pa/giphy.gif – Pawel

最簡單的在我看來，對於一個小項目快速，僅僅是打開一個新的bash窗口，並貼：

node-sass src/ -wo dist

來源

2017-12-19 00:17:30

在npm run-script中使用node-sass watch選項

回答

相關問題