GulpJS

How you build web-applications and JS server-side applications with GulpJS

GulpJS has in a short time managed to become the most used and appreciated build tool for development of the client-side part of web-applications. One of the reasons is stream pipes, which means that build tasks simply are put together by small build steps.

This course is built around many small practical tasks, which together gives you a good foundation for your further work as a client-side web developer.

This is what you will learn
  • Minification of stylesheets, scripts, images and html files
  • Dynamic browser reload of development web server files
Course Contents

Background and overview

A quick overview why GulpJS was developed and how the domain has developed very quickly during the last years

    Short intro to NodeJS

    Here we quickly go through Node JS and NPM, so that you can use the platform which GulpJS is based on.

    • What is NodeJS
    • Usage of the node package manager NPM
    • Understanding the package.json file

    GulpJS scripts

    Here we go through how a GulpJS script is organized, how to create build steps, handle CLI arguments and much more

    • Anatomy of a gulpjs script
    • Tasks
    • Pipes
    • Recommended project directory structure
    • Source files
    • Destination directory
    • Dependent tasks

    The sample project

    Here we go through the example project, which is used for most of the exercises

    • Directory structure
    • HTML files
    • Stylesheets
    • Javascript files
    • Short intro to Twitter Bootstrap
    • Bower dependencies

    File tasks

    We start with the most basic build steps, like copying, deletion of files and merging of files

    • Copying files to a directory
    • File globing
    • Keeping or changing the folder structure
    • Merging files
    • Deleting files and directories

    Support plugins

    There are some plugins that always should be used

    • Logging with colors
    • Empty pipe steps
    • Debug print outs between pipe steps
    • How to load all project plugins without effort
    • Running tasks in parallel or sequential and how avoid being surprised

    Development server

    Here we show step-by-step how you configurate a plugin that should start a small local web-server that serves your website. Further how you configurate that every time you save any of your source code files your browser will reload all your files automatically

      Production build

      A big part of the build process is about to reduce the sizes of the files that should be deployed. Here we go through how you do.

      • Minifications of webb pages (HTML)
      • Minification of style sheets (CSS)
      • Minification of images (PNG, JPG)
      • Minification of scripts (JS)
      Facts
      NameGulpJS
      Duration2 Days
      LevelBeginner
      AudienceWeb-applications developer
      Prerequisites Experience of programming of web-applications in HTML/CSS/JS
      Tools
      • NodeJS
      • GulpJS CLI
      Price15 000 kr + moms 15000
      Course Dates
      DatePlace
      Loading course dates...
      Same-Company Discout

      We offer a 20% discount for additional participants from the same company and at the same course date. Read more here.

      On-Site Course

      If you order an On-Site course, we will come to you and hold the course in your office. The price is determined by our price model and is based on the number of course days, number of participants and any travel and lodging.

      Read more about out price modell and term of sales here.

      Related Courses
      CourseDaysLevel
      JavaScript3 Beginner Show
      TypeScript2IntermediateShow
      NodeJS2IntermediateShow
      Angular Web App Development3Beginner Show