Save 37% off PRO during our Black Friday Sale! »

Chocolate-Covered Vegetables: Tasty Workflows with Broccoli

Chocolate-Covered Vegetables: Tasty Workflows with Broccoli

Arguably, one of the best trends in software is that building it requires less and less overhead. While once developers used punch cards to perform even the most basic of mathematical calculations, we can now make changes to live web sites in a browser and see the results instantly. In this session, you'll learn how to use Broccoli, a blazingly-fast new asset pipeline tool, to dramatically cut down the time it takes to build for the web. We'll also explore other tools and methods that work well with Broccoli, and build the web workflow you've always hungered for.

Af7acd01448753af3dfd648c3f5ea287?s=128

timgthomas

March 02, 2015
Tweet

Transcript

  1. Chocolate-Covered Vegetables TASTY WORKFLOWS WITH BROCCOLI

  2. TIM G. THOMAS @timgthomas timgthomas.com Avention.com

  3. SPONSORS

  4. BROCCOLI

  5. BROCCOLI Broccoli  <files>  <files>  › ›

  6. BROCCOLI @jo_liss github.com/broccolijs broccolijs.com

  7. WHY BROCCOLI Fast Chainable

  8. WHAT’S DIFFERENT? Trees “Incremental” builds

  9. GETTING STARTED

  10. GETTING STARTED > npm install broccoli-cli -g > npm install

    broccoli
  11. SETUP Brocfile.js  Terminal  /app 

  12. USE

  13. USE > broccoli serve :4200  /app  ›

  14. USE > broccoli build <folder> /dist  /app  ›

  15. THE BASICS

  16. THE BASICS module.exports = ‘app’;

  17. INSTALLING PLUGINS > npm install broccoli-[plugin] --save

  18. USING PLUGINS var doSomething = require(‘broccoli-<plugin>’); var app = ‘app’;

    app = doSomething(app); module.exports = app;
  19. CHAINING PLUGINS var doSomething = require(‘...’), doSomethingElse = require(‘...’); var

    app = ‘app’; app = doSomething(app); app = doSomethingElse(app); module.exports = app;
  20. DEMO: THE BASICS

  21. ADVANCED PLUGINS

  22. “MERGE-TREES” var mergeTrees = require('broccoli-merge-trees'); module.exports = mergeTrees([ 'app', 'test'

    ]); /test  /dist  /app  › +
  23. “ENV” var env = require('broccoli-env').getEnv(); if (env === 'production') {

    ... }
  24. “ENV” > BROCCOLI_ENV = ‘development’ > broccoli build <target>

  25. “CONCAT” var concat = require('broccoli-concat'); module.exports = concat('js', { inputFiles:

    [ '**/*.js' ] }); app.js  scripts.js  vendor.js  › +
  26. PLUGINS broccoliplugins.com

  27. GRUNT-BROCCOLI

  28. GRUNT-BROCCOLI module.exports = function(grunt) { grunt.initConfig({ broccoli: { dev: {

    config: 'Brocfile.js' } } }); // ... };
  29. GRUNT-BROCCOLI > grunt broccoli:<target>:serve :4200  /app  ›

  30. DEMO: GRUNT-BROCCOLI

  31. WHEN THINGS GO WRONG

  32. WHEN THINGS GO WRONG /app  /dist  ›

  33. WHEN THINGS GO WRONG /tmp  /dist  /app 

    › ›
  34. DEMO: WHEN THINGS GO WRONG

  35. LEARNING MORE

  36. LEARNING MORE bit.ly/prdc-broccoli-blog bit.ly/prdc-broccoli-slides broccolijs.com broccoliplugins.com

  37. Thanks! @TIMGTHOMAS