Mixing Up the Front-end with ColdBox Elixir

What this talk isn't → For people with a highly
speciﬁc 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

What this talk is → Quick, simple, out-of-the-box front-end builds
→ Builds speciﬁc to ColdBox → An overview of the latest *Box product

Who am I? Eric Peterson ! Utah " O.C. Tanner
# 1 wife, 2 kids

Here's the new kid:

Front-end Builds → Grunt → Gulp → Webpack → NPM
Scripts → ???

Every New Project

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

Every New Project → Write a crazy gulpfile.js → Bang
your head against the wall remembering weird gulp syntax → Hope that copy and pasting your conﬁg from a previous project won't be worse

Introducing ColdBox Elixir Inspired from Laravel Elixir

// gulpfile.js var elixir = require( "coldbox-elixir" ); elixir( function(
mix ) { mix.sass( "app.scss" ); } );

That's it!

Convention over Conﬁguration

ColdBox Elixir knows about your ColdBox project You don't have
to specify the conventions!

Default ColdBox Conventions → Javascript → /resources/assets/js → /includes/js →
CSS → /resources/assets/css → /includes/css

Standard Elixir Task Format elixir( function( mix ) { mix.styles(
/* source filename */, /* override the destination name (and 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!

Installation npm install coldbox-elixir --save-dev

Boilerplate // gulpfile.js var elixir = require( "coldbox-elixir" ); elixir(
function( mix ) { // your bulid steps here! } );

Styles

Styles • Combining Stylesheets elixir( function( mix ) { mix.styles(
[ "vendor/normalize.css", "vendor/bootstrap.min.css", "app.css" ] ); // ./includes/css/all.css } );

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/all.css } );

Javascript

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

Javascript • "Vendor" Scripts elixir( function( mix ) { mix.scripts(
[ "./node_modules/jquery/dist/jquery.js", "bootstrap.js" ], "includes/js/vendor.js" ); // ./includes/js/vendor.js } );

Javascript • Module Bundling Hang around for the "Ofﬁcial Extensions"
section!

Watch Mode gulp watch

Asset Versioning

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" ] ); } );

Asset Versioning • ColdBox Helper Functions Available in ColdBox 4.3+
<html> <head> #elixir( "css/app.css" )# </head> <body> .... #elixir( "js/all.js" )# </body> </html>

Miniﬁcation in one line! gulp --production

Ofﬁcial Extensions

Ofﬁcial Extensions webpack browserify rollup stylus svg vue vue-2 browsersync
typescript

Webpack npm install coldbox-elixir-webpack --save-dev

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

Custom Webpack Conﬁg 4th argument elixir( function( mix ) {
mix.webpack( "app.js", null, null, { module: { loaders: [ { test: /\.css$/, loader: "style!css" } ] } } ); } );

Custom Webpack Conﬁg Or, picks up a webpack.config.js ﬁle in
your project root.

Webpack Conﬁg in Extensions Elixir.webpack.mergeConfig( { babel: { presets: [
"es2015" ], plugins: [ "transform-runtime" ], }, module: { loaders: [ { test: /\.vue$/, loader: "vue" } ] } } );

All of these conﬁgurations are intelligently merged together. One does
not overwrite the other.

Browserify npm install coldbox-elixir-browserify --save-dev

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

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

Rollup npm install coldbox-elixir-rollup --save-dev

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

Stylus npm install coldbox-elixir-stylus --save-dev

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

SVG npm install coldbox-elixir-svg --save-dev

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 } );

Vue (1.0) npm install coldbox-elixir-vue --save-dev

.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>

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" ); } );

Vue (2.0) npm install coldbox-elixir-vue-2 --save-dev

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" ); } );

BrowserSync

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

BrowserSync elixir( function( mix ) { mix.browserSync(); // OR specify
your proxy server mix.browserSync( { proxy: "127.0.0.1:7777" } ); } );

Live Reloading

Live Reloading This is awesome for TestBox tests!

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 ﬁle. → Watch mode supported just like you would expect and hope.

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` };

Custom Extensions Figure 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" );

Custom Extensions Don't forget to check out the docs and
the ofﬁcial extensions for more insight.

Get Started! box coldbox create app skeleton=coldbox-templates/elixir npm install #
or yarn install gulp

What's Next? → Improvements to mix.version. → Better integration with
Webpack → Fluent API for additional options → ExtractText → CommonsChunk

What's Next Come add your own idea!

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

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

Questions

Mixing Up the Front-end with ColdBox Elixir

Mixing Up the Front-end with ColdBox Elixir

More Decks by Eric Peterson

Other Decks in Programming

Featured

Transcript