Grunt for people who think things like grunt are weird and hard
This presentation is the property of its rightful owner.
Sponsored Links
1 / 7

Grunt for People Who Think Things Like Grunt are Weird and Hard PowerPoint PPT Presentation


  • 200 Views
  • Uploaded on
  • Presentation posted in: General

gulp. gulp. Grunt for People Who 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! No, it won’t bake you cookies Yes! It does run on windows

Download Presentation

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

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Grunt for people who think things like grunt are weird and hard

gulp

gulp

Grunt for People Who 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

What is gulp?

  • Put simply, its a personal servant!

    • 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

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.

    • not morally, there’s no hope there.


What s the big idea

What’s the big idea?

Original Files:

Deliverable Files:

JS

CSS

CSS

JS

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

Lines = 1

body{

min-width:960px

}

.container_12{

margin-right:auto

margin-left:auto;

width:960px

}

Lines = 8

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

img

img

Img Size 3 kb

Img Size 5 kb


Plug it in plug it in

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.0duplicate 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

References

  • gulp:

    • http://gulpjs.com

  • Learned cmd line here

    • http://teamtreehouse.com

  • Great article on the whole concept and why its good.

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

  • Great gulp Tutorial to start you off:

    • http://www.sitepoint.com/introduction-gulp-js/

  • Great Slide show from gulp

    • http://slid.es/contra/gulp


Testing 1 2 3

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?


  • Login