Grunt for People Who Think Things Like Grunt are Weird and Hard

By: Elijah Vazquez

gulpgulp

(gulp for people who think things like gulp are weird and hard)

What is gulp?• Put simply, its a personal servant!

o No, it won’t bake you cookies• Yes! It does run on windows• and yes...you will have to use

Command Line

Why do I need Gulp?• You don’t, if you like doing repetitive

and time consuming tasks over and over again.

• It makes you better. o not morally, there’s no hope there.

What’s the big idea?Original Files:

Deliverable Files:

body{min-width:960px}.container_12{margin-right:auto;}

Lines = 1

CSSCSS

JSJS

Img Size 3 kbimg img

body{ min-width:960px}.container_12{ margin-right:auto margin-left:auto; width:960px}

Lines = 8

Img Size 5 kb

function loadJSON(){ var data=‘server.php'; var request = new XMLHttpRequest();try{ //and so on;

Lines = 25

size = 688 bytes

functionloadJSON(){vardata=‘server.php';varrequest=newXMLHttpRequest();try{//and soon;

lines = 1

size = 369 bytes

Plug it in, plug it in!gulp-htmlbuild 0.2.0 || gulp-dot 1.5.0 || gulp-markdown 0.1.2 || gulp-cssmin 0.1.3 || gulp-grunt 0.4.1 || gulp-hogan-compile

0.2.1 || generator-gulp-plugin-boilerplate 0.1.3 || gulp-commonjs-wrap 0.0.4 || gulp-notify-growl 1.0.1 || gulp-jsmin 0.1.3 || gulp-streamify 0.0.4 || gulp-newer 0.3.0 || gulp-sprite 0.0.4 || gulp-csslint 0.1.3 || gulp-protractor 0.0.7 || gulp-include 0.2.2 || gulp-prompt 0.1.0 || gulp-vartree 0.0.6 || gulp-inline-css 0.2.0 || gulp-ng-html2js 0.1.6 || gulp-docco 0.0.3 || gulp-resolve-dependencies 0.1.0 || gulp-vulcanize 0.1.1 || generator-gulp-plugin 0.4.3 || gulp-gzip 0.0.5 || gulp-jade-react 0.2.0 || gulp-iconfont 0.0.5 || gulp-laravel-validator 0.1.1 || gulp-dust 0.2.0 || gulp-file-include 0.2.0 || gulp-sloc-simply 1.1.1 || gulp-roro 0.4.1 || gulp-strip-debug 0.3.0 || gulp-apidoc 0.0.1 || gulp-twitter 0.0.3 || gulp-smoosher 0.0.2 || gulp-nunjucks 0.2.2 || gulp-manifest 0.0.3 || gulp-ignore 1.0.0 || gulp-mustache 0.2.0 || gulp-es6-transpiler 0.1.1 || gulp-strip-json-comments 0.1.1 || gulp-es6-module-transpiler 0.1.0 || gulp-google-cdn 0.3.0 || gulp-markdown-pdf 0.2.0 || gulp-processhtml 0.0.3 || gulp-mdvars 0.0.1 || gulp-front-matter 1.0.0 || gulp-consolidate 0.1.2 || gulp-regenerator 0.2.0 || gulp-html-prettify 0.0.1 || gulp-recess 0.2.0 || gulp-swig 0.4.0 || gulp-wrap-umd 0.2.0 || gulp-s3 0.1.1 || gulp-uncss-task 0.2.2 || gulp-ftp 0.1.1 || gulp-pandoc 0.2.0 || gulp-tar 0.1.1 || gulp-spawn 0.3.0 || gulp-myth 0.1.1 || gulp-marked 0.2.0 || gulp-jshint-cached 1.4.2 || gulp-template-compile 0.2.0 || gulp-wrap-amd 0.3.0 || gulp-license 0.2.0 || gulp-image-resize 0.4.2 || gulp-soften 0.0.1 || gulp-angular-extender 0.1.0 || gulp-mversion 0.1.0 || gulp-multinject 0.1.0 || gulp-clone 0.1.0 || gulp-extend 0.1.0 || gulp-myth-css 0.1.0 duplicate of gulp-myth || gulp-defeatureify 0.1.1 || gulp-redust 0.0.1 || gulp-themer 0.0.1 || gulp-bower-src 0.0.1 || gulp-ssh 0.0.2 || gulp-intercept 0.1.0 || gulp-commonjs 0.1.0 || gulp-sterno-manifest 0.0.1 || gulp-jekyll 0.0.0 || gulp-build 0.0.1 || gulp-tinypng 1.0.2 || gulp-jscoverage 0.1.0 || gulp-local-screenshots 0.0.1 || gulp-batch-replace 0.0.0 || retro-gulp-jade 0.4.2 || gulp-usemin2 0.2.4 || gulp-swig-jst 0.1.0 || vinyl-buffer 0.0.0 || gulp-path-modifier 0.0.1 || gulp-play-usemin 0.0.1 || gulp-pancakes 0.0.1 || gulp-csscss 0.0.1 || gulp-filelog 0.2.0 || gulp-html2js 0.0.1 || gulp-includer 0.0.1 || gulp-markdox 0.1.0 || gulp-sass-graph 1.0.0 || gulp-remove-lines 0.1.0 || gulp-pogo 1.0.0 || gulp-supersede 0.0.1 || gulp-jst-concat 0.0.1 || gulp-jst 0.1.1 || gulp-espower 0.3.0 || gulp-autopolyfiller 1.0.1 || gulp-usemin-query 0.0.1 || gulp.spritesmith 0.1.1 || gulp-tmpl 0.0.3 || gulp-dart2js 0.0.2

AND More

References• gulp:

o http://gulpjs.com• Learned cmd line here

o http://teamtreehouse.com• Great article on the whole concept and why its

good.o http://24ways.org/2013/grunt-is-not-weird-and-hard/

• Great gulp Tutorial to start you off:o http://www.sitepoint.com/introduction-gulp-js/

• Great Slide show from gulpo http://slid.es/contra/gulp

Testing: 1...2...3...1: What is one way gulp could help improve your everyday

workflow?

2: Do you need to be part of a huge team or working on a huge project for gulp to be helpful? Explain.

3: Do you think gulp should have a GUI? What are some advantages of a GUI? Disadvantages?

4: gulp plugins are designed to do one task and one task only, why would they choose to do this? Isn’t more better?