Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Using Gulp to Improve Your Angular Workflow

Using Gulp to Improve Your Angular Workflow

Maintaining the build process for an Angular app can be quite involved. A typical build pipeline will involve validating the source code for styling, passing unit tests and end-to-end tests, minifying, annotating, bundling, creating source maps, transpiling and more. In this seminar I will show you how to use Gulp to manage your entire Angular workflow.


Jennifer Bland

March 22, 2017


  1. Using Gulp to Improve Your Angular Workflows Jennifer Bland

  2. 2 Topics We Will Cover Bundling Validation Minification Source Maps

    ES6 Babel
  3. 3 Why Use Gulp? Manages our workflow process Chain together

    all pieces of our existing code Tool of choice for most large projects Can install globally
  4. None
  5. None
  6. Let’s Get Started

  7. 7 Installing Gulp & First Task 1. npm install gulp

    —save-dev 2. create Gulpfile.js file 3. create our first gulp task 4. run gulp to test
  8. BUNDLING Combing all JavaScript files into one file

  9. 9 Concatenating Files 1. npm install gulp-concat —save-dev 2. require

    ‘gulp-concat’ 3. add concat task in Gulpfile 4. run gulp to test
  10. MINIFICATION Reducing size of our bundled files

  11. 11 Minifying Files 1. npm install gulp-uglify —save-dev 2. require

    ‘gulp-uglify’ 3. pipe output of concat to uglify 4. run gulp to test
  12. LOADING DEPENDENCIES Not require all gulp files

  13. 13 Loading Plugins 1. npm install gulp-load-plugins —save-dev 2. require

    ‘gulp-load-plugins’ 3. replace concat with $.concat and uglify with $.uglify 4. delete dist folder 5. run gulp to test
  14. RESOLVING MINIFICATION ISSUES Don’t want to rewrite our code so

    do this instead
  15. 15 Angular & Minification var app = angular.moduel(‘gulp-demo’); func^on myCtrl(myWidget)

    { …. } app.controller(‘myCtrl’, myCtrl); app.controller(‘myCtrl’, [‘myWidget’, myCtrl]); myCtrl.$inject(‘myWidget’);
  16. 16 Angular & Minification 1. npm install gulp-ng-annotate —save-dev 2.

    pipe source files to $.ngAnnotate() 3. run gulp to test
  17. SOURCEMAPS Being able to debug concatenated and minified code

  18. 18 Sourcemaps 1. npm install gulp-sourcemaps —save-dev 2. $.sourcemaps.init() 3.

    $.sourcemaps.write() 4. run gulp to test
  19. ES6 AND BABEL Use ES6 regardless of browser being used

  20. 20 ES6 and Babel 1. npm install gulp-babel babel-preset-2015 —save-dev

    2. pipe source files to $.ngAnnotate() 3. run gulp to test
  21. WATCHING FOR CODE CHANGES Build automatically when changes occur

  22. 22 Watching for Code Changes 1. change default task to

    scripts 2. create new default task that runs scripts and watches for changes 3. save source files into a variable 4. run gulp to test
  23. CODE VALIDATION Verify code meets our coding standards

  24. 24 Code Validation 1. create .eslintrc file 2. put your

    coding standards into this file 3. nam install eslint-config-angular eslint-plugin-angular gulp-eslint —save-dev 4. add lint task 5. add lint task to default 6. run gulp to test
  25. We Are Hiring! •More than 12 MM unique visitors per

    month •More than 100MM pages viewed per month •More than 2MM followers on Facebook Tech Stack is Node, Express, Angular 2, Docker Benefits of working for a startup but financed by one of the largest media publishing companies in the world.
  26. hnps://goo.gl/mdlkkP

  27. hnps://goo.gl/mdlkkP hnp://www.jenniferbland.com hnps://github.com/ratracegrad/ ratracegrad@gmail.com @ratracegrad