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.

Transcript

1. Using Gulp to Improve
   Your Angular Workflows
   Jennifer Bland
   

   View Slide

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

   View Slide

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
   

   View Slide

4. View Slide

5. View Slide

6. Let’s Get Started
   

   View Slide

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
   

   View Slide

8. BUNDLING
   Combing all JavaScript files into one file
   

   View Slide

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
   

   View Slide

10. MINIFICATION
    Reducing size of our bundled files
    

    View Slide

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
    

    View Slide

12. LOADING DEPENDENCIES
    Not require all gulp files
    

    View Slide

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
    

    View Slide

14. RESOLVING MINIFICATION ISSUES
    Don’t want to rewrite our code so do this instead
    

    View Slide

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’);
    

    View Slide

16. 16
    Angular & Minification
    1. npm install gulp-ng-annotate —save-dev
    2. pipe source files to $.ngAnnotate()
    3. run gulp to test
    

    View Slide

17. SOURCEMAPS
    Being able to debug concatenated and minified code
    

    View Slide

18. 18
    Sourcemaps
    1. npm install gulp-sourcemaps —save-dev
    2. $.sourcemaps.init()
    3. $.sourcemaps.write()
    4. run gulp to test
    

    View Slide

19. ES6 AND BABEL
    Use ES6 regardless of browser being used
    

    View Slide

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
    

    View Slide

21. WATCHING FOR CODE CHANGES
    Build automatically when changes occur
    

    View Slide

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
    

    View Slide

23. CODE VALIDATION
    Verify code meets our coding standards
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

26. hnps://goo.gl/mdlkkP
    

    View Slide

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

    View Slide