Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Frontend asset management with Bower and Gulp.js

2,825 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
  • Be the first to comment

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

×