ݺߣ

ݺߣShare a Scribd company logo

Automated Development Workflow with Gulp

?Download as PPTX, PDF?
?
P
plewicki

Gulp is a streaming build system that automates and enhances workflows. It uses plugins to compile Sass/Less, autoprefix CSS, run JavaScript linting, bundle files, minify assets, and more. Yeoman generates project scaffolds with preconfigured Gulp setups for tasks like minimizing, autoprefixing, and collecting static assets. Together, Gulp and Yeoman provide tools to automate common development tasks and enhance workflows.

1 of 21
Downloaded 17 times
Automated Development workflow with Gulp
Introduction Name: Kenneth Veldman Front-end Developer at Goldmund, Wyldebeast and Wunderliebe
Contents Gulp Package Managers Yeoman
What is Gulp? The streaming build system - Gulp What they say themselves: Automate and enhance your workflow. But what does it mean?
Gulp var gulp = require('gulp'); var $ = require('gulp-load-plugins')(); var browserSync = require('browser-sync'); var reload = browserSync.reload; gulp.task('styles', function () { return gulp.src('app/styles/main.scss') .pipe($.sourcemaps.init()) .pipe($.sass({ outputStyle: 'nested', // libsass doesn't support expanded yet precision: 10, includePaths: ['.'], onError: console.error.bind(console, 'Sass error:') })) .pipe($.postcss([ require('autoprefixer-core')({browsers: ['last 1 version']}) ])) .pipe($.sourcemaps.write()) .pipe(gulp.dest('.tmp/styles')) .pipe(reload({stream: true})); });
Gulp Build on Node.js. thus async in nature, but able to chain streams. Gulp itself doesn't do a whole lot, the plugin system does. Almost 1500 plugins available.
What do we use Gulp for? - Compile Sass/less - Auto-prefix css - Run jshint on javascript, fail when not passing - collect static files from html, bundle them in separate files: vendor.js, plugins.js, main.js - Minify and uglify the files you want including images! - Collect fonts from bower packages - Serve static templates with a node.js web server, so static templates can be developed separately. - And many many more things you can imagine...
Demo What does our Gulp setup do? - Save = update - Clean and build (or just build) - Collect static files to minified files
Package managers npm (from node.js) Bower
Why 2 package managers? npm is used for gulp plugins and other dependencies that are required by node.js bower is used for your requirements, like jQuery and other vendor packages.
How to install (mac example) 1. Install homebrew (yes, a package manager) 2. Install node.js (yay, free npm to boot!) through homebrew 3. Install bower through npm Yes, we have to install 2 other package managers to install bower...
Bower components - bootstrap-sass-official - jquery - modernizer
Bower install How to install a package using bower: $ bower install jquery#1.11.2 Recognizing bower packages on github is easy, look for the `bower.json` file in repos or they just tell you!
Yeoman So what is Yeoman? The web's scaffolding tool for modern webapps - Yeoman.io
Yeoman generators Yeoman uses specific generators to make a pre configured setup. These generators act as a pre-config for you project, as simple as: $ yo gulp-webapp
What does it generate? Gulp setup styles function (minimize + autoprefix) jshint for javascript html assets collector Bower packages Optionally: modernizer sass boostrap
Demo Generating our previous gulp setup with yeoman.
Available generators Yeoman themselves offer quite a bunch of generators and everything on github that has the yeoman-generator keyword will be listed on their website! See: http://yeoman.io/generators/
Making your own Generator Although there are many generators available, often times you want your own setup. Tutorial http://yeoman.io/authoring/
Advantages The advantages of using Yeoman + Gulp and various other tools is that it actually does what it says: Yeoman is a scaffolding tool that lets you generate a gulp setup. With that setup you can automate and enhance your workflow with their streaming build system.
Questions? REFRAIN = ''' %d bottles of beer on the wall, %d bottles of beer, take one down, pass it around, %d bottles of beer on the wall! ''' bottles_of_beer = 99 while bottles_of_beer > 1: print REFRAIN % (bottles_of_beer, bottles_of_beer, bottles_of_beer - 1) bottles_of_beer -= 1

More Related Content

Automated Development Workflow with Gulp

  • 2. Introduction Name: Kenneth Veldman Front-end Developer at Goldmund, Wyldebeast and Wunderliebe
  • 3. Contents Gulp Package Managers Yeoman
  • 4. What is Gulp? The streaming build system - Gulp What they say themselves: Automate and enhance your workflow. But what does it mean?
  • 5. Gulp var gulp = require('gulp'); var $ = require('gulp-load-plugins')(); var browserSync = require('browser-sync'); var reload = browserSync.reload; gulp.task('styles', function () { return gulp.src('app/styles/main.scss') .pipe($.sourcemaps.init()) .pipe($.sass({ outputStyle: 'nested', // libsass doesn't support expanded yet precision: 10, includePaths: ['.'], onError: console.error.bind(console, 'Sass error:') })) .pipe($.postcss([ require('autoprefixer-core')({browsers: ['last 1 version']}) ])) .pipe($.sourcemaps.write()) .pipe(gulp.dest('.tmp/styles')) .pipe(reload({stream: true})); });
  • 6. Gulp Build on Node.js. thus async in nature, but able to chain streams. Gulp itself doesn't do a whole lot, the plugin system does. Almost 1500 plugins available.
  • 7. What do we use Gulp for? - Compile Sass/less - Auto-prefix css - Run jshint on javascript, fail when not passing - collect static files from html, bundle them in separate files: vendor.js, plugins.js, main.js - Minify and uglify the files you want including images! - Collect fonts from bower packages - Serve static templates with a node.js web server, so static templates can be developed separately. - And many many more things you can imagine...
  • 8. Demo What does our Gulp setup do? - Save = update - Clean and build (or just build) - Collect static files to minified files
  • 9. Package managers npm (from node.js) Bower
  • 10. Why 2 package managers? npm is used for gulp plugins and other dependencies that are required by node.js bower is used for your requirements, like jQuery and other vendor packages.
  • 11. How to install (mac example) 1. Install homebrew (yes, a package manager) 2. Install node.js (yay, free npm to boot!) through homebrew 3. Install bower through npm Yes, we have to install 2 other package managers to install bower...
  • 13. Bower install How to install a package using bower: $ bower install jquery#1.11.2 Recognizing bower packages on github is easy, look for the `bower.json` file in repos or they just tell you!
  • 14. Yeoman So what is Yeoman? The web's scaffolding tool for modern webapps - Yeoman.io
  • 15. Yeoman generators Yeoman uses specific generators to make a pre configured setup. These generators act as a pre-config for you project, as simple as: $ yo gulp-webapp
  • 16. What does it generate? Gulp setup styles function (minimize + autoprefix) jshint for javascript html assets collector Bower packages Optionally: modernizer sass boostrap
  • 17. Demo Generating our previous gulp setup with yeoman.
  • 18. Available generators Yeoman themselves offer quite a bunch of generators and everything on github that has the yeoman-generator keyword will be listed on their website! See: http://yeoman.io/generators/
  • 19. Making your own Generator Although there are many generators available, often times you want your own setup. Tutorial http://yeoman.io/authoring/
  • 20. Advantages The advantages of using Yeoman + Gulp and various other tools is that it actually does what it says: Yeoman is a scaffolding tool that lets you generate a gulp setup. With that setup you can automate and enhance your workflow with their streaming build system.
  • 21. Questions? REFRAIN = ''' %d bottles of beer on the wall, %d bottles of beer, take one down, pass it around, %d bottles of beer on the wall! ''' bottles_of_beer = 99 while bottles_of_beer > 1: print REFRAIN % (bottles_of_beer, bottles_of_beer, bottles_of_beer - 1) bottles_of_beer -= 1