一起看 SASS/SCSS 和 nodemon

Question

我想同时运行 Nodemon 和 node-sass watcher。

我在 package.json 文件上尝试了以下脚本。

"build-css": "node-sass --include-path scss scss/main.scss public/css/main.css",
"watch-css": "nodemon -e scss -x \"npm run build-css & nodemon server.js\""

和 devDependencies 是：

"devDependencies": {
    "node-sass": "^4.9.0",
    "nodemon": "^1.17.5"
},

它确实有效，但我的问题是，如果我不在 watch-css 脚本中添加 & nodemon server.js，它就不会运行服务器和网络应用程序。

有什么好的解决办法吗？

谢谢。

Answer 1

package.js
-e 是扩展名列表
https://www.npmjs.com/package/nodemon

"scripts": {
  "start": "nodemon app.js -e js,scss,pug"
},

app.js
https://www.npmjs.com/package/node-sass

var result = sass.renderSync({
  file: scss_filename,
  [, options..]
});

Answer 2

好的，我现在得到了这么多，我将把它作为一个答案，但我认为这个问题是非常开放的！我认为无论如何您都必须根据要求进行更改。基本上，如果它有效，那么不要担心。

有多种解决方案，例如npm-run-all 或concurrently，但我认为"run-both": "npm run build-css & npm run watch-css" 之类的第三个脚本在大多数情况下都可以，如果您记住& 不是跨平台甚至不是跨shell （如 windows cmd vs powershell）。所以我想说，如果你在一个团队中工作，那么添加另一个开发依赖项可能会更容易。

但我会为pm2 鸣笛，我认为它在生产和开发中都非常有用。生态系统文件特别有用。我也认为 pm2 完全取代了 nodemon。并不是说 nodemon 不好，而是 pm2 非常适合多个进程。以下是我的一些 npm 脚本：

"winsrv": "pm2 flush & pm2 reload server/ecosystem-win.json & pm2 logs", 
"winprod": "webpack --config ./webpack.config.js & npm run winsrv",
"windev": "set NODE_ENV=development webpack --config webpack.dev.config.js"

最后，我要补充一点，npm 脚本中的 post/pre 挂钩非常有用。为三个脚本运行一个命令：

"preprod": "./preprod.sh", // Makes backup of old files, changes symlink to the backup
"prod": "webpack --config ./webpack.config.js && pm2 flush && pm2 reload server/ecosystem-production.json",
"postprod": "./postprod.sh", // check files exist and relinks public to the new build

---

抱歉耽搁了，我分心了，遇到了一些障碍。

我决定尝试 node-sass 编程 api，我不确定它有多聪明，但我学到了一两件事。

buildcss.js：

var sass = require("node-sass");
var fs = require("fs");
sass.render({file: "styles.scss"}, (err, results) => {
  if (err) { console.log(err); }
  fs.writeFile("styles.css", results.css, err => console.log);
  console.log('scss -> css complete!');
});

伪造的 server.js

console.log("server.js...");
setInterval(function() {
  console.log("interval that prevents our so called server from exiting" );
}, 1000 * 60 * 60);

ecosystem.json（在更改时重新启动 scss 脚本。嗯...）

{
  "apps": [
    {
      "name": "My Server",
      "script": "server.js",
      "watch" : ["server.js"]
    },
    {
      "name": "SCSS to CSS",
      "script": "buildcss.js",
      "watch": ["styles.scss"],
      "autorestart": false
    }
  ]
}

还有 package.json

...
"scripts": {
    "start": "pm2 logs && pm2 reload ecosystem.json && pm2 logs --out"
},

npm start

我想补充一点，我通常通过 webpack 处理我的 scss 编译，并不能真正说明这里使用的过程（但它似乎工作得很好！）。

Answer 3

非常感谢您的帮助。我听从了你的指示。我从中得到了这个概念，并按照对我有用的方式应用：

buildcss.js（根目录）：

const sass = require('node-sass');
const fs = require('fs');
const path = require('path');

var path_style = path.resolve(__dirname, "scss")
var path_dist = path.resolve(__dirname, "public")

sass.render({file: path.join(path_style, '/main.scss')}, function (err, results) {
    if(err){
        console.log(err);
    }
    fs.writeFile(path.join(path_dist, '/css/main.css'), results.css, function (err) {
        console.log(err);
    });
   console.log('scss --> css completed.');
});

ecosystem.json（根目录）：

{
  "apps" : [
    {
      "name": "My App",
      "script": "app.js",
      "watch": ["app.js"]
    },
    {
      "name": "SCSS to CSS",
      "script": "buildcss.js",
      "watch": ["./scss/main.scss"]
    }
  ]
}

还有 package.json：

  "scripts": {
    "start": "pm2 start ecosystem.json && pm2 logs --out"
  },

根据您在 package.json 上的代码"start": "pm2 logs && pm2 reload ecosystem.json && pm2 logs --out"，这对我不起作用。我遇到了以下错误：

[TAILING] Tailing last 15 lines for [all] processes (change the value with --lines option)
[PM2][ERROR] No file to stream for app [all], exiting.npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mysite@1.0.0 start: `pm2 logs && pm2 reload ecosystem.json && pm2 logs --out`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the mysite@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

来自日志文件：

12 info lifecycle mysite@1.0.0~start: Failed to exec start script