HELLO
I'M TOMMY MARSHALL

ABOUT ME

BUT SRSLY

• 26 year old FED at Viget
• SayViget.com, ESPN.com/PitchAnatomy
• Play with ReactJS and Laravel
• Allergic to cats
• Homebrewer

TEACHING SOMETHING USEFUL, QUICKLY

Save 100ms / compile + 1 hour to learn
=
3,600,000ms
=
Hitting save 36,000 times

GULP, NPM, AND YOU.

GULP

A Streaming Build System.

STREAMING

Capitalizes on a convention of Node.js that data flows in a single direction and changes happen to that data along the way.

Read In → Modify → Modify → Write Out

LIKE PIPES IN BASH

cat ~/.ssh/id_rsa.pub | pbcopy

gulp.src('~/.ssh/id_rsa.pub')
    .pipe(clipboard());

AUTOMATION

• SASS compiling
• Coffeescript compiling
• Image optimization
• Browser refreshing

gulp.task

gulp.task('task', ['deps'], callback);

gulp.task('heyo', function(){
    console.log('whuddup!!');
});
gulp.task('sass', ['heyo'], function(){
    // compile sass stuff here
});

gulp.watch

gulp.watch('./src/css/*.css', ['compile', 'reload']);

gulp.src

Returns a Readable Stream

gulp.src('./src/sass/app.sass')
    .pipe(sass())
    .pipe(gulp.dest('./dist/app.css'));

gulp.dest

Returns a "Through" stream

gulp.src('./src/css/app.css')
    .pipe(minify())
    .pipe(gulp.dest('./dist/app.css');

HOW DO I RUN IT

gulp default

// gulpfile.js

gulp.task('default', ['compile_sass', 'compile_js']);

NPM

The Package Manager for Node.js.
Tool to manage Package Dependencies.

NPMJS.org

Listing of all Packages you can install via NPM.

npm install jquery

NPM INSTALL

// Saved in package.json
{
    "dependencies": {
        "jquery": "~1.11.0"
    },
    "devDependencies": {
        "gulp": "^3.8.7"
    }
}

WHERE THEY GET SAVED

Relative to your package.json file, in node_modules.

PACKAGES

Can be strictly server-side, like gulp-clipboard,

or they can be libraries we're familiar with.

• Underscore
• Backbone
• jQuery

BROWSERIFY

Reads through the javascript, and builds a

single javascript file based on what you require.

// Pulled in from package.json
var $ = require('jquery');
var _ = require('underscore');

// Pull in from /app/assets/js/view.js
var View = require('./view');

_.map(View.elements, function(el){
    var $el = $(el);
    $el.hide();
});

COOL PACKAGES

• browserify
• gulp-notify
• browser-sync

YOU

That's nice, but I'm a Javascript noob.

LEARN FROM EXAMPLE

LEARN BY DOING

The best. Always.

DEMO TIME!

THE END

Questions? Answers?

Tommy Marshall / Viget.com