Frontend asset management with BOWER AND GULP.JS
Jan 15, 2015
@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
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?
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