So Orchard has a new pipeline for generating client side assets. It is basically a gulp file that goes to all modules and themes (!), finds a Assets.json config file and does whatever that file says. What can it do? From a quick look at the Gulp.js file, it can process LESS and TypeScript files, and combine and minify js and css files. It can also autoprefix your CSS rules. Yay? It also creates source maps, which, in case you didn't know, are cool because even when your js is minified up you can "map" it back to the source files when debugging! And even IE supports it.

How do we do all this cool stuff? It is ridiculously easy. Create a file in the root of your module/theme called Assets.json then do something like:

[
  {
    "inputs": [
      "Styles/teachings.less"
    ],
    "output": "Styles/teachings.css"
  }
]

That's it. It'll infer from the file type what it is supposed to do and do it. This example creates a css file from a less file. Very cool. Take a look at the Assets.json file in Orchard.Resources for a comprehensive example of what you can do.

The pipeline has a couple of different commands: build, rebuild and watch. Watch is the cool one here, it will watch all the Assets.json files and if any change, it rebuilds that one. Pretty sweet. So don't forget to add new LESS files etc. to your Assets.json or you'll sit there like a top pleb waiting for the gulp watch to generate your css. I totally did not do that.

You may now be thinking, this is cool and all. But all this sounds like I'll probably need... node.js! You do. You'll then need to run npm install in the src folder of Orchard to grab all the node modules it needs. The gulp stuff should all run happily in Visual Studio in the Task Runner Explorer (this comes with 2015 and is available as an extension for earlier versions I do believe). If the task runner doesn't automatically pick up the gulp commands you can either close and reopen the task runner window or just go all out and restart Visual Studio.

If you are a Sass guy, then unfortunately you wont be able to use the pipeline for it. The nice thing is the pipeline is totally opt in. All files generated by it are also included in the source that you pull down from GitHub, so you don't need to worry about any of this stuff if you don't want to. They have also been nice and added node_modules to the .gitignore file.

I will be updating Orchardizer to create Assets.json files when it generates modules and themes soon!