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

Drupal-Nis: Good Guy Gulp

Drupal-Nis: Good Guy Gulp

Second Drupal meetup in Niš with a bit updated Gulp presentation.

Eventbrite event: https://www.eventbrite.com/e/drupal-meetup-nis-tickets-45232609954

YouTube video: (soon to be published)

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.

Mladen Đurić

May 19, 2018

More Decks by Mladen Đurić

Other Decks in Programming


  1. @MacMladen Good Guy Gulp v.2 2018-05-19 ]{ Good Guy Gulp

    TASK RUNNER 1 Mladen Đurić @MacMladen Drupal Meetup Niš Deli prostor, 19.05.2018.
  2. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 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.
  3. @MacMladen Good Guy Gulp v.2 2018-05-19 ]{ 6 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.
  4. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 INTRODUCE YOURSELF! 7

    • Your… style weapon of choice? (gulp, grunt, npm…) • Your field? (frontend, developer) • Coding experience? (none, some, pro)
  5. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 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 8
  6. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 GULP METHODS 26

    gulp.src(globs[, options]) gulp.dest(path[, options]) gulp.task(name [, deps, fn]) gulp.watch(glob [, opts], tasks) gulp.watch(glob [, opts, cb])
  7. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 GULP 4 METHODS

    27 gulp.src(globs[, options]) - Emit files matching one or more globs gulp.dest(path[, options]) - Write files to directories gulp.symlink(folder[, options]) - Write files to symlinks gulp.task([name,] fn) - Define tasks gulp.lastRun(taskName, [timeResolution]) - Timestamp of last OK run gulp.parallel(...tasks) - Run tasks in parallel gulp.series(…tasks) - Run tasks in series gulp.watch(globs[, opts][, fn]) - Do something when a file changes gulp.tree(options) - Get the tree of tasks gulp.registry([registry])- Get or set the task registry
  8. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 MLADEN ĐURIĆ a.k.a

    MacMladen Professional Development School 52