Bower, Gulp & Yeoman – an introduction

View Github Repository Open presentation in a new window

Kidde82

See all presentation from Kidde82

Bower, Gulp & Yeoman – an introduction

0 0

presentation-gulp-bower-yeoman

On Github Kidde82 / presentation-gulp-bower-yeoman

Bower, Gulp & Yeoman

an introduction

Created by Christian Persson

- Why we are using Bower, Gulp and Yeoman - This presentation will not cover making public components but how we can use it internally

Some background

Reusable/independent components

Speed up development

Angular directives

Bower components

- Build new development as reusable/independent components - Faster development - Creating Bower components - Angular Directives - All tools require NodeJs

Bower

A package manager for the web

www.bower.io - Bower is a package manager for the web - Public packages (angular, jQuery) - Install private package from git repo

Install Bower and packages

Install Bower

						
$ npm install -g bower

Install Packages

						
# Install a bower-registered package
$ bower install angular

# Install package from git repository
$ bower install git://github.com/Kidde82/presentation-bower.git

Package will be installed in the current directory

- NodeJS is required - You can set up a private registry as well

Use Bower packages

Installed packages is found in /bower_componens folder

So if you installed the angular package, this is how to reference it in your code
-

Bower package structure

- dist - bower.json - devDependencies will also be installed and need to be referenced

Gulp

Automate and enhance your workflow

www.gulp.com - Compile ts to js - Compile scss or less to css - Minifying, concatenating - Testing

Gulp Installation

Install Gulp

						
$ npm install -g gulp
-

gulpfile.js

- dependencies - default task - sass task - Add files to stream, do something with the content in the stream, then write file to disk - typescript task

Example packages

gulp-typescript - Compiles typescript to js, also create .d.ts

gulp-sass - Compiles sass files to css

gulp-uglify - Minify javascript

gulp-minify - Minify css

gulp-concat - Concatenate files

-

Workflow

Gulp watch

Automatically run test

Code coverage

Webserver with live reload

- You can create a task that only compiles and runs test on the changed files only - Code coverage treshold

Plugins

Almost 2000 plugins

Create your own plugins

-

Yeoman

Scaffolding tool for modern webapps

www.yeoman.io - Public generators (angular, react, wordpress) - Install private generators from git repo

Install Yeoman and generators

Install Yeoman

						
$ npm install -g yo

Install generator

						
$ npm install -g generator-angular
-

Use generator

Create a new folder and open it

(foldername will be the app name in this case)

						
# Notice that you remove the word "generator" when calling yo
$ yo angular

You can pass parameters

Let's say we want typescript and not javascript

						
$ yo angular --typescript
- Installs all npm dependencies - All bower dependencies - Adds all template files with correct name

Use generator

Or if you just want a controller and not a whole app

						
					$ yo angular:controller nameOfController --typescript
-

Create your own generator

Use your own custom template

In a team, everyone will use the same template

Your developing speed will increase

-

Generator structure

index.js

- prompting - writing - install - end - private methods

Demo

Time for demo!

-

Questions?

Resources

http://bower.io/http://gulpjs.com/http://yeoman.io/ -
Bower, Gulp & Yeoman an introduction Created by Christian Persson - Why we are using Bower, Gulp and Yeoman - This presentation will not cover making public components but how we can use it internally