Building with Gulp

Gulp is a build tool which you can use to automate tasks involved in the development of a website, such as compiling Sass, minifying JavaScript, and generating sprites. The talk will introduce Gulp and some of the things you can do with it, and will also explain some of the differences between the current version of Gulp and the upcoming version of Gulp, Gulp 4.

The code from the demo is here: https://github.com/callumacrae/gulpTalk

Transcript

1. Building with Gulp
   Callum Macrae | @callumacrae
   

   View Slide

2. @callumacrae
   Front-end developer at Lost My Name
   Author of “Learning from jQuery”
   

   View Slide

3. What is Gulp?
   gulp.task('scripts', function () {
   return gulp.src('assets/js/*.js')
   .pipe(jshint())
   .pipe(jshint.reporter('default'))
   .pipe(uglify())
   .pipe(concat('app.js'))
   .pipe(gulp.dest('build/js'));
   });
   

   View Slide

4. Streams
   

   View Slide

5. Streams
   

   View Slide

6. Open Source
   

   View Slide

7. Why Gulp?
   

   View Slide

8. View Slide

9. It’s really easy
   gulp.task('scripts', function () {
   return gulp.src('assets/js/*.js')
   .pipe(jshint())
   .pipe(jshint.reporter('default'))
   .pipe(uglify())
   .pipe(concat('app.js'))
   .pipe(gulp.dest('build/js'));
   });
   

   View Slide

10. Using Gulp
    

    View Slide

11. Tasks
    gulp.task('copyFiles', function () {
    console.log('Copying files!')
    return gulp.src('dir1/*')
    .pipe(gulp.dest('dir2'));
    });
    

    View Slide

12. Tasks
    

    View Slide

13. Default task
    gulp.task('default', function () {
    // Do something here
    });
    

    View Slide

14. Plugins
    http://gulpjs.com/plugins/
    Plugins are tagged “gulpplugin” in npm
    Friendly libraries are tagged “gulpfriendly”
    

    View Slide

15. Installing a plugin
    Install through npm
    Add them to your gulp file using require
    var uglify = require('gulp-uglify');
    npm install --save-dev gulp-uglify
    

    View Slide

16. Using a plugin
    var gulp = require('gulp');
    var uglify = require('gulp-uglify');
    gulp.task('scripts', function () {
    return gulp.src('assets/js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('build/js'));
    });
    

    View Slide

17. gulp-load-plugins
    var gulp = require('gulp');
    var loadPlugins = require('gulp-load-plugins');
    var plugins = loadPlugins();
    plugins.uglify === require('gulp-uglify');
    

    View Slide

18. There’s a plugin for that
    

    View Slide

19. Running other tasks
    gulp.task('build', gulp.series('lint', 'js'));
    gulp.task('default',
    gulp.parallel('watchers', 'build'));
    

    View Slide

20. Watching with Gulp
    

    View Slide

21. Watching files
    gulp.task('default', function () {
    gulp.watch('assets/js/*.js', 'scripts');
    });
    

    View Slide

22. Watching files
    gulp.task('default', function () {
    gulp.watch('assets/js/*.js', function () {
    console.log('File changed');
    });
    });
    

    View Slide

23. Demo
    

    View Slide

24. browser-sync
    var browserSync = require('browser-sync');
    gulp.task('browser-sync', function () {
    browserSync.init(['css/*.css'], {
    server: {
    baseDir: './'
    }
    });
    });
    

    View Slide

25. View Slide

26. • Utility functions that plugins—and you—can use
    • Log to console with [gulp] prefix and colours
    • Simple templating
    • Create new virtual files
    gulp-util
    

    View Slide

27. Installing Gulp
    

    View Slide

28. Install through npm
    Install gulp globally
    Install to project dependencies
    npm install --save-dev gulp gulp-util
    npm install -g gulp
    

    View Slide

29. Gulp
    • Open sourced task runner written using Node.js
    • Uses streams—it’s very fast
    • Easy to use, many plugins available
    • Watches files and runs tasks on changes
    

    View Slide

30. Questions?
    Callum Macrae | @callumacrae
    

    View Slide