ファイルリスニングの役割は、自動化を実現し、両手と精力を解放し、効率を高め、開発者が開発に関心を持つようにすることです.npm scriptファイルのリスニングはgrunt、gulp機能と似ています.
自動リフレッシュとは、ファイルを変更して保存した後、ページを自動的にリフレッシュし、日常開発の操作を減らすことを意味します.
コードチェックのリスニングと自動化
コードチェックツールstylelint、eslint、jsonlintはwatchのサポートが弱いので、キットを導入する必要があります onchange
コマンド依存パッケージのインストール

npm i onchange -D
//  
yarn add onchange -D

コマンドの作成

"scripts": {
  "//watch": "#   ", 
  "test": "#      
 cross-env NODE_ENV=test mocha tests/",
  "watch:test": "npm test -- --watch",
  "watch:lint": "onchange -i \"**/*.js\" \"**/*.less\" -- npm run lint:css",
  "watch": "npm-run-all --parallel watch:*",
}

プロファイリングコマンド

使用 \「プラットフォーム間での互換性を実現するため、

が使用しました **/* 一致ワイルドカード;

パラメータ -iは譲 onchangeは起動時に1回実行されます -- その後のコマンド;

コマンドの実行npm run watch
自動リフレッシュの実現
この章では主にlivereloadについて述べます.
コマンド依存パッケージのインストール

npm i livereload -D
//  
yarn add livereload -D

コマンドの作成

"scripts": {
  "//livereload": "#     ",
  "client": "npm-run-all --parallel client:*",
  "client:reload-server": "livereload src/",
  "client:static-server": "http-server src/"
}

ページ接続jsスクリプトの追加

// src/index.html



  
  
  
  
  


  
  ，npm script
  
  
  var ctx = '<script src="http://' + (location.host || 'localhost').split(':')[0] +
    ':35729/livereload.js?snipver=1"></' + 'script>';
  document.write(ctx)
  



/* src/index.css */
body {
  color: #fff;
  background-color: green;
}

まとめ
以上、編集者が紹介したnpm scriptのファイルリスニングと自動リフレッシュのコマンドの詳細を説明しました.