Mixing Up the Front-end with ColdBox Elixir

Slide 1

Slide 1 text

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Here's the new kid:

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Every New Project

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Introducing ColdBox Elixir Inspired from Laravel Elixir

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

That's it!

Slide 14

Slide 14 text

Convention over Conﬁguration

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Standard Elixir Task Format elixir( function( mix ) { mix.styles( /* source filename */, /* override the destination name (and folder) */, /* override the source folder */ ); } );

Slide 18

Slide 18 text

Yes, the source and destination folders can be overridden But just stick to the conventions It makes your life so much easier!

Slide 19

Slide 19 text

Installation npm install coldbox-elixir --save-dev

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Styles

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Javascript

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Watch Mode gulp watch

Slide 30

Slide 30 text

Asset Versioning

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Miniﬁcation in one line! gulp --production

Slide 34

Slide 34 text

Ofﬁcial Extensions

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

.vue syntax

export default { data () { return { msg: 'Hello world!' } } } .example { color: red; }

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

BrowserSync

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Live Reloading

Slide 60

Slide 60 text

Live Reloading This is awesome for TestBox tests!

Slide 61

Slide 61 text

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.

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

Custom Extensions Figure it out in Gulp, once

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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