A full frontend Gulp stack with Stylus and Coffee
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
* node.js + npm
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.