VTS184: Gulp, task runner

VTS184: Gulp, task runner

This is the fourth lecture in cooperation with High Technical School in Novi Sad (Visoka tehnička škola strukovnih studija) held on April 26, 2018.

Meetup event: https://www.meetup.com/koderrs/events/249966347/

YouTube video: https://youtu.be/kRqu-uvlxxc

Gulp is a tool to automate repetitive tasks in everyday routine of a serious frontend developer so we can focus on more important thing like our work itself.

Gulp can help you with

— Translating Sass to CSS (using node-sass)
— Check if the coding style is right (linting)
— Optimize and compress CSS (compressed output style)
— Optimize and reduce the size of images (imagemin)
— Optimize and reduce JavaScript (uglify)
— Reload all devices with new HTML/CSS/JS/PHP (yes, plural, browser-sync)
— Output different versions of the same files (production and dev)
— To gather and convert fonts for web
— ...to repeat all mentioned as needed.

A9934ebac3d430f4b6c7b215d07081ed?s=128

Mladen Đurić

April 26, 2018
Tweet

Transcript

  1. 1.

    @MacMladen Gulp — task runner v.1 2018-04-26 ]{ Gulp TASK

    RUNNER 1 Mladen Đurić @MacMladen Viša tehnička škola strukovnih studija Novi Sad Predavaona, 26.04.2018.
  2. 2.

    @MacMladen Gulp — task runner ]{ v.1 2018-04-26 2 MLADEN

    ĐURIĆ a.k.a MacMladen $ whoami A very boring incompetent guy
  3. 3.

    @MacMladen Gulp — task runner ]{ v.1 2018-04-26 3 As

    soon as I started learning to code I was so fascinated and wanted to share what I learned. I was hardly into secondary school when I organized first computer club and gave first BASIC course. It was around 1982. In 2016 I have started a Professional Web Development School ]{oder.
  4. 6.

    @MacMladen Gulp — task runner ]{ v.1 2018-04-26 6 ]{oder

    for VTŠ students: Professional
 Development
 Summer Bootcamp …more info soon!
  5. 8.

    @MacMladen Gulp — task runner v.1 2018-04-26 ]{ 8 Gulp

    nodejs streams task runner gulp.js is an open-source JavaScript toolkit, 
 used as a streaming build system in front-end web development. It is built on Node.js and npm, used for automation of time-consuming and repetitive tasks involved in web development like minification, concatenation, cache busting, unit testing, linting, optimization, etc. gulp uses a code-over-configuration approach to define its tasks and relies on its small, single- purposed plugins to carry them out. The gulp ecosystem includes more than 300 such plugins.
  6. 9.

    @MacMladen Gulp — task runner ]{ v.1 2018-04-26 INTRODUCE YOURSELF!

    9 • Your… style weapon of choice? (gulp, grunt, npm…) • Your field? (frontend, developer) • Coding experience? (none, some, pro)
  7. 10.

    @MacMladen Gulp — task runner ]{ v.1 2018-04-26 TIMETABLE: 1.

    Why task runners 2. Task runners 3. Node environment 4. Starting with gulp 5. Copy resources 6. Compile SCSS 7. Uglify JS 8. Watch for change 9. Refresh devices 10. Gulp references 10
  8. 27.

    @MacMladen Gulp — task runner ]{ v.1 2018-04-26 GULP METHODS

    27 gulp.src(globs[, options]) gulp.dest(path[, options]) gulp.task(name [, deps, fn]) gulp.watch(glob [, opts], tasks) gulp.watch(glob [, opts, cb])
  9. 52.

    @MacMladen Gulp — task runner ]{ v.1 2018-04-26 MLADEN ĐURIĆ

    a.k.a MacMladen Professional Development School 52
  10. 54.

    @MacMladen Gulp — task runner v.1 2018-04-26 ]{ 54 Q

    & A Mladen Đurić mladen@koder.rs