Build Automation With Gulp - Js

You might also like

Download as pptx, pdf, or txt
Download as pptx, pdf, or txt
You are on page 1of 12

Build Automation with

gulpjs
By Adarsh Hasnah (@adarshasnah)

Example of build automation


Build automation is the process of automating the creation of a
software build and the associated processes including: compiling
computer source code into binary code, packaging binary code, and
running automated tests. (wikipedia)
Your IDE is already doing it
Maven, gradle,...

Gulp.js
The streaming build
system

The gulp API


gulp.task
gulp.src
gulp.dest
gulp.watch

gulp.task(name [,deps] [,fn])


gulp.task('mytask', function() {
//do stuf
});
gulp.task('dependenttask', ['mytask'], function() {
//do stuf after 'mytask' is done.
});

gulp.src(globs[, options])
gulp.dest(path[, options])
gulp.src points to the files we want to use
gulp.dest points to the output folder we want to write files to
gulp.task('copyHtml', function() {
// copy any html files in source/ to public/
gulp.src('source/*.html').pipe(gulp.dest('public'));
});

gulp.watch(glob[, opts], tasks)


Watches for changes in files/folders and run associated tasks

CSS
Pre-processors (sass, less, stylus)
Post-processors (postcss, vendor prefixes)
Concatenate and minify (uglify)
Css map

HTML
Render from templates (eg jade, mustache, handlebars,...)
Put templates in templatecache (for angular)
Minify html

JS
Generate js from typescript, cofescript,...
Concatenate and minify

Demo

Questions?

You might also like