Frontend assetmanagementwith
BOWER AND GULP.JS
@FAHAD19
Also known as Fahad IbnayHeylaal
Workingwith CakePHP since v1.1.
Creator of @Croogo CMS (builton CakePHP)
Bower T...
RENAN GONÇALVES
UsingCakePHP since v1.1, joined Core Team on v1.2
Developed Migrations plugin atCakeDC
Automate stuff atTr...
BOWER
Apackage manager for the web
http://bower.io
composer
gem
npm
...now bower?
IT'S FOR THE BROWSER
THINK OF PACKAGES LIKE:
jQuery
Twitter Bootstrap
Underscore.js
AngularJS
BUT WHY NOT JUST USE
NPM DIRECTLY?
LET'S TRY BOWER!
Installitwith npm
$npminstall--globalbower
JSON FILE
Expects abower.jsonfile in your projectroot.
BOWER.JSON{
"name":"my-cakephp-app",
"version":"0.0.1",
"dependencies":{
"jquery":"1.9.x",
"bootstrap":"2.3.x"
}
}
BUT WHERE WILL IT
DOWNLOAD THE FILES?
ENTER .BOWERRCFILE
EXAMPLE .BOWERRCFILE
{
"directory":"webroot/vendors"
}
Filelocatedinthesamedirectoryasbower.json
Go to your appdirectory, and run:
$bowerinstall
Youwillseeallyourpackagesbeingdownloadedtowebroot/vendorsdirectory
QUESTIONS?
For Bower?
GULP
The streamingbuild system
http://gulpjs.com
WHY?
Automation. Mainlyfor your frontend developmenttasks.
HISTORY
Grunt, Gulp, Broccoli, Cabbage
THINK OF REPITITIVE TASKS LIKE:
CompilingLESS files (Bootstrap anyone?)
CompilingCoffeeScript
Linting
Minifyingyour assets...
LET'S TRY GULP!
Installingwith NPM:
$npminit
$npminstall--save-devgulp
$npminstall--globalgulp
PACKAGE.JSON
Our CakePHP app now have apackage.jsonfile:
{
"title":"MyCakePHPProject",
"name":"my-cakephp-project",
"versi...
GULPFILE.JSThisfilecontainsallyourGulptasks
vargulp=require('gulp');
gulp.task('default',function(){
//placecodeforyourdef...
DEFINING TASKSvargulp=require('gulp');
gulp.task('default',[
'css',
'js'
]);
gulp.task('css',function(){
//CompileCSS
});
...
RUN TASKS$gulpdefault
Or for the defaulttask, just:
$gulp
REAL WORLD EXAMPLE WITH LESS
DOWNLOAD THE GULP PLUGIN FOR LESS
$npminstall--save-devgulp-less
GULPFILE.JS WITH LESS TASKS
varless=require('gulp-less');
gulp.task('less',function(){
gulp.src('./webroot/vendors/bootstr...
COMPILE TWITTER BOOTSTRAP
$gulpless
Younowhaveanewfileatwebroot/css/bootstrap.css
THANK YOU!
Questions?
PingusonTwitter and !@renan_saddam @fahad19
Upcoming SlideShare
Loading in …5
×

Frontend asset management with Bower and Gulp.js

2,439 views

Published on

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.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,439
On SlideShare
0
From Embeds
0
Number of Embeds
427
Actions
Shares
0
Downloads
15
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Frontend asset management with Bower and Gulp.js

  1. 1. Frontend assetmanagementwith BOWER AND GULP.JS
  2. 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. 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. 4. BOWER Apackage manager for the web http://bower.io
  5. 5. composer gem npm ...now bower?
  6. 6. IT'S FOR THE BROWSER
  7. 7. THINK OF PACKAGES LIKE: jQuery Twitter Bootstrap Underscore.js AngularJS
  8. 8. BUT WHY NOT JUST USE NPM DIRECTLY?
  9. 9. LET'S TRY BOWER!
  10. 10. Installitwith npm $npminstall--globalbower
  11. 11. JSON FILE Expects abower.jsonfile in your projectroot.
  12. 12. BOWER.JSON{ "name":"my-cakephp-app", "version":"0.0.1", "dependencies":{ "jquery":"1.9.x", "bootstrap":"2.3.x" } }
  13. 13. BUT WHERE WILL IT DOWNLOAD THE FILES?
  14. 14. ENTER .BOWERRCFILE
  15. 15. EXAMPLE .BOWERRCFILE { "directory":"webroot/vendors" } Filelocatedinthesamedirectoryasbower.json
  16. 16. Go to your appdirectory, and run: $bowerinstall Youwillseeallyourpackagesbeingdownloadedtowebroot/vendorsdirectory
  17. 17. QUESTIONS? For Bower?
  18. 18. GULP The streamingbuild system http://gulpjs.com
  19. 19. WHY? Automation. Mainlyfor your frontend developmenttasks.
  20. 20. HISTORY Grunt, Gulp, Broccoli, Cabbage
  21. 21. THINK OF REPITITIVE TASKS LIKE: CompilingLESS files (Bootstrap anyone?) CompilingCoffeeScript Linting Minifyingyour assets ...and more
  22. 22. LET'S TRY GULP!
  23. 23. Installingwith NPM: $npminit $npminstall--save-devgulp $npminstall--globalgulp
  24. 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. 25. GULPFILE.JSThisfilecontainsallyourGulptasks vargulp=require('gulp'); gulp.task('default',function(){ //placecodeforyourdefaulttaskhere });
  26. 26. DEFINING TASKSvargulp=require('gulp'); gulp.task('default',[ 'css', 'js' ]); gulp.task('css',function(){ //CompileCSS }); gulp.task('js',function(){ //CompileJS });
  27. 27. RUN TASKS$gulpdefault Or for the defaulttask, just: $gulp
  28. 28. REAL WORLD EXAMPLE WITH LESS
  29. 29. DOWNLOAD THE GULP PLUGIN FOR LESS $npminstall--save-devgulp-less
  30. 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. 31. COMPILE TWITTER BOOTSTRAP $gulpless Younowhaveanewfileatwebroot/css/bootstrap.css
  32. 32. THANK YOU! Questions? PingusonTwitter and !@renan_saddam @fahad19

×