Question

上下文

我是Grunt的新手，我正在尝试通过修改meanjs样板来支持stylus来学习一点，我希望将预编译的css资产组织在模块化存储桶中，如当前的meanjs默认值。

问题

我有以下文件结构：

- app
- config
- public
 - modules
  - foo
   - assets
    - stylesheets
    ...
   - css
   ...
...

如何使用Grunt在public/modules/*/assets/stylesheets目录中获取Stylus .styl文件，并将它们编译到public/modules/*/css目录？

天真的尝试：

下面是一个示例尝试，但没有走得太远。

stylus: {
  compile: {
    files: [{
      dest: '../../css',
      src: 'public/modules/*/assets/stylesheets/*.styl',
      ext: '.css',
      expand: true
    }]
  }
}

这导致：File ../../css/public/modules/foo/assets/stylesheets/baz.css created.

如果我将“dest”留空，它会正确编译，但输出位于assets / stylesheets文件夹中（如预期的那样）。我确信有一种干净的方法可以做到这一点，但我还不知道。

Answer 1

设置src，dest，cwd以及使用grunt的隐藏重命名选项应该以所需的格式获取stylus文件。

示例：

stylus: {
  compile: {
    options: {
      compress: true
    },
    files: [{
      cwd: 'public/modules',
      dest: 'public/modules',
      src: ['*/assets/stylesheets/*.styl'],
      expand: true,
      rename: function(dest, src) {
        var path = require('path');
        var module = src.split(path.sep).slice(0,1)[0];
        return path.join(dest, module + '/css/' + module + '.css');
      }
    }]
  }
},

grunt tricks - customize file output rename

将Grunt输出指定为动态并行文件夹

1 个答案: