Comment puis-je utiliser "regarder" dans mon mnp scripts?

J'ai la structure de répertoire suivante:

Comment puis-je utiliser

Et mon package.json ressemble à ceci:

{
  "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 courir chacun de ces scripts, individuellement, par exemple npm run node-sass ou npm run html-minifier etc. Ce que j'avais idéalement voulez est d'exécuter npm serve qui va faire ce qui suit:

  1. exécuter html-minifier
  2. exécuter nœud-sass
  3. run run image-min
  4. run http-server
  5. Enfin, de tout regarder dans mon src dossier et exécuter
    respectifs les scripts de modification des fichiers par exemple node-sass etc..

Comment puis-je mieux de s'attaquer à ce problème?

Avez-vous considéré l'utilisation de gulp pour cette tâche?

OriginalL'auteur Tiwaz89 | 2016-03-27

  1. 20

    Vous pouvez regarder vos répertoires à l'aide de nodemon.

    Une solution pour vous est de créer trois regarder les scripts, une pour chaque tâche:

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

    Un thème central de script watch de départ 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"
  }
}

    Lire aussi: Comment Utiliser npm comme un Outil de construction.

    OriginalL'auteur Mehdi

  2. 14

    Je conseille onchange, voir cette standard.

    Par exemple,

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

    ou

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

    Pas Grunt ou Gulp nécessaire!

    Très bon outil! Lien Direct: github.com/Qard/onchange
    Utiliser ", pas " au moins dans Windows: "regardez:html": "onchange \"src/*.html\", \"src/templates/headTemplate.html\" -- mnp exécuter htmlTempl". Il ne fonctionne pas avec des guillemets simples.
    Rappelez-vous de ne installer onchange: npm install onchange

    OriginalL'auteur revelt

  3. -1

    Le plus largement adopté les outils pour ce script cas est d'aller avec gulp ou grognement. Ils sont des outils que vous rencontrerez très souvent. Vous pouvez également trouver leur grunt/gulp libs pour votre minify/concat/copier/imagemin, ainsi que de l'observateur de libs de sorte qu'ils changent à mesure que vous apportez des modifications au code. Nodemon/jamais/pm2 ont montre des presses de redémarrer votre serveur http, ainsi

    Merci @Handonam , Mais juste pour clarifier, il EST possible de faire ce que je veux faire sans l'aide de grunt ou gulp droit? Il estime que ces outils sont juste inutiles milieu des hommes et voudrais juste être exagéré pour une simple construction.

    OriginalL'auteur Handonam