Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

What is Bower & Gulp? Package manager Task runner

Slide 3

Slide 3 text

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)

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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" ] }

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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...

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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’]); });

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

IT’S DEMO TIME!