http://bit.ly/drathens

{
    name: "Theodore",
    status:"Webdev",
    
    fatherOfTwo:[{
        name:'Devicons'
    },{
        name:'Scissors.js'
    }],

    github:"github.com/vorillaz",
    tweet: "twitter.com/vorillas",
    cmore: "vorillaz.com"
}

HI!

What is Gulp?

Node iz in da hood!
 

OS agnostic

FS and CLI it is!

JavaScript 

Unix Pipeline 1970's

 

Gulp task

 gulp.src('folder/*.scss')
  .pipe(onetask())
  .pipe(secondtask())
  .pipe(gulp.dest('output/onemore'));
$ ls -l | grep key | less

WHY?

Easy to go

Modular

2000+ ready2go modules

Drupal, WP, Ruby, whatever

Easy to run

Plain syntax

1. Install Node and NPM

2. npm install gulp

3. Create gulpfile.js

4. Install modules using NPM and package.json

5. Run your tasks on your terminal or code

 

Installation

Gulpfile.js anatomy

Rule of 

1.gulp.task

2. gulp.watch
3. gulp.src

3. gulp.dest

Tasks are simple as

gulp.src() → pipe() →...→ pipe() → gulp.dest()

Pre processing

Mad Science

Code analysis ( Plato )

Code optimization ( Uncss )

Testing IT IZ (phpunit, mocha , chai)

 

Continuous integration (Travis CI)

Any OS component or 3rd party API (Twitter, OS system modules)

Source control (Github, Bitbucket)

Custom deployments (AWS, Heroku belt)

How about Drupal 8?

Welcome Monoset

Run SASS

https://github.com/zetagraph/monoset

Concat them all!

YOU CAN EVEN RUN DRUSH!

Image Optimisation

JShint

Questions?

Perfect workflow with gulp.js

By Theodore Vorillas

Made with Slides.com

Perfect workflow with gulp.js

  • 532

More from Theodore Vorillas