Post on 15-Apr-2017
Mixing Up the Front-end with ColdBox Elixir
What this talk isn't4 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
What this talk is4 Quick, simple, out-of-the-box front-end builds
4 Builds specific to ColdBox
4 An overview of the latest *Box product
Other Session Right Now4 AWS Lambda — what, why, when, how?
Box Room
Who am I?Eric Peterson
! Utah
" O.C. Tanner
# 1 wife, 1 kid
Front-end Builds
4 Grunt
4 Gulp
4 Webpack
4 NPM Scripts
4 ???
Every New Project
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
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
// gulpfile.js
var elixir = require( "coldbox-elixir" );
elixir( function( mix ){ mix.sass( "app.scss" );} );
That's it!
Convention over Configuration
ColdBox Elixir knows about your ColdBox project
You don't have to specify the conventions!
Default ColdBox Conventions4 Javascript
4 /resources/assets/js => /includes/js
4 CSS
4 /resources/assets/css => /includes/css
Standard Elixir Task Format
elixir( function( mix ){ mix.styles( /* source filename */, /* override the destination folder */, /* override the source folder */ );} );
Yes, the source and destination folders can be overridden
But just stick to the conventions
It makes your life so much easier!
Styles
Styles • Pre-processors
elixir( function( mix ){ // ./resources/sass/app.scss mix.sass( "app.scss" ); // OR // ./resources/less/app.less mix.less( "app.less" );} );
Styles • Pre-processors
elixir( function( mix ){ mix.sass( [ "app.scss", "bootstrap.sass" ] ); // ./includes/css/app.css} );
Styles • Combining Stylesheets
elixir( function( mix ){ mix.styles( [ "vendor/normalize.css", "vendor/bootstrap.min.css", "app.css" ] ); // ./includes/css/all.css} );
Javascript
Javascript • Concatenating Scripts
elixir( function( mix ){ mix.scripts( [ "./includes/js/jquery.js", "bootstrap.js" ] ); // ./includes/js/all.js} );
Javascript • ES6 Transpiling
elixir( function( mix ){ // ./resources/js/app.js mix.babel( "app.js" ); // ./includes/js/app.js} );
Javascript • Module Bundling
elixir( function( mix ){ mix.browserify( "app.js" );} );
Watch Mode
gulp watch
Asset Versioning
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" ] );} );
Asset Versioning • ColdBox Helper Functions
<html> <head> #elixir( "css/all.css" )# </head> <body> ....
#elixir( "js/all.js" )# </body></html>
Minification in one line!gulp --production
Live Reloading
Live Reloading
elixir( function( mix ){ mix.browserSync(); // OR specify your proxy server mix.browserSync( { proxy: "127.0.0.1:7777" } );} );
Live Reloading
Live ReloadingThis is awesome for TestBox tests!
Custom ExtensionsFigure it out in Gulp, once
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" );
Get Started!box coldbox create app skeleton=coldbox-templates/elixirnpm installgulp
Demo
Check out the docshttp://coldbox-elixir.ortusbooks.com/
Other Sessions at dev.Objective()
CFML Sessions for DummiesWednesday3:00 PM to 4:00 PM
Live Testing a Legacy AppThursday1:45 PM to 2:45 PM
Thank You!! elpete
@_elpete
! dev.elpete.com