在我的 package.json 中，每当我对文件进行更改时，我需要在依赖项中安装什么来自动构建我的项目。还有要运行的命令

Question

在我的package.json 中，每当我对文件进行更改时，我需要在 dependencies 中安装什么来 autobuild 我的项目。还有运行命令

{
    "name": "direct2lab",
    "version": "1.0.0",
    "description": "direct2lab",
    "main": "index.js",
    "scripts": {
        "localhost": "NODE_ENV=localhost && webpack-dev-server --optimize-minimize --config webpack.config.babel.js --watch --progress --profile --colors --open",
        "stag": "NODE_ENV=stag webpack --config webpack.production.config.babel.js --progress --profile --colors",
        "lintCSS": "sass-lint 'src/sass/**/.s+(a|c)ss' -v -q",
        "lintJS": "eslint --fix ./src",
        "start": "npm run stag && node server.js",
        "test": "npm run test:unit && npm run test:integration",
        "test:integration": "mocha ./test/configureTest --compilers js:babel-core/register --recursive $(find test/integration/ -name '.spec.js')",
        "test:integration:watch": "npm run test:integration -- --watch",
        "test:unit:watch": "npm run test:unit -- --watch",
        "test:unit": "mocha ./test/configureTest --compilers js:babel-core/register --recursive $(find test/unit/ -name '*.spec.js')"
    },
    "repository": {
        "type": "git",
        "url": "xx"
    },
    "keywords": [
        "xx"
    ],
    "author": "xx",
    "license": "xx",
    "bugs": {
        "url": "xxx"
    },
    "homepage": "xxx",
    "dependencies": {
        "lodash": "^4.17.11",
        "moment": "^2.24.0",
        "react": "^16.4.1",
        "react-datepicker": "^2.1.0",
        "react-dom": "^16.4.1",
        "react-dropzone": "^8.1.0",
        "react-notifications": "^1.4.3",
        "react-redux": "^5.0.7",
        "react-responsive-modal": "^3.5.1",
        "react-router": "^4.3.1",
        "react-router-dom": "^4.3.1",
        "react-router-redux": "^4.0.8",
        "react-slick": "^0.23.2",
        "redux": "^4.0.0",
        "redux-form": "^7.4.2",
        "redux-thunk": "^2.3.0",
        "slick-carousel": "^1.8.1",
        "url-loader": "^1.1.2",
        "validator": "^10.11.0"
    },
    "devDependencies": {
        "axios": "^0.18.0",
        "babel-core": "^6.26.3",
        "babel-eslint": "^8.2.3",
        "babel-loader": "^7.1.4",
        "babel-plugin-lodash": "^3.3.4",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-plugin-transform-runtime": "^6.23.0",
        "babel-polyfill": "^6.26.0",
        "babel-preset-env": "^1.7.0",
        "babel-preset-react": "^6.24.1",
        "babel-preset-stage-3": "^6.24.1",
        "babel-register": "^6.26.0",
        "chai": "^4.1.2",
        "chai-enzyme": "^1.0.0-beta.1",
        "classnames": "^2.2.6",
        "clean-webpack-plugin": "^0.1.19",
        "compression-webpack-plugin": "^1.1.11",
        "css-loader": "^0.28.11",
        "cssnano": "^3.10.0",
        "enzyme": "^3.3.0",
        "eslint": "^4.19.1",
        "eslint-loader": "^2.0.0",
        "eslint-plugin-babel": "^5.1.0",
        "eslint-plugin-jsx-control-statements": "^2.2.1",
        "eslint-plugin-react": "^7.11.1",
        "extract-text-webpack-plugin": "^3.0.2",
        "font-awesome": "^4.7.0",
        "html-loader": "^0.5.5",
        "html-webpack-plugin": "^3.2.0",
        "husky": "^0.14.3",
        "ignore-styles": "^5.0.1",
        "jsdom": "^11.11.0",
        "jsx-control-statements": "^3.2.8",
        "mini-css-extract-plugin": "^0.4.0",
        "mocha": "^5.2.0",
        "node-sass": "^4.9.4",
        "optimize-css-assets-webpack-plugin": "^4.0.2",
        "path": "^0.12.7",
        "react-intl": "^2.4.0",
        "redux-logger": "^3.0.6",
        "redux-mock-store": "^1.5.3",
        "sass-lint": "^1.12.1",
        "sass-loader": "^7.0.3",
        "style-loader": "^0.21.0",
        "stylelint": "^9.3.0",
        "uglifyjs-webpack-plugin": "^1.2.5",
        "url-loader": "^1.1.2",
        "webpack": "^4.12.0",
        "webpack-cli": "^3.0.8",
        "webpack-dev-server": "^3.1.4"
    }
}

Answer 1

我描述的方法适用于任何类型的自动文件和文件夹监视，而不仅仅是这种特定情况。

我有这个脚本在运行，我使用 yarn build:css 运行它：请看下面：

"scripts": {
  "build:css": "postcss src/tailwind.css -o static/dist/tailwind.css",
}

并且我想在 layouts 文件夹发生变化时重新运行它，该文件夹包含构建我网站的所有 HTML 文件。

安装 watch npm 包：

npm install watch

并将监视脚本添加到您的 package.json 文件中。您之前已经有了 build:css，我们只需添加一个脚本来监视 layouts 文件夹并在每次更改时运行 build:css：

"scripts": {
  "build:css": "postcss src/tailwind.css -o static/dist/tailwind.css",
  "watch": "watch 'npm run build:css' ./layouts"
}

现在运行 npm run watch 或 yarn watch。

希望对你有帮助。