A Look at Gulp.js – An Ottawa JS Lightning Talk

View Github Repository Open presentation in a new window

tmartineau

See all presentation from tmartineau

A Look at Gulp.js – An Ottawa JS Lightning Talk

0 0

a-look-at-gulp

Lightning talk slides from Ottawa JS March 2014 meetup

On Github tmartineau / a-look-at-gulp

A Look at Gulp.js

An Ottawa JS Lightning Talk

Thomas Martineau / @tmartineau

What is Gulp.js

Gulp is a streaming build system for web applications.

Ok why does this matter and how is it different then... say Grunt?

What Sets it Apart

  • Less Declarative
  • Streams
    • No temp files
  • Simple Plugins (It's just Node)
	//gulpfile.js

	var gulp = require('gulp');
	var minifycss = require('gulp-minify-css');
	var autoprefixer = require('gulp-autoprefixer');

Grunt Example (Declarative)

	concat: {
	  options: {
	    separator: ';'
	  },
	  dist: {
	    src: ['./lib/**/*.js'],
	    dest: 'dist/all.js'
	  }
	}

Installing

	$ npm install gulp -g

	$ npm install gulp --save-dev

Now for some plugins

	$ npm install gulp-minify-css --save-dev
	$ npm install gulp-autoprefixer --save-dev

Gulp.js Example

Maybe you have some SASS in your project you want compiled

	//gulpfile.js
	
	gulp.task('sass', function () {
	  return gulp.src('sass/**/*.sass')
	  	.pipe(sass({ style: 'compressed' }))
	  	.pipe(autoprefixer('last 15 version'))
	  	.pipe(minifycss())
	  	.pipe(gulp.dest('css'))
	  	.pipe(notify({ message: 'Easy isn\'t it Ottawa JS?' }));
	});

Try Running This

	$ gulp

Uh oh we've got an error.

By default Gulp looks for the default task. We could change the task name but then it is not as descriptive. Or we tell Gulp what task to run:

	$ gulp sass

Run a Task From Default

	gulp.task('sass', function () { ... });

	gulp.task('default', ['sass']);

Conclusion

Not really a conclusions just some parting thoughts

  • Build systems are great
  • Doesn't matter which one... as long as it works for you

Resources