Fluidifiez votre industrialisation Web avec

Fluidifiez votre industrialisation Web avec

1 1


Talk on Yeoman and Gulp based on my generator-gulp-angular

On Github Swiip / yeoman-gulp

Fluidifiez votre industrialisation Web avec

Matthieu Lux

+Michael Daniel! (et bien d'autres)

What's Yeoman?

A tool

A workflow

Lots of generators

Speed. Efficiency. Simplicity.

gulp's use of streams and code-over-configuration makes for a simpler and more intuitive build.

var gulp = require('gulp');
var coffee = require('gulp-coffee');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var sourcemaps = require('gulp-sourcemaps');
var del = require('del');

var paths = {
  scripts: ['client/js/**/*.coffee', '!client/external/**/*.coffee'],
  images: 'client/img/**/*'

// Not all tasks need to use streams
// A gulpfile is just another node program and you can use all packages available on npm
gulp.task('clean', function(cb) {
  // You can use multiple globbing patterns as you would with `gulp.src`
  del(['build'], cb);

gulp.task('scripts', ['clean'], function() {
  // Minify and copy all JavaScript (except vendor scripts)
  // with sourcemaps all the way down
  return gulp.src(paths.scripts)

// Copy all static images
gulp.task('images', ['clean'], function() {
  return gulp.src(paths.images)
    // Pass in options to the task
    .pipe(imagemin({optimizationLevel: 5}))

// Rerun the task when a file changes
gulp.task('watch', function() {
  gulp.watch(paths.scripts, ['scripts']);
  gulp.watch(paths.images, ['images']);

// The default task (called when you run `gulp` from cli)
gulp.task('default', ['watch', 'scripts', 'images']);


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



  • Tags on the html file
  • Concatenate files
  • Pass them in the gulp stream
  • Give a filter to match them
  • Modify the index.html
    <!-- build:css css/combined.css -->
    <link href="css/one.css" rel="stylesheet">
    <link href="css/two.css" rel="stylesheet">
    <!-- endbuild -->
    <!-- build:js scripts/combined.js -->
    <script type="text/javascript" src="scripts/one.js"></script>
    <script type="text/javascript" src="scripts/two.js"></script>
    <!-- endbuild -->
var gulp = require('gulp'),
  useref = require('gulp-useref'),
  gulpif = require('gulp-if'),
  uglify = require('gulp-uglify'),
  minifyCss = require('gulp-minify-css');

gulp.task('html', function () {
  var assets = useref.assets();

  return gulp.src('app/*.html')
    .pipe(gulpif('*.js', uglify()))
    .pipe(gulpif('*.css', minifyCss()))
    <link rel="stylesheet" href="css/combined.css"/>
    <script src="scripts/combined.js"></script>

gulp-rev, gulp-rev-replace

  • Rename files with an hashcode
  • Rewrite occurences of filenames in HTML

gulp-minifyHtml gulp-ngHtml2js gulp-inject

  • Optimize HTML templates
  • Convert in scripts
  • Inject scripts in the HTML


  • gulp-ngAnnotate for angular injections
  • gulp-csso for CSS optimization
  • gulp-imagemin for image optimization

Development workflow

Dev server and backend?

  • Cross-origin resource sharing (CORS) :/
  • BrowserSync + Proxy!


  • Preprocessors: sass, coffee, jade...
  • Sourcemaps
  • gulp.watch


Unit tests

gulp.task('test', function() {
  var bowerDeps = wiredep({
    directory: 'app/bower_components',
    exclude: ['bootstrap-sass-official'],
    dependencies: true,
    devDependencies: true

  var testFiles = bowerDeps.js.concat([

  return gulp.src(testFiles)
      configFile: 'test/karma.conf.js',
      action: 'run'
    .on('error', function(err) {
      // Make sure failed tests cause gulp to exit non-zero
      throw err;


gulp.task('protractor-only', ['webdriver-update', 'wiredep'], function (done) {
  var testFiles = [

      configFile: 'test/protractor.conf.js',
    .on('error', function (err) {
      // Make sure failed tests cause gulp to exit non-zero
      throw err;
    .on('end', function () {
      // Close browser sync server

gulp.task('protractor', ['serve:e2e', 'protractor-only']);

Generator options


  • Angular version: 1.2, 1.3
  • jQuery: none, 1.x, 2.x, Zepto
  • Angular modules: animate, cookies, touch, sanitize
  • Resource handler: ngResource, Restangular, none
  • Router: ngRoute, UI Router, none
  • UI Framework: Bootstrap, Foundation, none
  • CSS pre-processor: Less, Sass with Ruby and Node, none


  • Bootstrap directives : UI Bootstrap, Angular Strap, none
  • JS preprocessor: CoffeeScript, TypeScript, ES6 (Traceur)
  • HTML preprocessor: Jade
  • Script loader: Require, Browserify, ES6 with Require?, none
  • Test framework: Jasmine, Mocha, Qunit