web-dev-qa-db-fra.com

Utilisation de l'option de surveillance node-sass avec npm run-script

J'exécute donc des tâches dans les scripts de package npm mais je souhaite passer l'option de surveillance dans npm start.

Cela marche:

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

Cela ne compile pas, ne regarde pas et ne jette aucune erreur:

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

Ne fonctionne pas sans parallelshell ou sans raccourci.

Je suppose que le problème vient du run-script qui passe l'argument supplémentaire entre guillemets. La commande est donc la suivante:

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

J'aimerais que cela fonctionne sans ajouter de dépendances. Qu'est-ce que je rate?

Au fait, je suis sous Windows 10 avec la commande Invite/git bash.

node.jssassnpmbuild-toolsnode-sass
16
Ryan Metin

Ceci est ma configuration pour la construction 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"
}

L'option -o définit le répertoire pour la sortie du fichier css . J'ai une version "css" qui ne regarde pas, car la version "css: watch" ~ n'est pas construite dès qu'elle est exécutée ~, elle ne fonctionne que changer, alors j'appelle 

npm run css

avant d'appeler 

node-sass src/style.scss -wo dist

Si vous voulez seulement qu’il s’exécute à la modification, et non lors de la première exécution, utilisez simplement

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

Sur la base des réponses précédentes, une autre option consiste à exploiter les arguments de script custom de NPM pour rester DRY en ne répétant pas les arguments de script build dans le 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"
}

Dans l'exemple ci-dessus, le script watch:sass fonctionne comme suit:

  1. Exécutez le script build:sass. Cela va compiler votre CSS.
  2. Exécutez à nouveau le script build:sass, mais cette fois-ci inclut l'indicateur -w. Cela compilera votre CSS lorsque l’un de vos fichiers SASS sera modifié.

Notez l'option -- utilisée à la fin du script watch:sass. Ceci est utilisé pour passer des arguments personnalisés lors de l'exécution d'un script. De la docs :

A partir de [email protected], vous pouvez utiliser des arguments personnalisés lors de l'exécution de scripts. L'option spéciale - est utilisée par getopt pour délimiter la fin des options. npm passera tous les arguments après le - directement à votre script.

21
jhildenbiddle

Btw, voici mon changement:

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

Edit: Change as asynchronous script s’exécute, pour la compilation initiale, puis avec l’indicateur de suivi.

1
Ryan Metin

Si vous voulez regarder et compiler les modifications automatiquement lorsque vous enregistrez ces modifications dans votre fichier .scss, vous pouvez utiliser cette solution:

"scripts": {
  "watch:sass": "node-sass -w path/to/your/scss/file path/where/you/want/to/recompile/your/scss/to/css --output-style compressed", 
 // for example node-sass -w public/styles/scss/bootstrap.scss public/styles/style.css --output-style compressed
}
0
Mile Mijatovic

Le plus simple à mon avis, pour un projet rapide plus petit, consiste simplement à ouvrir une nouvelle fenêtre bash et à le coller:

node-sass src/ -wo dist
0
Jujhar Singh