Specifying Grunt output to a dynamic parallel folder

Question

The Context

I'm new to Grunt and am trying to learn a bit by modifying the meanjs boilerplate to support stylus, I would like to keep my precompiled css assets organized in modular buckets, as recommended by the current meanjs defaults.

The Question

I have the following file structure:

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

How can I use Grunt to take Stylus .styl files in the public/modules/*/assets/stylesheets directory, and have them compile to the public/modules/*/css directory?

Naive Attempt:

Below is an example attempt, which didn't get very far.

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

This results in: File ../../css/public/modules/foo/assets/stylesheets/baz.css created.

If I leave "dest" empty, it does properly compile but the output is in the assets/stylesheets folder (as expected). I'm sure there is a clean way to do this, but I don't know yet.

Eliot Eliot · Accepted Answer · 2015-01-22T22:32:27

setting the src, dest, cwd, as well as using the hidden rename options of grunt should get stylus files in your desired format.

example:

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

Specifying Grunt output to a dynamic parallel folder

1 Answers