Bower & Gulp Essentials tools for front-end development lunchbox @ teratotech faizmokhtar 

What is Bower & Gulp? Package manager Task runner 

Bower ● A package manager for the web. ● Develop by folks at Twitter. ● Similar to Cocoapods (iOS) or Gradle (Android). ● You can install most of the front-end libraries from Bower. ● Helps you to manage dependencies (Bootstrap, jQuery, etc) 

Why should you use Bower? ● You don’t have to worry about third-party code dependencies anymore. ○ It helps you to download them, update them and resolve their dependencies. ● You can just easily reproduce the software stack for a new project, team collaboration or whatever. 

The Downside ● If either Github or Bower Registry goes down, you can’t download or update your packages. 

Installing Initialise your bower and edit bower.json $ bower init 

Installing Install it using npm. $ npm install -g bower 

Installing bower.json { "name": "lunchbox", "version": "0.1.0", "authors": [ "Faiz Mokhtar " ], "dependencies": { "foundation": "~5.5.2", "slick-carousel": "~1.5.8" }, "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests", "libs" ] } 

Installing Install the packages $ bower install By default, will install the packages in bower_components/. 

Gulp.js ● It’s a task runner for development. ● It can do a lot of things ○ Compile SASS/ SCSS/ LESS into CSS ○ Minify CSS/ JS / JS ○ Concatenate CSSs and JSs files into one. ○ Remove unused codes ○ and many more... 

Why should you use Gulp? ● It helps you to automate the repetitive tasks during development. 

The downside ● There’s a little bit of learning curve. 

Installing Install it using npm. $ npm install -g gulp 

Installing Initialise package.json. $ npm init Need to install gulp locally too (in project). $ npm install --save-dev gulp 

Installing Finally, you’ll need to create gulpfile.js in project root. // Plugins var gulp = require('gulp'); var gulpPlugin = require(‘gulp-plugin’); // Gulp task example gulp.task(‘task-name’, function() { return gulp.src(‘source-files’) // Get source files .pipe(gulpPlugin()) // Sends it through a gulp plugin .pipe(gulp.dest(‘destination’)) // Outputs file }); gulp.task(‘watch’, function() { gulp.watch(‘files-to-watch’, [‘task-name’]); }); 

The downside ● Gulp API is easy to understand. There’s only 4 functions. ○ gulp.task - defines your task ○ gulp.src - source the files that you want to use. ○ gulp.dest - points the output folder. ○ gulp.watch- watch the files for changes. 

IT’S DEMO TIME!