npmスクリプトで 'watch'を使うにはどうすればいいですか？

Question

私は次のようなディレクトリ構造を持っている：

そして、私のpackage.jsonは、次のようになります

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

だから、まず、私は、例えば、個別にこれらのスクリプトのそれぞれを実行する必要がnpm run node-sassまたはnpm run html-minifierなど私は、理想的には、次の操作を行いますどのnpm serveを実行することであるたいと思う何を：

1. 実行HTML-minifier
2. 実行ノード-SASS
3. ラン、ラン画像分
4. 実行httpサーバ
5. 最後に、私のsrcフォルダ内のすべてを見て、 ファイルを変更してそれぞれのスクリプトを実行します。 node-sassなど。

この問題にはどのようにして対処できますか？

Answer 1

nodemonを使用してディレクトリを見ることができます。

• watch:node-sass、
• watch:html-minifier、および
• watch:imagemin：あなたのための

  一つの解決策は、3つの時計のスクリプト、各タスクのための1つを作成することです。また

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

  読む：

は、次に3を開始する中央スクリプトwatchを持ってHow to Use npm as a Build Tool。

Answer 2

このスクリプト化されたケースで最も広く採用されているツールは、ガルプまたはハラハラにすることです。彼らは非常に頻繁に遭遇するツールです。また、あなたの縮小/連結/コピー/イメージ用のgrunt/gulpライブラリやウォッチャーライブラリを見つけることができます。 Nodemon/forever/pm2はhttpサーバを再起動するための時計機能を持っています

Answer 3

助言onchange、this定型文を参照してください。必要

例えば、

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

または

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

ないうなり声やガルプ！