Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Eric Peterson

June 14, 2016
Tweet

More Decks by Eric Peterson

Other Decks in Programming

Transcript

  1. 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
  2. What this talk is → Quick, simple, out-of-the-box front-end builds

    → Builds specific to ColdBox → An overview of the latest *Box product
  3. 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
  4. 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
  5. Standard Elixir Task Format elixir( function( mix ) { mix.styles(

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

    just stick to the conventions It makes your life so much easier!
  7. Boilerplate // gulpfile.js var elixir = require( "coldbox-elixir" ); elixir(

    function( mix ) { // your bulid steps here! } );
  8. Styles • Combining Stylesheets elixir( function( mix ) { mix.styles(

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

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

    "app.scss", "bootstrap.sass" ] ); // ./includes/css/all.css } );
  11. Javascript • Concatenating Scripts elixir( function( mix ) { mix.scripts(

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

    [ "./node_modules/jquery/dist/jquery.js", "bootstrap.js" ], "includes/js/vendor.js" ); // ./includes/js/vendor.js } );
  13. 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" ] ); } );
  14. Asset Versioning • ColdBox Helper Functions Available in ColdBox 4.3+

    <html> <head> #elixir( "css/app.css" )# </head> <body> .... #elixir( "js/all.js" )# </body> </html>
  15. Custom Webpack Config 4th argument elixir( function( mix ) {

    mix.webpack( "app.js", null, null, { module: { loaders: [ { test: /\.css$/, loader: "style!css" } ] } } ); } );
  16. Webpack Config in Extensions Elixir.webpack.mergeConfig( { babel: { presets: [

    "es2015" ], plugins: [ "transform-runtime" ], }, module: { loaders: [ { test: /\.vue$/, loader: "vue" } ] } } );
  17. 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 } );
  18. .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>
  19. 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" ); } );
  20. 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" ); } );
  21. BrowserSync elixir( function( mix ) { mix.browserSync(); // OR specify

    your proxy server mix.browserSync( { proxy: "127.0.0.1:7777" } ); } );
  22. 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.
  23. 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` };
  24. 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" );
  25. Custom Extensions Don't forget to check out the docs and

    the official extensions for more insight.
  26. What's Next? → Improvements to mix.version. → Better integration with

    Webpack → Fluent API for additional options → ExtractText → CommonsChunk