Mixing Up the Front-end with ColdBox Elixir

Mixing Up the Front-end with ColdBox Elixir

An introduction to ColdBox Elixir, a wrapper around Gulp for easy front-end builds forked from Laravel Elixir.

Cbddee54e0016667b9bcb0fdec4ab21e?s=128

Eric Peterson

June 14, 2016
Tweet

Transcript

  1. Mixing Up the Front-end with ColdBox Elixir

  2. What this talk isn't → For people with a highly

    specific build tool / chain → For people who never start any new projects → About ES6 (ES2015), Babel, Sass, or any of the other tasks in our build chain
  3. What this talk is → Quick, simple, out-of-the-box front-end builds

    → Builds specific to ColdBox → An overview of the latest *Box product
  4. Who am I? Eric Peterson ! Utah " O.C. Tanner

    # 1 wife, 2 kids
  5. Here's the new kid:

  6. Front-end Builds → Grunt → Gulp → Webpack → NPM

    Scripts → ???
  7. None
  8. Every New Project

  9. Every New Project → Decide if you are going to

    keep your same source and destination path conventions → Create all the folders you need → Wire up your front-end build with your decided- upon conventions
  10. Every New Project → Write a crazy gulpfile.js → Bang

    your head against the wall remembering weird gulp syntax → Hope that copy and pasting your config from a previous project won't be worse
  11. Introducing ColdBox Elixir Inspired from Laravel Elixir

  12. // gulpfile.js var elixir = require( "coldbox-elixir" ); elixir( function(

    mix ) { mix.sass( "app.scss" ); } );
  13. That's it!

  14. Convention over Configuration

  15. ColdBox Elixir knows about your ColdBox project You don't have

    to specify the conventions!
  16. Default ColdBox Conventions → Javascript → /resources/assets/js → /includes/js →

    CSS → /resources/assets/css → /includes/css
  17. Standard Elixir Task Format elixir( function( mix ) { mix.styles(

    /* source filename */, /* override the destination name (and folder) */, /* override the source folder */ ); } );
  18. Yes, the source and destination folders can be overridden But

    just stick to the conventions It makes your life so much easier!
  19. Installation npm install coldbox-elixir --save-dev

  20. Boilerplate // gulpfile.js var elixir = require( "coldbox-elixir" ); elixir(

    function( mix ) { // your bulid steps here! } );
  21. Styles

  22. Styles • Combining Stylesheets elixir( function( mix ) { mix.styles(

    [ "vendor/normalize.css", "vendor/bootstrap.min.css", "app.css" ] ); // ./includes/css/all.css } );
  23. Styles • Pre-processors elixir( function( mix ) { // ./resources/sass/app.scss

    mix.sass( "app.scss" ); // OR // ./resources/less/app.less mix.less( "app.less" ); } );
  24. Styles • Pre-processors elixir( function( mix ) { mix.sass( [

    "app.scss", "bootstrap.sass" ] ); // ./includes/css/all.css } );
  25. Javascript

  26. Javascript • Concatenating Scripts elixir( function( mix ) { mix.scripts(

    [ "app.js", "extras.js" ] ); // ./includes/js/all.js } );
  27. Javascript • "Vendor" Scripts elixir( function( mix ) { mix.scripts(

    [ "./node_modules/jquery/dist/jquery.js", "bootstrap.js" ], "includes/js/vendor.js" ); // ./includes/js/vendor.js } );
  28. Javascript • Module Bundling Hang around for the "Official Extensions"

    section!
  29. Watch Mode gulp watch

  30. Asset Versioning

  31. Asset Versioning elixir( function( mix ) { mix.sass( "app.scss" )

    .scripts( [ "jquery.js", "bootstrap.js" ] ) .version( [ "css/app.css", // → "includes/build/app-16d570a7.css" "js/all.js" // → "includes/build/all-89de4a22.js" ] ); } );
  32. Asset Versioning • ColdBox Helper Functions Available in ColdBox 4.3+

    <html> <head> #elixir( "css/app.css" )# </head> <body> .... #elixir( "js/all.js" )# </body> </html>
  33. Minification in one line! gulp --production

  34. Official Extensions

  35. Official Extensions webpack browserify rollup stylus svg vue vue-2 browsersync

    typescript
  36. Webpack npm install coldbox-elixir-webpack --save-dev

  37. Webpack elixir( function( mix ) { mix.webpack( "app.js" ); }

    );
  38. Custom Webpack Config 4th argument elixir( function( mix ) {

    mix.webpack( "app.js", null, null, { module: { loaders: [ { test: /\.css$/, loader: "style!css" } ] } } ); } );
  39. Custom Webpack Config Or, picks up a webpack.config.js file in

    your project root.
  40. Webpack Config in Extensions Elixir.webpack.mergeConfig( { babel: { presets: [

    "es2015" ], plugins: [ "transform-runtime" ], }, module: { loaders: [ { test: /\.vue$/, loader: "vue" } ] } } );
  41. All of these configurations are intelligently merged together. One does

    not overwrite the other.
  42. Browserify npm install coldbox-elixir-browserify --save-dev

  43. Browserify elixir( function( mix ) { mix.browserify( "app.js" ); }

    );
  44. Browserify • Transformers elixir.config.js.browserify.transformers.push( { name: "aliasify", options: {} }

    ); elixir( function( mix ) { mix.browserify( "main.js" ); } );
  45. Rollup npm install coldbox-elixir-rollup --save-dev

  46. Rollup elixir( function( mix ) { mix.rollup( "app.js" ); }

    );
  47. Stylus npm install coldbox-elixir-stylus --save-dev

  48. Stylus elixir( function( mix ) { mix.stylus( "app.styl" ); }

    );
  49. SVG npm install coldbox-elixir-svg --save-dev

  50. SVG elixir( function( mix ) { mix.svgSpritesheet(); // creates a

    spritesheet of all the images // found in /resources/assets/svg // and saves it to includes/svg/sprite.svg // pairs well with the cbsvg module } );
  51. Vue (1.0) npm install coldbox-elixir-vue --save-dev

  52. .vue syntax <template> <div class="example">{{ msg }}</div> </template> <script> export

    default { data () { return { msg: 'Hello world!' } } } </script> <style lang="sass"> .example { color: red; } </style>
  53. Vue (1.0) var elixir = require( "coldbox-elixir" ); require( "coldbox-elixir-vue"

    ); elixir( function( mix ) { // webpack can now compile .vue files for Vue 1.* mix.webpack( "main.js" ); } );
  54. Vue (2.0) npm install coldbox-elixir-vue-2 --save-dev

  55. Vue (2.0) var elixir = require( "coldbox-elixir" ); require( "coldbox-elixir-vue-2"

    ); elixir( function( mix ) { // webpack can now compile .vue files for Vue 2.* mix.webpack( "main.js" ); } );
  56. BrowserSync

  57. BrowserSync npm install coldbox-elixir-browsersync --save-dev

  58. BrowserSync elixir( function( mix ) { mix.browserSync(); // OR specify

    your proxy server mix.browserSync( { proxy: "127.0.0.1:7777" } ); } );
  59. Live Reloading

  60. Live Reloading This is awesome for TestBox tests!

  61. mix.modules → Uses same conventions inside you modules folders (resources/assets,

    etc.) → All mix methods available in your gulpfile.js are available here. → Ignores modules without a elixir-module.js file. → Watch mode supported just like you would expect and hope.
  62. mix.modules // gulpfile.js elixir( mix => { mix.modules(); } );

    // elixir-module.js module.exports = ( mix ) => { mix.scripts( "components/**/*.js", "includes/js/app.js" ); // `modules_app/my-module/resources/assets/js/components/**/*.js` // becomes // `modules_app/my-module/includes/js/app.js` };
  63. Custom Extensions Figure it out in Gulp, once

  64. Custom Extensions var gulp = require( "gulp" ); var shell

    = require( "gulp-shell" ); var elixir = require( "coldbox-elixir" ); var Task = elixir.Task; elixir.extend( "speak", function( message ){ new Task( "speak", function(){ return gulp.src( "" ).pipe( shell( "say " + message ) ); }); }); mix.speak( "Hello World" );
  65. Custom Extensions Don't forget to check out the docs and

    the official extensions for more insight.
  66. Get Started! box coldbox create app skeleton=coldbox-templates/elixir npm install #

    or yarn install gulp
  67. What's Next? → Improvements to mix.version. → Better integration with

    Webpack → Fluent API for additional options → ExtractText → CommonsChunk
  68. What's Next Come add your own idea!

  69. Check out the docs http://coldbox-elixir.ortusbooks.com/

  70. Thank You!! elpete @_elpete ! dev.elpete.com

  71. Questions