FRONT-END WORKFLOW WITH GULP

Adrián Bolonio

Gulp is a javascript task runner that lets you automate tasks such as bundling, preprocessing and minifying files, libraries and stylesheets.

What is Gulp?

Gulp vs Grunt

"Gulp is a streaming build system".

Think Grunt, but faster and less config.

  • Focus on configuration
  • Focus on code
  • Stream based
  • File based
  • Plugins are designed to do one thing only
  • Plugins often perform multiple tasks
  • Uses leaner, simpler JavaScript code
  • Uses JSON-like data configuration files

.less

.less

.less

.css

.min.css

.less

.less

.min.css

concat()

less()

minify()

rename()

PIPE

1. Installation

Install Node

$ sudo npm install -g gulp 

Install Gulp

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

2. Setup package.json

$ npm init

package.json

Create new node project

{
  "name": "project-name",
  "version": "1.0.0",
  ...
}
$ npm install --save-dev gulp
{
  "name": "project-name",
  "version": "1.0.0",
  ...
  "devDependencies": {
    "gulp": "^3.9.0"
  }
}

package.json

Add gulp to the project

3. Create gulpfile.js

$ touch gulpfile.js
var gulp = require('gulp');

gulpfile.js

Create gulpfile.js

4. Gulp tasks

var gulp = require('gulp');

gulp.task('taskName1', function(){

  ...

});

gulp.task('default', ['taskName1', 'taskName2']);

gulpfile.js

$ gulp taskName1

Run task

Recap

1. Installation

2. Setup package.json

3. Create gulpfile.js

4. Gulp tasks

3 main keys:

1. Plugins

2. Streams

3. Tasks

The core of the funtionality of Gulp

The communication between tasks

The place to interact with plugins

Gulp API

gulp.task('taskName', [dependencies],  function(done){

  ...

});

gulp.task

gulp.task('default', ['taskName1', 'taskName2']);
gulp.src(['source/styles/*.css', '...'])

gulp.src

gulp.src(['...', 'build/styles/*.css'])

gulp.dest

gulp.src('source/styles/*.css')
    .pipe(gulp.dest('build/styles/'));
gulp.watch('source/styles/*.css', ['taskName']);

gulp.watch

Common Plugins and Tasks

...at least by me

var gulp = require('gulp');
var concat = require('gulp-concat');


gulp.task('css', function(){
  gulp.src('source/styles/*.css')
    .pipe(concat('style.css'))
    .pipe(gulp.dest('build/styles/'));
});

Concat files

$ npm install --save-dev gulp-concat

gulpfile.js

var gulp = require('gulp');
var less = require('gulp-less');


gulp.task('css', function(){
  gulp.src('source/styles/*.less')
    .pipe(less())
    .pipe(gulp.dest('build/styles/'));
});

Compile less files

$ npm install --save-dev gulp-less

gulpfile.js

var gulp = require('gulp');
var uglify = require('gulp-uglify');


gulp.task('js', function(){
  gulp.src('source/js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('build/js/'));
});

Minify Javascript

npm install --save-dev gulp-uglify

gulpfile.js

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


gulp.task('css', function(){
  gulp.src('source/styles/*.less')
    .pipe(minify({ keepBreaks: true }))
    .pipe(gulp.dest('build/styles/'));
});

Minify CSS

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

gulpfile.js

var gulp = require('gulp');
var rename = require('gulp-rename');


gulp.task('css', function(){
  gulp.src('source/styles/*.less')
    .pipe(minify({ keepBreaks: true }))
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('build/styles/'));
});

Rename

npm install --save-dev gulp-rename

gulpfile.js

gulp.task('watch', function(){
  gulp.watch(['source/styles/components/*.css'], ['css']);
  gulp.watch(['source/styles/*.less'], ['less']);
  gulp.watch(['source/js/*.js'], ['js']);
  gulp.watch(['source/*.html'], ['html']);
  gulp.watch(['source/img/**/*'], ['images']);
  gulp.watch(['source/fonts/**/*'], ['fonts']);
});

gulp.task('build', ['css', 'less', 'js', 'html', 'images','fonts', 'watch']);

Watch

gulpfile.js

Grunt requires plug-ins for basic functionality such as file watching; Gulp has them built-in.

http://gulpjs.com/plugins/

around 1800 plugins

How to run Gulp?

var gulp = require('gulp');

...

gulp.task('default', ['css', 'less', 'js', 'html', 'images','fonts', 'watch']);

gulpfile.js

$ gulp

command line

var gulp = require('gulp');

...

gulp.task('myGulp', ['css', 'less', 'js', 'html', 'images','fonts', 'watch']);

gulpfile.js

$ gulp myGulp

command line

Recap

1. Installation (Node & Gulp)

2. Setup and start a project

3. Create tasks

4. 3 main concepts

5. Gulp API & plugins

Plugins

Streams

Tasks

gulp.thank(you)

gulp.questions( )

FRONT-END WORKFLOW WITH GULP

By Adrián Bolonio

FRONT-END WORKFLOW WITH GULP

FRONT-END WORKFLOW WITH GULP

  • 1,048
Loading comments...

More from Adrián Bolonio