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
Tweet

More Decks by Jennifer Bland

Other Decks in Technology

Transcript

  1. Using Gulp to Improve
    Your Angular Workflows
    Jennifer Bland

    View full-size slide

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

    View full-size 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 full-size slide

  4. Let’s Get Started

    View full-size slide

  5. 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 full-size slide

  6. BUNDLING
    Combing all JavaScript files into one file

    View full-size slide

  7. 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 full-size slide

  8. MINIFICATION
    Reducing size of our bundled files

    View full-size slide

  9. 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 full-size slide

  10. LOADING DEPENDENCIES
    Not require all gulp files

    View full-size slide

  11. 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 full-size slide

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

    View full-size slide

  13. 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 full-size slide

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

    View full-size slide

  15. SOURCEMAPS
    Being able to debug concatenated and minified code

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. 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 full-size slide

  19. WATCHING FOR CODE CHANGES
    Build automatically when changes occur

    View full-size slide

  20. 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 full-size slide

  21. CODE VALIDATION
    Verify code meets our coding standards

    View full-size slide

  22. 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 full-size slide

  23. 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 full-size slide

  24. hnps://goo.gl/mdlkkP

    View full-size slide

  25. hnps://goo.gl/mdlkkP
    hnp://www.jenniferbland.com
    hnps://github.com/ratracegrad/
    [email protected]
    @ratracegrad

    View full-size slide