ITB2016 - Mixing up the front end with ColdBox elixir
0 likes319 views
The document presents a talk on using ColdBox Elixir for front-end builds, emphasizing its ease of use compared to traditional build tools like Grunt and Gulp. It outlines the standard conventions supported by ColdBox Elixir, which simplifies tasks such as compiling Sass, bundling JavaScript, and live reloading. Additional topics include asset versioning and custom extensions, along with encouragement to explore documentation and other related sessions.
![Styles • Pre-processors
elixir( function( mix ){
mix.sass( [ "app.scss", "bootstrap.sass" ] );
// ./includes/css/app.css
} );](https://image.slidesharecdn.com/mixingupthefront-endwithcoldboxelixir-160620170531/85/ITB2016-Mixing-up-the-front-end-with-ColdBox-elixir-21-320.jpg)
![Styles • Combining Stylesheets
elixir( function( mix ){
mix.styles( [
"vendor/normalize.css",
"vendor/bootstrap.min.css",
"app.css"
] );
// ./includes/css/all.css
} );](https://image.slidesharecdn.com/mixingupthefront-endwithcoldboxelixir-160620170531/85/ITB2016-Mixing-up-the-front-end-with-ColdBox-elixir-22-320.jpg)
![Javascript • Concatenating Scripts
elixir( function( mix ){
mix.scripts( [
"./includes/js/jquery.js",
"bootstrap.js"
] );
// ./includes/js/all.js
} );](https://image.slidesharecdn.com/mixingupthefront-endwithcoldboxelixir-160620170531/85/ITB2016-Mixing-up-the-front-end-with-ColdBox-elixir-24-320.jpg)
![Asset Versioning
elixir( function( mix ){
mix.sass( "app.scss" )
.scripts( [
"jquery.js",
"bootstrap.js"
] )
.version( [
"css/all.css", // => "includes/build/all-16d570a7.css"
"js/all.js" // => "includes/build/all-89de4a22.js"
] );
} );](https://image.slidesharecdn.com/mixingupthefront-endwithcoldboxelixir-160620170531/85/ITB2016-Mixing-up-the-front-end-with-ColdBox-elixir-29-320.jpg)
ITB2016 - Mixing up the front end with ColdBox elixir
- 1. Mixing Up the Front-end with ColdBox Elixir
- 2. What this talk isn't 4 For people with a highly specific build tool / chain 4 For people who never start any new projects 4 About ES6, Babel, Sass, or any of the other tasks in our build chain
- 3. What this talk is 4 Quick, simple, out-of-the-box front-end builds 4 Builds specific to ColdBox 4 An overview of the latest *Box product
- 4. Other Session Right Now 4 AWS Lambda — what, why, when, how? Box Room
- 5. Who am I? Eric Peterson ! Utah " O.C. Tanner # 1 wife, 1 kid
- 6. Front-end Builds 4 Grunt 4 Gulp 4 Webpack 4 NPM Scripts 4 ???
- 9. Every New Project 4 Decide if you are going to keep your same source and destination path conventions 4 Create all the folders you need 4 Wire up your front-end build with your decided- upon conventions
- 10. Every New Project 4 Write a crazy gulpfile.js 4 Bang your head against the wall remembering weird gulp syntax 4 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!
- 15. ColdBox Elixir knows about your ColdBox project You don't have to specify the conventions!
- 16. Default ColdBox Conventions 4 Javascript 4 /resources/assets/js => /includes/js 4 CSS 4 /resources/assets/css => /includes/css
- 17. Standard Elixir Task Format elixir( function( mix ){ mix.styles( /* source filename */, /* override the destination 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. Styles
- 20. Styles • Pre-processors elixir( function( mix ){ // ./resources/sass/app.scss mix.sass( "app.scss" ); // OR // ./resources/less/app.less mix.less( "app.less" ); } );
- 21. Styles • Pre-processors elixir( function( mix ){ mix.sass( [ "app.scss", "bootstrap.sass" ] ); // ./includes/css/app.css } );
- 22. Styles • Combining Stylesheets elixir( function( mix ){ mix.styles( [ "vendor/normalize.css", "vendor/bootstrap.min.css", "app.css" ] ); // ./includes/css/all.css } );
- 23. Javascript
- 24. Javascript • Concatenating Scripts elixir( function( mix ){ mix.scripts( [ "./includes/js/jquery.js", "bootstrap.js" ] ); // ./includes/js/all.js } );
- 25. Javascript • ES6 Transpiling elixir( function( mix ){ // ./resources/js/app.js mix.babel( "app.js" ); // ./includes/js/app.js } );
- 26. Javascript • Module Bundling elixir( function( mix ){ mix.browserify( "app.js" ); } );
- 28. Asset Versioning
- 29. Asset Versioning elixir( function( mix ){ mix.sass( "app.scss" ) .scripts( [ "jquery.js", "bootstrap.js" ] ) .version( [ "css/all.css", // => "includes/build/all-16d570a7.css" "js/all.js" // => "includes/build/all-89de4a22.js" ] ); } );
- 30. Asset Versioning • ColdBox Helper Functions <html> <head> #elixir( "css/all.css" )# </head> <body> .... #elixir( "js/all.js" )# </body> </html>
- 31. Minification in one line! gulp --production
- 32. Live Reloading
- 33. Live Reloading elixir( function( mix ){ mix.browserSync(); // OR specify your proxy server mix.browserSync( { proxy: "127.0.0.1:7777" } ); } );
- 34. Live Reloading
- 35. Live Reloading This is awesome for TestBox tests!
- 36. Custom Extensions Figure it out in Gulp, once
- 37. 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" );
- 38. Get Started! box coldbox create app skeleton=coldbox-templates/elixir npm install gulp
- 39. Demo
- 40. Check out the docs http://coldbox-elixir.ortusbooks.com/
- 41. Other Sessions at dev.Objective() CFML Sessions for Dummies Wednesday 3:00 PM to 4:00 PM Live Testing a Legacy App Thursday 1:45 PM to 2:45 PM