Frontend asset management with

BOWER AND GULP.JS

@FAHAD19Also known as Fahad Ibnay HeylaalWorking with CakePHP since v1.1.Creator of @Croogo CMS (built on CakePHP)Bower Team MemberLikes JavaScript, loves CoffeeScriptNice guy (sic)

RENAN GONÇALVESUsing CakePHP since v1.1, joined Core Team on v1.2Developed Migrations plugin at CakeDCAutomate stuff at True.nl#cakephp in freenode as renan_saddam

BOWERA package manager for the web

http://bower.io

composergemnpm...now bower?

IT'S FOR THE BROWSER

THINK OF PACKAGES LIKE:jQueryTwitter BootstrapUnderscore.jsAngularJS

BUT WHY NOT JUST USENPM DIRECTLY?

LET'S TRY BOWER!

Install it with npm$ npm install --global bower

JSON FILEExpects a bower.json file in your project root.

BOWER.JSON{ "name": "my-cakephp-app", "version": "0.0.1", "dependencies": { "jquery": "1.9.x", "bootstrap": "2.3.x" }}

BUT WHERE WILL ITDOWNLOAD THE FILES?

ENTER .BOWERRC FILE

EXAMPLE .BOWERRC FILE{ "directory": "webroot/vendors"}

File located in the same directory as bower.json

Go to your app directory, and run:$ bower install

You will see all your packages being downloaded to webroot/vendors directory

QUESTIONS?For Bower?

GULPThe streaming build system

http://gulpjs.com

WHY?Automation. Mainly for your frontend development tasks.

HISTORYGrunt, Gulp, Broccoli, Cabbage

THINK OF REPITITIVE TASKS LIKE:Compiling LESS files (Bootstrap anyone?)Compiling CoffeeScriptLintingMinifying your assets...and more

LET'S TRY GULP!

Installing with NPM:$ npm init

$ npm install --save-dev gulp

$ npm install --global gulp

PACKAGE.JSONOur CakePHP app now have a package.json file:

{ "title": "My CakePHP Project", "name": "my-cakephp-project", "version": "0.0.1", "devDependencies": { "gulp": "~3.8.7" }}

GULPFILE.JSThis file contains all your Gulp tasks

var gulp = require('gulp');

gulp.task('default', function() { // place code for your default task here});

DEFINING TASKSvar gulp = require('gulp');

gulp.task('default', [ 'css', 'js']);

gulp.task('css', function() { // Compile CSS});

gulp.task('js', function() { // Compile JS});

RUN TASKS$ gulp default

Or for the default task, just:$ gulp

REAL WORLD EXAMPLE WITH LESS

DOWNLOAD THE GULP PLUGIN FOR LESS$ npm install --save-dev gulp-less

GULPFILE.JS WITH LESS TASKSvar less = require('gulp-less');

gulp.task('less', function () { gulp.src('./webroot/vendors/bootstrap/less/bootstrap.less') .pipe(less()) .pipe(gulp.dest('./webroot/ccss'));});

COMPILE TWITTER BOOTSTRAP$ gulp less

You now have a new file at webroot/css/bootstrap.css

THANK YOU!Questions?

Ping us on Twitter and !@renan_saddam @fahad19