ES6 with Ractive, Gobble and Rollup

I took the week off... and a snow storm happened. Lucky? Maybe. However, my parents are more worried about me being idle rather than working. Apparently they see me as a workaholic... which I am... sort of... and that doing nothing will lead to withdrawal symptoms. I did what I can to keep my heart at peace by answering Vjeux's challenge and writing this article on rapid prototyping. After that, I dusted off my pet project and away I go, this time with ES6, Ractive, Gobble and Rollup.

The last time I took it apart was...

The last time I took it apart was during the article about ES6, Ractive, SystemJS and Rollup a few months back in an effort to get used to the new ES6 syntax. Although I was getting used to ES6 and even using ES6 in code reviews, the setup itself was pulling me down.

SystemJS kept swallowing transpilation errors. Had to settle with Traceur because Babel and TypeScript wasn't packaged in a front-end-friendly way. When the dev tools craps out on scope inspection, I had to turn of sourcemaps and read Traceur's ugly output. I still had to wire up libraries as modules similar to RequireJS's shim config. However, Rollup didn't play well with non-ES6 modules, or at least had to be set up differently. JSPM started to look like a good solution, until it tries to do everything and I gave up.

Enter Gobble

So I threw away SystemJS and went for Gobble. Gobble is a "build tool" and not a task runner. The experience is similar to pressing the magical "play button" in an IDE which will compile the source. In the case of a webapp, it will run a web server, and open a browser pointing to the compiled output.

Here's the gobblefile I started with that already does Sass, Rollup, Babel and UglifyJS. It's so simple, it doesn't need a repo or a scaffold. All I need is to copy this over as gobblefile.js and alongside it would be a main.scss, a main.js and an index.html that included the transformed outputs for both files. As long as have a local gobble project dependency and the global gobble-cli, I'm good to go.

var gobble = require('gobble');

module.exports = gobble([

  gobble('src'),

  gobble('src')
    .transform('sass', {
      src: 'main.scss',
      dest: 'main.css',
      outputStyle: 'compressed',
    }),

  gobble('src')
    .transform('rollup', {
      entry: 'main.js',
      dest: 'main.js',
      format: 'iife',
    })
    .transform("babel")
    .transform("uglifyjs"),

]);

Conclusion

In the end, I am writing ES6, Ractive components and scss like it was natively supported by the browser. Pretty neat huh? I might even consider converting my blog into a gobble-built setup. This Jade and Coffeescript setup of Wintersmith is kinda pulling me back from customizing stuff that could have been easily done in vanilla.