How to install NodeJs, Gulp and Bower under *ubuntu (briefly)

This article is more of a necessity than a detailed guide on Node, Gulp, Bower, and NPM. The next few articles will touch on layout and front-end workflows, and lately, I’ve been increasingly using these tools to simplify and optimize the development process.

Brief overview:
Gulp — a project build tool written in Node.js
Bower — a package manager for web frontend, also built on Node.js
Node.js — a platform based on the V8 engine (which translates JavaScript into machine code)
NPM — the package manager for Node.js (Gulp and Bower are installed as its packages)

So, what do we ultimately need? — a working installation of Gulp and Bower. These will help us boost our productivity in web development.

To do this, we need to install Node.js and NPM. Let’s go.

Installation

Install NodeJs:

$ sudo apt-get install nodejs

Install the NPM package manager:

$ sudo apt-get install npm

Not sure how it works on Windows, but on Ubuntu it’s super easy 🙂 No need to download anything manually. Just enter the command, and voilà — it’s ready.

Install Gulp:

$ sudo npm install gulp -g

This installs Gulp globally, giving you access to the Gulp CLI (i.e., allowing you to work with it via terminal/console)

Install Bower:

$ sudo npm install bower -g

Usage

You can use both Gulp and Bower via the terminal to install, update, or remove packages. However, in my experience, it’s easier to prepare a template file and copy it into each project, adjusting the package list as needed.

Gulp

Currently, my package.json file for Gulp looks like this:

{
"devDependencies": {
"bower": "*",

"gulp": "*",
"gulp-sass": "*",
"gulp-minify-css": "*",
"gulp-concat": "*",
"gulp-uglify": "*",

"fs": "*",
"gulp-header": "*"
}
}

I use these packages for WordPress theme development.

The gulpfile.js contains the following code:

var fs			= require('fs');
var header		= require('gulp-header');

var gulp		= require('gulp');
var sass		        = require('gulp-sass');
var minifycss	= require('gulp-minify-css');

gulp.task('default', function() {
	gulp.watch('scss/*.scss', ['scss-index']);
});

gulp.task('scss-index', function () {
	gulp.src('scss/style.scss')
	.pipe(sass.sync().on('error', sass.logError))
	//.pipe(minifycss())
	.pipe(header(fs.readFileSync('scss/_header.txt', 'utf8')))
	.pipe(gulp.dest('../'));
});

How to use it? Create the two files mentioned above and paste the code inside. Then, open the command line and type:

$ npm install
// or
$ npm i

This will make npm install all packages from the package.json into your project directory.

Once the installation is complete, launch your gulpfile.js with this simple command:

$ gulp

And everything should start working or show an error message.

Bower

It’s just as easy to use. You can find available packages using the Bower search engine: https://bower.io/search/. Similarly, npm and Gulp also have plugin directories: http://gulpjs.com/plugins/ and https://www.npmjs.com/

The bower.json file might look like this:

{
"name": "wordpress-theme",
"dependencies": {
"foundation": "*",
"bootstrap": "3.3.7",

"bourbon": "*",

"bxslider-4": "*",
"fancybox": "*",
"OwlCarousel": "*",

"html5shiv": "*",
"respond": "*",

"fontawesome": "*",
"animate.css": "*"
}
}

The asterisk means the latest available version of a package. But sometimes that doesn’t work as expected, so keep an eye on the console and update your bower.json accordingly.

You can also create a helper file for Bower: .bowerrc. I use it to define the directory where packages should be installed:

{
"directory": "../assets"
}

Installing libraries with Bower is just as simple as using npm:

$ bower install
// or
$ bower i

One more time — using package.json and bower.json saves a lot of development time.

Otherwise, you’d have to install each package manually, one by one.