A full frontend Gulp stack with Stylus and Coffee

2015-10-29 | #helper, #webdev

Here at our agency we normally use SASS and Compass with the SCSS-syntax. SASS is not bad and neither is Compass, but SASS's syntax lacks Stylus' flexibility and Compass' ruby dependency gets on my nerves.

So I set out to create a minimal but complete frontend stack with Stylus covering all the usual bases including a range of functions matching SASS + Compass.

Additionally, cause it so damn fits, I also threw CoffeeScript in there as an optional possiblity for JS-development. Use it or leave it, but it's there!

To summarize what this offers:

* gulp as the task runner

* A dev server including livereload

* (and livereload separately if you want to use own delivery)

* Uglify2 for JS-minification

* Concat JS-source into one asset

* Sourcemaps for generated min.js

* jQuery + jQueryAnnex for DOM-manipulation

* lodash for algorithm tools

* CoffeeScript as a JS-preprocessor

* Stylus as a CSS-preprocessor

* Nib as mixin library for Stylus

* Sass as an alternative CSS-preprocessor

* Autoprefixer for vendor prefixes handling the result of Stylus + Nib

* Spritesmith for auto spritemaps including fitting mixins and defines for use in stylus

* Bootstrap for Stylus, offering a complete implementation for Stylus including mixins for styling without classes

Dependencies:

* node.js + npm

* gulp

* bower

Download the linked zip to the left or directly browse the repo on github via the provided link.

Caution: My plugin jQueryAnnex is currently included as an alpha version, it's probably a good idea to have a look at the github repo and update the dependecy in the future. See the links for the repo.

UPDATE: I now also included Sass as a second CSS-preprocessing possibility, since, sadly, it's too wide spread to ignore I'm afraid. So, it's there. Yippie. Works mostly the same as Stylus.