0

我正在尝试npm用作我的，但我注意到我不理解task manager的一些奇怪的东西。Stylus CLI

要Stylus CLI在文件上运行，我有两个选择。
$ stylus styles/file.styl // basic
$ stylus < styles/file.styl // using stdin

在 file.styl 中，我使用@require通配符来包含其他一些文件夹，以获取文件夹内的所有文件。

@charset "UTF-8";

@require 'base/*';
@require 'modules/*';
@require 'theme/*';

所以，当我运行$ stylus styles/file.styl它时，它都运行正常，但如果我运行，$ stylus < styles/file.styl我会得到一个错误。

@require我可以通过更改我的样式文件中的调用来使其工作，如下所示：

@charset "UTF-8";

@require 'styles/base/*';
@require 'styles/modules/*';
@require 'styles/theme/*';

但我不知道为什么会这样以及如何修复它，以便我可以通过命令行运行它。

目标是让它在 CLI 中正常工作，以便我可以在我的应用程序中使用它package.json并将其通过管道传输到其他任务中，例如autoprefixerand combine-mqor css-pleeease。我正在尝试复制gulpfile.js我在同一个项目中使用的一个，希望这能让我了解整个过程。

谢谢

更新：我还应该包括package.json作为参考，看看我在哪里结束了。这也设置了我要发布的答案。

{
  "name": "npm_BUILD",
  "version": "1.0.0",
  "description": "npm as a task manager",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "styles":"npm run styles:max && npm run styles:min",
    "styles:max": "stylus < styles/site.styl | autoprefixer -b 'last 2 versions' > styles/final.css",
    "styles:min": "cssmin < styles/final.css > styles/final.min.css"
  },
  "author": "Jason Lydon @bushwa",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^5.1.1",
    "clean-css": "^3.2.2",
    "combine-mq": "^0.8.1",
    "concat": "^1.0.0",
    "cssmin": "^0.4.3",
    "filesize": "^3.1.2",
    "stylus": "^0.50.0"
  }
}

然后我运行$ npm run styles它创建了两个 css 文件，第二个被缩小了。

4

2 回答 2

1

这与 stylus 是否知道顶级输入文件的文件系统路径有关。当您传递它时，它的路径会将调用styles/file.styl解释为相对于该文件，一切都很好。当您通过管道传输到 stdin 时，stylus 只知道您在 shell 中的当前工作目录，因此它会解释相对于该目录的相对路径，在您的情况下是. 如果您要这样做，那么它可能会双向工作。requirestyles/file.stylstylescd styles

我的建议是使用相对于顶级 .styl 文件的路径，因为这非常合理，只需确保cd在运行 .styl 之前进入该目录即可stylus。

于 2015-04-22T16:36:59.520 回答
0

我不确定这是否是最好的答案，但这对我有用......

因此，根据 Peter Lyon 的回答，我更新了我的命令，package.json首先跳转到样式目录，然后运行！

stylus < styles/site.styl | autoprefixer -b 'last 2 versions' > styles/final.css
变成了
cd styles && stylus < site.styl | autoprefixer -b 'last 2 versions' > final.css

{
  "name": "npm_BUILD",
  "version": "1.0.0",
  "description": "npm as a task manager",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "styles":"npm run styles:max && npm run styles:min",
    "styles:max": "cd styles && stylus < site.styl | autoprefixer -b 'last 2 versions' > final.css",
    "styles:min": "cssmin < styles/final.css > styles/final.min.css"
  },
  "author": "Jason Lydon @bushwa",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^5.1.1",
    "clean-css": "^3.2.2",
    "combine-mq": "^0.8.1",
    "concat": "^1.0.0",
    "cssmin": "^0.4.3",
    "filesize": "^3.1.2",
    "stylus": "^0.50.0"
  }
}

我不会撒谎，这让我很开心。

于 2015-04-22T18:43:34.260 回答