Leverage Bower as your package manager for the front-end assets of your CakePHP application. Define your packages once (jQuery, Bootstrap, and what not?), and let it download everything for you and check for compatibilities among them. No more committing third-party assets to your repository. And also utilizing Gulp.js, the streaming build system, for automating repetitive front-end related tasks like converting LESS to CSS, CoffeeScript to JavaScript, concatenating files, minifying them, etc with just a single command.

1. Frontend assetmanagementwith
BOWER AND GULP.JS

2. @FAHAD19
Also known as Fahad IbnayHeylaal
Workingwith CakePHP since v1.1.
Creator of @Croogo CMS (builton CakePHP)
Bower Team Member
Likes JavaScript, loves CoffeeScript
Nice guy(sic)

3. RENAN GONÇALVES
UsingCakePHP since v1.1, joined Core Team on v1.2
Developed Migrations plugin atCakeDC
Automate stuff atTrue.nl
#cakephp in freenode as renan_saddam

4. BOWER
Apackage manager for the web
http://bower.io

5. composer
gem
npm
...now bower?

6. IT'S FOR THE BROWSER

7. THINK OF PACKAGES LIKE:
jQuery
Twitter Bootstrap
Underscore.js
AngularJS

8. BUT WHY NOT JUST USE
NPM DIRECTLY?

9. LET'S TRY BOWER!

10. Installitwith npm
$npminstall--globalbower

11. JSON FILE
Expects abower.jsonfile in your projectroot.

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

13. BUT WHERE WILL IT
DOWNLOAD THE FILES?

14. ENTER .BOWERRCFILE

15. EXAMPLE .BOWERRCFILE
{
"directory":"webroot/vendors"
}
Filelocatedinthesamedirectoryasbower.json

16. Go to your appdirectory, and run:
$bowerinstall
Youwillseeallyourpackagesbeingdownloadedtowebroot/vendorsdirectory

17. QUESTIONS?
For Bower?

18. GULP
The streamingbuild system
http://gulpjs.com

19. WHY?
Automation. Mainlyfor your frontend developmenttasks.

20. HISTORY
Grunt, Gulp, Broccoli, Cabbage

21. THINK OF REPITITIVE TASKS LIKE:
CompilingLESS files (Bootstrap anyone?)
CompilingCoffeeScript
Linting
Minifyingyour assets
...and more

22. LET'S TRY GULP!

23. Installingwith NPM:
$npminit
$npminstall--save-devgulp
$npminstall--globalgulp

24. PACKAGE.JSON
Our CakePHP app now have apackage.jsonfile:
{
"title":"MyCakePHPProject",
"name":"my-cakephp-project",
"version":"0.0.1",
"devDependencies":{
"gulp":"~3.8.7"
}
}

25. GULPFILE.JSThisfilecontainsallyourGulptasks
vargulp=require('gulp');
gulp.task('default',function(){
//placecodeforyourdefaulttaskhere
});

26. DEFINING TASKSvargulp=require('gulp');
gulp.task('default',[
'css',
'js'
]);
gulp.task('css',function(){
//CompileCSS
});
gulp.task('js',function(){
//CompileJS
});

27. RUN TASKS$gulpdefault
Or for the defaulttask, just:
$gulp

28. REAL WORLD EXAMPLE WITH LESS

29. DOWNLOAD THE GULP PLUGIN FOR LESS
$npminstall--save-devgulp-less

30. GULPFILE.JS WITH LESS TASKS
varless=require('gulp-less');
gulp.task('less',function(){
gulp.src('./webroot/vendors/bootstrap/less/bootstrap.less')
.pipe(less())
.pipe(gulp.dest('./webroot/ccss'));
});

31. COMPILE TWITTER BOOTSTRAP
$gulpless
Younowhaveanewfileatwebroot/css/bootstrap.css

32. THANK YOU!
Questions?
PingusonTwitter and !@renan_saddam @fahad19