gulp Grunt for People Who gulp Think Things

gulp Grunt for People Who gulp Think Things Like Grunt are Weird and Hard (gulp for people who think things like gulp are weird and hard) By: Elijah Vazquez

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: CSS JS body{ min-width: 960 px }. container_12{ margin-right: auto margin-left: auto; width: 960 px } function load. JSON(){ var data=‘server. php'; var request = new XMLHttp. Request(); try{ //and so on; Lines = 8 size = 688 bytes img Img Size 5 kb Lines = 25 Deliverable Files: CSS JS body{minwidth: 960 px}. c ontainer_12{m arginright: auto; } functionload. JSON( ){vardata=‘server. p hp'; varrequest=ne w. XMLHttp. Request (); try{//and soon; Lines = 1 lines = 1 size = 369 bytes img Img Size 3 kb

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-gulpplugin-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 || gulpsprite 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 || gulpng-html 2 js 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 || gulproro 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-es 6 -transpiler 0. 1. 1 || gulp-strip-json-comments 0. 1. 1 || gulp-es 6 -module-transpiler 0. 1. 0 || gulpgoogle-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-s 3 0. 1. 1 || gulp-uncss-task || 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-angularextender 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 gulpmyth || 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 || gulpcommonjs 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-localscreenshots 0. 0. 1 || gulp-batch-replace 0. 0. 0 || retro-gulp-jade 0. 4. 2 || gulp-usemin 2 0. 2. 4 || gulp-swig-jst 0. 1. 0 || vinyl-buffer 0. 0. 0 || gulp-pathmodifier 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-html 2 js 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 0. 2. 2 || gulp-ftp 0. 1. 1 || gulp-pandoc 0. 2. 0 dart 2 js 0. 0. 2

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: //24 ways. 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 gulp o 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?