SlideShare a Scribd company logo
1 of 32
Download to read offline
Frontend assetmanagementwith
BOWER AND GULP.JS
@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)
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
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
...and more
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",
"version":"0.0.1",
"devDependencies":{
"gulp":"~3.8.7"
}
}
GULPFILE.JSThisfilecontainsallyourGulptasks
vargulp=require('gulp');
gulp.task('default',function(){
//placecodeforyourdefaulttaskhere
});
DEFINING TASKSvargulp=require('gulp');
gulp.task('default',[
'css',
'js'
]);
gulp.task('css',function(){
//CompileCSS
});
gulp.task('js',function(){
//CompileJS
});
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/bootstrap/less/bootstrap.less')
.pipe(less())
.pipe(gulp.dest('./webroot/ccss'));
});
COMPILE TWITTER BOOTSTRAP
$gulpless
Younowhaveanewfileatwebroot/css/bootstrap.css
THANK YOU!
Questions?
PingusonTwitter and !@renan_saddam @fahad19

More Related Content

What's hot

Architecture & Workflow of Modern Web Apps
Architecture & Workflow of Modern Web AppsArchitecture & Workflow of Modern Web Apps
Architecture & Workflow of Modern Web Apps
Rasheed Waraich
 

What's hot (20)

Efficient development workflows with composer
Efficient development workflows with composerEfficient development workflows with composer
Efficient development workflows with composer
 
Bring Your Web App to the Next Level. Wprowadzenie do Progressive Web App
Bring Your Web App to the Next Level. Wprowadzenie do Progressive Web AppBring Your Web App to the Next Level. Wprowadzenie do Progressive Web App
Bring Your Web App to the Next Level. Wprowadzenie do Progressive Web App
 
Architecture & Workflow of Modern Web Apps
Architecture & Workflow of Modern Web AppsArchitecture & Workflow of Modern Web Apps
Architecture & Workflow of Modern Web Apps
 
Efficient development workflows with composer
Efficient development workflows with composerEfficient development workflows with composer
Efficient development workflows with composer
 
Laravel Dusk
Laravel DuskLaravel Dusk
Laravel Dusk
 
Drupal + composer = new love !?
Drupal + composer = new love !?Drupal + composer = new love !?
Drupal + composer = new love !?
 
High Productivity Web Development Workflow
High Productivity Web Development WorkflowHigh Productivity Web Development Workflow
High Productivity Web Development Workflow
 
DevDay 2018 - Blazor
DevDay 2018 - BlazorDevDay 2018 - Blazor
DevDay 2018 - Blazor
 
Handle the error
Handle the errorHandle the error
Handle the error
 
Yeoman
YeomanYeoman
Yeoman
 
How I built web services in CakePHP
How I built web services in CakePHPHow I built web services in CakePHP
How I built web services in CakePHP
 
Live development & tools
Live development & toolsLive development & tools
Live development & tools
 
PHP on Google App Engine
PHP on Google App EnginePHP on Google App Engine
PHP on Google App Engine
 
GlotPress aka translate.wordpress.org
GlotPress aka translate.wordpress.orgGlotPress aka translate.wordpress.org
GlotPress aka translate.wordpress.org
 
Nürnberg WooCommerce Talk - 11/24/16
Nürnberg WooCommerce Talk - 11/24/16Nürnberg WooCommerce Talk - 11/24/16
Nürnberg WooCommerce Talk - 11/24/16
 
iOS Developers Conference-iOS Automation with Cucumber, Appium and Saucelabs
iOS Developers Conference-iOS Automation with Cucumber, Appium and SaucelabsiOS Developers Conference-iOS Automation with Cucumber, Appium and Saucelabs
iOS Developers Conference-iOS Automation with Cucumber, Appium and Saucelabs
 
Getting to Done on the Command Line
Getting to Done on the Command LineGetting to Done on the Command Line
Getting to Done on the Command Line
 
Building plugins like a pro
Building plugins like a proBuilding plugins like a pro
Building plugins like a pro
 
Getting started with .net on openSUSE (asp.net with c#)
Getting started with .net on openSUSE  (asp.net with c#)Getting started with .net on openSUSE  (asp.net with c#)
Getting started with .net on openSUSE (asp.net with c#)
 
ICONUK 2015 - Gradle Up!
ICONUK 2015 - Gradle Up!ICONUK 2015 - Gradle Up!
ICONUK 2015 - Gradle Up!
 

Viewers also liked

Viewers also liked (6)

Managing packages with Bower and NuGet in ASP.NET Core
Managing packages with Bower and NuGet in ASP.NET CoreManaging packages with Bower and NuGet in ASP.NET Core
Managing packages with Bower and NuGet in ASP.NET Core
 
Async navigation with a lightweight ES6 framework
Async navigation with a lightweight ES6 frameworkAsync navigation with a lightweight ES6 framework
Async navigation with a lightweight ES6 framework
 
Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
Optimising Your Front End Workflow With Symfony, Twig, Bower and GulpOptimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
 
Drupal 8: frontend development
Drupal 8: frontend developmentDrupal 8: frontend development
Drupal 8: frontend development
 
Best Practice Site Architecture in Drupal 8
Best Practice Site Architecture in Drupal 8Best Practice Site Architecture in Drupal 8
Best Practice Site Architecture in Drupal 8
 
Development Workflow Tools for Open-Source PHP Libraries
Development Workflow Tools for Open-Source PHP LibrariesDevelopment Workflow Tools for Open-Source PHP Libraries
Development Workflow Tools for Open-Source PHP Libraries
 

Similar to Frontend asset management with Bower and Gulp.js

Grunt, Gulp & fabs: Build Systems and Development-Workflow for Modern Web-App...
Grunt, Gulp & fabs: Build Systems and Development-Workflow for Modern Web-App...Grunt, Gulp & fabs: Build Systems and Development-Workflow for Modern Web-App...
Grunt, Gulp & fabs: Build Systems and Development-Workflow for Modern Web-App...
Philipp Burgmer
 
North American Collaboration Summit 2018 - SharePoint Framework, Angular and ...
North American Collaboration Summit 2018 - SharePoint Framework, Angular and ...North American Collaboration Summit 2018 - SharePoint Framework, Angular and ...
North American Collaboration Summit 2018 - SharePoint Framework, Angular and ...
Sébastien Levert
 
North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...
North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...
North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...
Sébastien Levert
 

Similar to Frontend asset management with Bower and Gulp.js (20)

Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
 
Grunt, Gulp & fabs: Build Systems and Development-Workflow for Modern Web-App...
Grunt, Gulp & fabs: Build Systems and Development-Workflow for Modern Web-App...Grunt, Gulp & fabs: Build Systems and Development-Workflow for Modern Web-App...
Grunt, Gulp & fabs: Build Systems and Development-Workflow for Modern Web-App...
 
Modern Web Application Development Workflow - EclipseCon US 2014
Modern Web Application Development Workflow - EclipseCon US 2014Modern Web Application Development Workflow - EclipseCon US 2014
Modern Web Application Development Workflow - EclipseCon US 2014
 
Testing all your code through HipChat in Docker
Testing all your code through HipChat in DockerTesting all your code through HipChat in Docker
Testing all your code through HipChat in Docker
 
Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014
 
North American Collaboration Summit 2018 - SharePoint Framework, Angular and ...
North American Collaboration Summit 2018 - SharePoint Framework, Angular and ...North American Collaboration Summit 2018 - SharePoint Framework, Angular and ...
North American Collaboration Summit 2018 - SharePoint Framework, Angular and ...
 
North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...
North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...
North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...
 
How to develop reusable components with Babel and Rollup.js
How to develop reusable components with Babel and Rollup.jsHow to develop reusable components with Babel and Rollup.js
How to develop reusable components with Babel and Rollup.js
 
Laravel Forge: Hello World to Hello Production
Laravel Forge: Hello World to Hello ProductionLaravel Forge: Hello World to Hello Production
Laravel Forge: Hello World to Hello Production
 
Cake Php Consultant
Cake Php ConsultantCake Php Consultant
Cake Php Consultant
 
Modern JavaScript Talk
Modern JavaScript TalkModern JavaScript Talk
Modern JavaScript Talk
 
ZendCon 2015 - Laravel Forge: Hello World to Hello Production
ZendCon 2015 - Laravel Forge: Hello World to Hello ProductionZendCon 2015 - Laravel Forge: Hello World to Hello Production
ZendCon 2015 - Laravel Forge: Hello World to Hello Production
 
Devops Boise - Israel Shirk - Pragmatic Migration to Infrastructure As Code
Devops Boise - Israel Shirk - Pragmatic Migration to Infrastructure As CodeDevops Boise - Israel Shirk - Pragmatic Migration to Infrastructure As Code
Devops Boise - Israel Shirk - Pragmatic Migration to Infrastructure As Code
 
Everything about flutter web development
Everything about flutter web developmentEverything about flutter web development
Everything about flutter web development
 
Exploring pwa for shopware
Exploring pwa for shopwareExploring pwa for shopware
Exploring pwa for shopware
 
Django simplified : by weever mbakaya
Django simplified : by weever mbakayaDjango simplified : by weever mbakaya
Django simplified : by weever mbakaya
 
Laravel Poznań Meetup #12 - "Speed up web API with Laravel and Swoole using ...
 Laravel Poznań Meetup #12 - "Speed up web API with Laravel and Swoole using ... Laravel Poznań Meetup #12 - "Speed up web API with Laravel and Swoole using ...
Laravel Poznań Meetup #12 - "Speed up web API with Laravel and Swoole using ...
 
Speed up web API with Laravel and Swoole using Docker
Speed up web API with Laravel and Swoole using DockerSpeed up web API with Laravel and Swoole using Docker
Speed up web API with Laravel and Swoole using Docker
 
An Introduction to Cake PHP
An Introduction to Cake PHPAn Introduction to Cake PHP
An Introduction to Cake PHP
 
Laravel Forge: Hello World to Hello Production
Laravel Forge: Hello World to Hello ProductionLaravel Forge: Hello World to Hello Production
Laravel Forge: Hello World to Hello Production
 

Recently uploaded

Recently uploaded (20)

Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering Teams
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
THE BEST IPTV in GERMANY for 2024: IPTVreel
THE BEST IPTV in  GERMANY for 2024: IPTVreelTHE BEST IPTV in  GERMANY for 2024: IPTVreel
THE BEST IPTV in GERMANY for 2024: IPTVreel
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through Observability
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 

Frontend asset management with Bower and Gulp.js