Node, Gulp & Bower

Who, what, where, when

CLIENT SIDE vs SERVER SIDE


Server side technologies are installed on the server

E.g. PHP, ASP

Client side technologies are run on the users computer

E.g. CSS, JS

What is A Package Manager?


npm and Bower are both package managers - very similar to composer - they all tend to work in the same way

[For the following examples the package manager is going to be called 'pack']


Install a new package

 $ pack install library-name --save

Install predetermined packages

 $ pack install

Update all packages

 $ pack update library-name

Node


What is Node?


 "Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications"

It is installed on all of our dev servers and allows us to run server side Javascript. You can make apps out of it that work in real time on the server side - not client  side.

For Example

Trello is server side Javascript (updates in real time)

How Do Bozboz Use Node?


To compile Less
To run gulp & its tasks
To install components with Bower

NPM


Npm is a package manager for node - through that you can install gulp plugins and other node modules

GULP

What is Gulp?


Gulp is a task runner

It can watch files and run specified tasks based 
on their locations


For example:


Watch your scripts folder to concat and compress your *.js files
Watch your sass folder to compile and compress your *.scss
Watch an images folder and create a sprite (with sass variables)

How Do You Use Gulp?


Gulp requires 2 files to run correctly:

  • gulpfile.js  
  • package.json 

Both of these sit in the root of your project 
(next to your composer.json)

Gulp Tasks


In the gulpfile.js there are several tasks specified, which can be run from the command line:

 gulp.task('sass', function (){
    var sassFiles = gulp.src(appFiles.styles)
    .pipe(plugins.rubySass())

This is a sass task, within the function will be .pipe() methods - these pass the files and data through various plugins. Running this task is as simple as:

 gulp sass

Gulp Dependencies


In gulp, you can tell it to run various tasks before starting the current task:

 gulp.task('watch', ['sprite', 'sass'], function(){

This watch task, will run the sprite and sass 
tasks before proceeding.

Default Gulp Task


A gulp task set up with the name default will run when

 gulp

is run on the command line

This is as simple as declaring the task name and the dependencies it should run:

 gulp.task('default', ['css', 'scripts']);

A Full Gulp Task

var vendorFiles = {
    scripts: [
		basePaths.bower + 'jquery/dist/jquery.min.js',
		basePaths.bower + 'FitText.js/jquery.fittext.js'
    ]
}; 

// Allows gulp --dev to be run for a more verbose output
var isProduction = true;

if(gutil.env.dev === true){
	isProduction = false;
}

gulp.task('scripts', function(){
	gulp.src(vendorFiles.scripts.concat(appFiles.scripts))
		.pipe(plugins.concat('app.js'))
		.pipe(isProduction ? plugins.uglify() : gutil.noop())
		.pipe(plugins.size())
		.pipe(gulp.dest(paths.scripts.dest));
});

Gulp Plugins


Gulp requires node modules to be able to 
carry out its task. 

The plugins are often very small and carry out one specific task - a record of what plugins are used is stored in the package.json file located next to the gulp file

To install the plugins required, a simple command is needed:

 npm install

A full gulp file


I have written up and explained every step in the most recent Bozboz gulpfile.js



BOWER


What is Bower?


Bower is a dependency manager for front end components

It allows you to pull in assets easily and also allows you to change versions as well

 bower install luigi --save

will pull in the latest version, to get a specified one:

 bower install luigi#v1.3.0

How to UTILISE Bower


Bower is not installed on the live servers.

Any code pulled in with Bower should be compiled/compressed using gulp and moved 
into a /min folder

Compiled assets should (generally) not be committed - however, on older sites we may break this rule

The bower_assets folder should 
definitely not be committed

fURTHER rEADING


As with gulp, I have written a blog post about bower:
 

There is also one on committing libraries:

Bozboz


Setting Up

Bozboz utilise many package managers to pull in libraries. Setting up an initial site would be as follows:
Install php dependencies
$ composer install
Install gulp dependencies
$ npm install
Install front end dependencies
$ bower install
Compile all Sass, scripts and sprites
$ gulp

Node, Gulp & Bower

By Mike Street

Made with Slides.com

Node, Gulp & Bower

A presentation explaining the basics behind node, gulp and bower and how/why we use it

  • 298

More from Mike Street