web-dev-qa-db-fra.com

Comment puis-je utiliser «watch» dans mes scripts npm?

J'ai la structure de répertoire suivante:

enter image description here

Et mon package.json ressemble à ça:

{
  "name": "personal_site",
  "version": "1.0.0",
  "description": "My personal website.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "node-sass": "node-sass --output-style compressed --include-path node_modules/bourbon/app/assets/stylesheets/ --include-path node_modules/bourbon-neat/app/assets/stylesheets/ 'src/scss/styles.scss' 'dist/css/bundle.min.css'",
    "html-minifier": "html-minifier --collapse-whitespace --remove-comments --remove-attribute-quotes -o 'dist/index.html' 'src/index.html'",
    "imagemin": "imagemin src/images dist/images",
    "serve": "http-server ./dist"
  },
  "author": "Dean Gibson",
  "license": "ISC",
  "dependencies": {
    "bourbon": "^4.2.6",
    "bourbon-neat": "^1.7.4",
    "normalize-scss": "^4.0.3"
  },
  "devDependencies": {
    "html-minifier": "^1.3.0",
    "http-server": "^0.9.0",
    "node-sass": "^3.4.2"
  }
}

Donc, tout d'abord, je dois exécuter chacun de ces scripts individuellement, par exemple npm run node-sass ou npm run html-minifier etc. Ce que je souhaiterais idéalement, c'est d'exécuter npm serve qui fera ce qui suit:

  1. exécuter html-minifier
  2. exécuter node-sass
  3. exécuter exécuter image-min
  4. exécuter le serveur http
  5. Enfin, regardez tout dans mon dossier src et exécutez les scripts respectifs à mesure que les fichiers changent, par exemple node-sass etc..

Comment puis-je résoudre au mieux ce problème?

javascriptnode.jsnpm
16
user818700

Vous pouvez regarder vos répertoires en utilisant nodemon .

Une solution pour vous consiste à créer trois scripts de surveillance, un pour chaque tâche:

  • watch:node-sass,
  • watch:html-minifier, et
  • watch:imagemin.

Ensuite, ayez un script central watch commençant les trois:

{
  "name": "personal_site",
  "version": "1.0.0",
  "description": "My personal website.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "node-sass": "node-sass --output-style compressed --include-path node_modules/bourbon/app/assets/stylesheets/ --include-path node_modules/bourbon-neat/app/assets/stylesheets/ 'src/scss/styles.scss' 'dist/css/bundle.min.css'",
    "html-minifier": "html-minifier --collapse-whitespace --remove-comments --remove-attribute-quotes -o 'dist/index.html' 'src/index.html'",
    "imagemin": "imagemin src/images dist/images",
    "serve": "http-server ./dist",
    "watch:node-sass": "nodemon -e scss -x \"npm run node-sass\"",
    "watch:html-minifier": "nodemon -e html -x \"npm run html-minifier\"",
    "watch:imagemin": "nodemon --watch src/images -x \"npm run imagemin\"",
    "watch": "npm run watch:node-sass & npm run watch:html-minifier & npm run watch:imagemin"
  },
  "author": "Dean Gibson",
  "license": "ISC",
  "dependencies": {
    "bourbon": "^4.2.6",
    "bourbon-neat": "^1.7.4",
    "normalize-scss": "^4.0.3"
  },
  "devDependencies": {
    "html-minifier": "^1.3.0",
    "http-server": "^0.9.0",
    "node-sass": "^3.4.2"
  }
}

Lisez aussi: Comment utiliser npm comme outil de construction .

23
Mehdi

Je conseille onchange, voir this passe-partout.

Par exemple,

"watch:css": "onchange 'src/scss/*.scss' -- npm run build:css",

ou

"watch:js": "onchange 'src/js/*.js' -- npm run build:js",

Pas besoin de Grunt ou Gulp!

17
revelt

Les outils les plus largement adoptés pour ce cas scripté sont d'aller avec gulp ou grognement. Ce sont des outils que vous rencontrerez très souvent. Vous pouvez également trouver leurs bibliothèques grunt/gulp pour vos minify/concat/copy/imagemin, ainsi que les bibliothèques watcher afin qu'elles changent lorsque vous apportez des modifications au code. Nodemon/forever/pm2 a également la capacité de regarder pour redémarrer votre serveur http

0
Handonam