Brunch

L'outil de build qui va te donner envie de faire du front !

Par @spyl94, très inspiré par le guide brunch de @porteneuve

 

En 2015...

 

CSS AUTOMATION

 

  • Préprocesseur
  • Autoprefixeur
  • Minification
  • Suppression des propriétés non utilisées

JAVASCRIPT AUTOMATION

  • Compresser
  • Concaténer
  • Convertir ES6 en ES5
  • Enrobage en modules

IMAGES

 BEYOND

  • Optimisation
  • Compression
  • Linters
  • Source maps
  • Configuration
  • Syncro browsers et devices

En 2016 ? 

Conversion CSS4 -> CSS3

...

Les exécuteurs de tâches génériques

 

Mais aussi avant eux : Make, Ant, Raven...

Ils sont utilisés pour builder des assets mais peuvent être utilisé pour tout et nimporte quoi !

 

L'intrus : 

 

Outil de build spécialisé dans les assets

https://github.com/brunch/brunch

Une petite star en plus ne peut pas lui faire de mal ;-)

Brunch est une pipeline.

L'importance d'une boucle de feedback ultra-rapide ( < 300 ms)

 

Brunch fait du build incrémental*.

* Le watcher ne relance que les étapes de construction nécessaires !

  • Confort de travail
  • Regarder le résultat de son travail plus que la console
  • Oublier son outil de build et se concentrer sur son appli

Convention Over Configuration

Brunch repose sur des conventions solides, réduisant la configuration au minimum vital.

Un fichier de configuration :

  • brunch-config.coffee
  • brunch-config.js

Vous utilisez déjà sans doute plus ou moins les conventions par défaut de Brunch ! Au pire, elles sont modifiables ;)

// brunch-config.coffee

module.exports = config:
  files:
    javascripts: joinTo: 'app.js'
    stylesheets: joinTo: 'app.css'

Ca fonctionne ! Et les source maps sont en cadeaux :)

Convention Over Configuration

$ npm install --save mon-module-brunch 

 

 

pour les modules aussi...

suffit à faire fonctionner la plupart des modules ! 

Exemple : on va optimiser nos images lors d'un build production

It works babe \o/ YEAY o/

$ brew install optipng jpeg  
$ npm install --save imageoptmizer-brunch
$ brunch build --production

A table

Des exemples concrets...

Des squelettes pour les besoins classiques et

 vous épargner quelques recherches !

 

// bower.json

{
  "name": "react-brunch-demo",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "flux": "~2.0.2",
    "react": "~0.13.1",
    "fetch": "~0.7.0",
    "eventEmitter": "~4.2.11"
  }
}

Démo #1 : une application React avec ES6 

 

Code : react-brunch-demo

// package.json

{
  "name": "react-brunch-demo",
  "version": "1.0.0",
  "description": "It's a demo bla bla bla.",
  "scripts": {},
  "author": "Spyl <[email protected]>",
  "license": "MIT",
  "dependencies": {
    "babel-brunch": "^5.0.0",
    "brunch": "^1.8.3",
    "stylus-brunch": "^1.8.1"
  },
  "devDependencies": {
    "fb-flo-brunch": "^1.7.22"
  }
}

On installe nos dépendances...

// brunch-config.js

exports.config = {
  paths: {
    watched: [
      'app',
      'node_modules/babel-brunch/node_modules/babel-core/browser-polyfill.min.js'
    ]
  },
  files: {
    javascripts: {
      joinTo: {
        'js/vendor.js': [
          'node_modules/babel-brunch/node_modules/babel-core/browser-polyfill.min.js',
          'bower_components/eventEmitter/EventEmitter.js',
          'bower_components/react/react.js',
          'bower_components/flux/dist/Flux.js',
          'bower_components/fetch/fetch.js'
        ],
        'js/app.js': /^app/
      }
    },
    stylesheets: {
      joinTo: 'styles/app.css'
    }
  },
  onCompile: function() {
    require('fs').appendFile('public/js/app.js', '\n\nrequire(\'js/app\');');
  }
};

On configure (un peu) brunch

// app/js/app.js

import App from './components/App';

React.render(
    <App />,
    document.getElementById("example")
);

It works !

 

// app/styles/app.styl

@import "_base"

body
    background blue
    border none

// app/assets/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles/app.css">
    <title>React demo with brunch and babel</title>
  </head>
  <body>
    <div id="example"></div>
    <script src="js/vendor.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

import React from 'react';

Note :

 

En effet, Bower n'expose pas de modules, mais directement des variables globales... :-(

On a pas eu besoin de faire :

C'est l'un des seul défaut de Brunch, pas encore d'interface avec npm (type browserify/webpack) mais c'est en cours !

 

 

Du coup pas de shims de modules noyau non plus d'où l'utilisation d'EventEmitter plutôt qu'un simple require('events') !

contrairement à un module strict !

Ce qu'on a pas vu :

 

  • Les tests unitaires : pas encore essayé mais sans doute inférieur vis à vis des concurents.

Production ready ?

On l'utilise pour CapCollectif-SF2  et CapCollectif-DeploymentTool 

Jetez donc un coup d'oeil au code ;)

Merci  \o/