Gulp Devstack

⚡️ Personal gulp stack for frontend development.

Features

• HTML served as PUGs
• Javascript: Babelify + Browserify with uglify & sourcemaps => latest ES preset
• Styles: LESS + autoprefix + glob plugin
  • Pre-defined breakpoints
  • Structured LESS
  • HTML5 reset
  • Custom mixins
  • Autoprefix: > 1%, 2 latest versions
• Images: sprites w/ gulp.spritesmith
• Browser-sync
• Mac OS X notifications on error and success

Installation & run

Installation

• npm i

Commands

Command	Definition
gulp / gulp default	Watching files, compile and livereload.
gulp build	Build assets for production
scripts	Build scripts.
sprites	Generate PNG sprites.
svg	Generate SVG sprites.
styles	Compile LESS.
html	Watch HTML.
watch	Watch.
set-build-env	Set ENV to production.

Sprites

Sprites are created in pseudo element :before. Sprites are fully responsive, important is to keep the icon/image ratio when resizing.

<a class="ico-fb">Facebook</a> -> expecting to have ico-fb.{png|svg}, showing icon and text.
<a class="sprite ico-fb"><span>Facebook</span></a> -> expecting to have ico-fb.{png|svg}, showing only icon and hiding text.
<a class="sprite sprite--center ico-fb"><span>Facebook</span></a> -> expecting to have ico-fb.{png|svg}, showing only icon and hiding text, centered in all directions.

If you create files sprite.svg and sprite-hover.svg, the :hover is added automatically.

Mixins / pre-defined classes

Mixin / Class	Definition
.skir	Scott Kellum Image Replacement
.font-antialiasing()	Alias for -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
.top-left(top: 0, left: 0, z-index: '', position: absolute)
.top-left-f(...)	Alias for fixed position.
.top-right(...)
.bottom-left(...)
.bottom-right(...)
.size(@width: auto, [@height: auto])	Example: .size(10px); .size(10px, 10px);
.pseudo(@display: inline-block)	Alias for display: @display; content: "";
.bg(@image, @position: 0 0, @repeat: no-repeat, @color: transparent)
.bgc(@color: #fff)
.test(@c: red)
.triangle-t(@width, @height, @color)	Makes top triangle. ▲
.triangle-b(...)	Makes bottom triangle. ▼

Todo

• livereload ⃕ browser-sync ?
• less-plugin-npm-import ?
• gulp-if, gulp variables