Utilizzo dell'opzione node-sass watch con npm run-script

Question

Quindi sto eseguendo attività in script di pacchetto npm ma voglio passare l'opzione di controllo in npm start.

Questo funziona:

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

Questo non si compila, orologio, o gettare qualsiasi errore:

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

non funziona senza parallelshell sia o senza stenografia.

Suppongo che il problema è il run-script sta passando l'argomento extra tra virgolette, quindi il comando viene fuori come:

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

mi piacerebbe far funzionare tutto questo senza l'aggiunta di dipendenze. Cosa mi manca?

Btw, sono in Windows 10 con prompt dei comandi/git bash.

Answer 1

Questa è la mia messa a punto per la costruzione di 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" 
} 

La bandiera -o imposta la directory di output per il css. Ho un non-watching versione "css" perché la versione a guardare "css: guardare" ~ non costruisce, non appena è gestito ~, funziona solo sul cambiamento, così mi chiamano

npm run css 

prima di chiamare

node-sass src/style.scss -wo dist 

Se si desidera solo che venga eseguito il cambiamento, e non quando prima esecuzione, basta usare

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

Answer 2

Btw, ecco il mio cambiamento:

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

ora per ottenere che a tubo attraverso i miei compiti postcss ...

Answer 3

Sulla base delle risposte precedenti, un'altra opzione è quella di sfruttare di NPM custom script arguments di rimanere DRY da non ripetere le build argomenti dello script nello script 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" 
} 

nell'esempio di cui sopra, lo script watch:sass funziona come segue:

1. Eseguire lo script build:sass. Questo compilerà il tuo CSS.
2. Eseguire nuovamente lo script build:sass, ma questa volta include il flag -w. Questo compilerà il tuo CSS quando uno dei tuoi file SASS cambia.

Avviso l'opzione -- utilizzata alla fine dello script watch:sass. Questo è usato per passare argomenti personalizzati durante l'esecuzione di uno script.Dal docs:

As of npm@2.0.0, 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.

Answer 4

più semplice, a mio parere, per un progetto rapido più piccolo, è solo aprire una nuova finestra bash e incolla:

node-sass src/ -wo dist