Angular Tooling with Gulp – The streaming build system – 5 things you need to know:

View Github Repository Open presentation in a new window

lazarony3

See all presentation from lazarony3

Angular Tooling with Gulp – The streaming build system – 5 things you need to know:

0 0

GulpPres

On Github lazarony3 / GulpPres

Angular Tooling with Gulp

The streaming build system

by Bobby Lazarony

Life Before Gulp

Before gulp, the web developer's life was hard:
  • lots of small repetitive tasks that just take time
  • if only there were a way to write something once and then run it to do these mundane tasks...
<script>..</script>
<script>..</script>
<script>..</script>
<script>..</script>
<script>..</script>
<script>..</script>
<script>..</script>
<script>..</script>
<script>..</script>
<script>..</script>

Let there be light(ers)!

Why Use Gulp?

  • Well if you haven't used a task runner before, why not?
  • similar to ant and maven
  • If you've used one(grunt), gulp is most likely easier and faster

How do I get gulp?

First things first: you need node. 

$ npm install gulp -g

Next install it locally

$ npm install gulp --save-dev

this installs gulp locally to the project and saves it to the devDependencies in the package.json file

You'll also need a gulpfile

//include gulp
var gulp = require('gulp');
//include plugins
var concat = require('gulp-concat');

//concat our scripts
gulp.task('default', function() {
    gulp.src('.src/scripts/*.js')
    .pipe(concat('script.js'))
    .pipe(gulp.dest('./build/scripts');
});

Now run it!

$ gulp

Some of the basic gulp plugins

  • Sass compile (gulp-sass)
  • Minify CSS (gulp-minify-css)
  • JSHint (gulp-jshint)
  • Concatenation(gulp-concat)
  • Uglify (gulp-uglify)
  • Compress images (gulp-imagemin)
  • LiveReload (gulp-livereload)
$ npm install gulp-sass gulp-jshint gulp-uglify gulp-concat (etc) --save-dev

5 things you need to know:

gulp.task(name, fn) gulp.run(tasks...) gulp.watch(glob, fn) gulp.src(glob) gulp.dest(folder)

gulp.task(name, fn)

registers the function with a name

Demo!

Thank you!

Any Questions?

by Bobby Lazarony

https://github.com/lazarony3/GulpPres