Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Take A Gulp at Task Automation

132 views

Published on

Slides from my "Take a Gulp at Task Automation" talk given at Dev Teach Montreal on July 7th

Published in: Internet
  • Be the first to comment

Take A Gulp at Task Automation

  1. 1. TAKE A GULP AT TASK AUTOMATION DevTeach Mtl July 2016 Joel Lord - Spiria
  2. 2. @joel__lord ABOUT ME Tinkerer Technology Enthusiast Javascript Junkie 7/9/2016 3
  3. 3. @joel__lord AGENDA A bit of theory Demo and coding Q&A 7/9/2016 4
  4. 4. @joel__lord WHAT IS GULP Gulp is a javascript task runner 7/9/2016 5
  5. 5. @joel__lord WHAT IS GULP Gulp is a javascript task runner It helps developers with task repetitive tasks 7/9/2016 6
  6. 6. @joel__lord WHAT IS GULP Gulp is a javascript task runner It helps developers with task repetitive tasks such as 7/9/2016 7
  7. 7. @joel__lord WHAT IS GULP Gulp is a javascript task runner It helps developers with task repetitive tasks such as  Bundling and minifying libraries and stylesheets 7/9/2016 8
  8. 8. @joel__lord WHAT IS GULP Gulp is a javascript task runner It helps developers with task repetitive tasks such as  Bundling and minifying libraries and stylesheets  Refreshing your browser when you save a file. 7/9/2016 9
  9. 9. @joel__lord WHAT IS GULP Gulp is a javascript task runner It helps developers with task repetitive tasks such as  Bundling and minifying libraries and stylesheets  Refreshing your browser when you save a file.  Quickly running unit tests 7/9/2016 10
  10. 10. @joel__lord WHAT IS GULP Gulp is a javascript task runner It helps developers with task repetitive tasks such as  Bundling and minifying libraries and stylesheets  Refreshing your browser when you save a file.  Quickly running unit tests  Running code analysis 7/9/2016 11
  11. 11. @joel__lord WHAT IS GULP Gulp is a javascript task runner It helps developers with task repetitive tasks such as  Bundling and minifying libraries and stylesheets  Refreshing your browser when you save a file.  Quickly running unit tests  Running code analysis  Less/Sass to CSS compilation 7/9/2016 12
  12. 12. @joel__lord WHAT IS GULP Gulp is a javascript task runner It helps developers with task repetitive tasks such as  Bundling and minifying libraries and stylesheets  Refreshing your browser when you save a file.  Quickly running unit tests  Running code analysis  Less/Sass to CSS compilation  Copying modified files to an output directory 7/9/2016 13
  13. 13. @joel__lord WHAT IS GULP Gulp is a javascript task runner It helps developers with task repetitive tasks such as  Bundling and minifying libraries and stylesheets  Refreshing your browser when you save a file.  Quickly running unit tests  Running code analysis  Less/Sass to CSS compilation  Copying modified files to an output directory Anything that you do every time you change a file ! 7/9/2016 14
  14. 14. @joel__lord ALTERNATIVES TO GULP There are a lot of alternatives out there that you might have heard of 7/9/2016 15
  15. 15. @joel__lord ALTERNATIVES TO GULP Grunt JS  Bigger community  More plugins  Slower  Configuration based tool to create tasks  Lack of consistency between plugins 7/9/2016 16
  16. 16. @joel__lord ALTERNATIVES TO GULP Broccoli JS  Concise code  Built in server  Lacks documentation 7/9/2016 17
  17. 17. @joel__lord ALTERNATIVES TO GULP Mimosa JS  CLI tool  Configuration based  Limited set of recipes or plugins  Smaller community 7/9/2016 18
  18. 18. @joel__lord AND WHAT ABOUT GULP Gulp JS  My personal favorite  Uses stream so better i/o performance  Very simple syntax  Large community and ecosystem 7/9/2016 19
  19. 19. @joel__lord HOW IT WORKS You create a named task that you would like gulp to accomplish You load a set of files into the gulp stream Plugins will (potentially) do modifications to the files The file(s) are sent to a destination 7/9/2016 20
  20. 20. @joel__lord STREAMS 101 “The main tool in node's evented toolbox is the Stream. Stream instances are basically Unix pipes. They can be readable, writable or both and are easy to reason about -- you can pipe a readable stream to a writable stream by doing readableStream.pipe(writableStream).” -NodeJs Documentation 7/9/2016 21
  21. 21. @joel__lord GULP API gulp.task Create/define a task gulp.src Read files gulp.dest Write files gulp.watch Watch for changes 7/9/2016 22
  22. 22. @joel__lord GULP API 7/9/2016 23
  23. 23. @joel__lord « MUST HAVE » PLUGINS Uglify Babelify Browserify (this is soooo spring ‘16) Sassify JS Hint (ify?) 7/9/2016 24
  24. 24. @joel__lord GETTING STARTED Let’s get our hands dirty Starting from scratch, let’s install gulp and create a basic gulp file 7/9/2016 25
  25. 25. @joel__lord INSTALLING GULP Make sure you have NodeJs installed Run in your terminal: or 7/9/2016 26 > npm install --global gulp-cli > sudo npm install --global gulp-cli
  26. 26. @joel__lord INSTALLING GULP Install gulp in your project devDependencies (you need a package.json file) 7/9/2016 27 > npm install --save-dev gulp
  27. 27. @joel__lord INSTALLING GULP Create a gulpfile.js at the root of your project with the following code 7/9/2016 28 var gulp = require('gulp'); gulp.task('default', function() { console.log('Task Started'); });
  28. 28. @joel__lord INSTALLING GULP Run your gulp script 7/9/2016 29 > gulp [09:40:24] Using gulpfile ~/Documents/Projects/gulpfile.js [09:40:24] Starting 'default'... Task Started [09:40:24] Finished 'default' after 102 μs
  29. 29. @joel__lord YOUR FIRST RECIPE Let’s do a gulp script that will do a lint on our JS code 7/9/2016 30 > npm install --save-dev gulp-jshint
  30. 30. @joel__lord YOUR FIRST RECIPE Now let’s edit that gulpfile.js 7/9/2016 31 var gulp = require("gulp"); var jshint = require("gulp-jshint"); gulp.task("default", function() { return gulp.src(["index.js"]) .pipe(jshint()) .pipe(jshint.reporter("default")); });
  31. 31. @joel__lord YOUR FIRST RECIPE Run your gulp script 7/9/2016 32 > gulp [10:16:39] Using gulpfile ~/Documents/Projects/gulp_intro/gulpfile.js [10:16:39] Starting 'default'... index.js: line 1, col 62, Missing semicolon. 1 error [10:16:39] Finished 'default' after 28 ms
  32. 32. @joel__lord YOUR FIRST RECIPE And now, let’s remove the repetitive part of this. 7/9/2016 33 var gulp = require("gulp"); var jshint = require("gulp-jshint"); gulp.task("default", function() { gulp.watch("**/*.js", ["lint"]); }); gulp.task("lint", function() { return gulp.src(["index.js"]) .pipe(jshint()) .pipe(jshint.reporter("default")); });
  33. 33. @joel__lord YOUR FIRST RECIPE Each time you save your files… 7/9/2016 34 > gulp [10:49:51] Using gulpfile ~/Documents/Projects/gulp_intro/gulpfile.js [10:49:51] Starting 'default'... [10:49:56] Finished 'default' after 5.24 s [10:50:00] Starting 'lint'... index.js: line 1, col 62, Missing semicolon. 1 error [10:50:00] Finished 'lint' after 32 ms [10:50:06] Starting 'lint'... [10:50:06] Finished 'lint' after 5.06 ms
  34. 34. @joel__lord BEST PRACTICES In order to get the best out of Gulp, you should respect some of those best practices 7/9/2016 35
  35. 35. @joel__lord USE NPM TO MANAGE DEPENDENCIES Always add a new plugin using 7/9/2016 36 > npm install --save-dev <plugin-name>
  36. 36. @joel__lord USE NPM TO MANAGE DEPENDENCIES Keeps your packages.json file clean and up to date Makes sharing a lot easier (npm install) 7/9/2016 37
  37. 37. @joel__lord SYNC VS ASYNC Calling an array of tasks will launch all of them 7/9/2016 38 gulp.task("default", ["lint", "babel", "sass"]);
  38. 38. @joel__lord SYNC VS ASYNC You can launch them asynchronously 7/9/2016 39 gulp.task("lint", function() { gulp.src(["index.js"]) .pipe(jshint()) .pipe(jshint.reporter("default")); });
  39. 39. @joel__lord SYNC VS ASYNC But you might need them to be synchronous  Running an uglify should be done after a concatenation  Minifiers should be executed after transpilers 7/9/2016 40
  40. 40. @joel__lord SYNC VS ASYNC Returning the gulp object will cause it to be synchronous 7/9/2016 41 gulp.task("lint", function() { return gulp.src(["index.js"]) .pipe(jshint()) .pipe(jshint.reporter("default")); });
  41. 41. @joel__lord SYNC VS ASYNC Or you can use the callback function 7/9/2016 42 gulp.task("lint", function(cb) { gulp.src(["index.js"]) .pipe(jshint()) .pipe(jshint.reporter("default")); setTimeout(cb, 5000); });
  42. 42. @joel__lord COMPLEXIFYING THIS RECIPE Adding some plugins Let’s look at some real code 7/9/2016 43
  43. 43. @joel__lord THANK YOU 7/9/2016 48 Questions? Follow me on Twitter for the full slides and code samples @joel__lord ^- Yup, two underscores

×