Setting Environment for Bower, Gulp and Scss
The dependency management for front end is like a headache for the first time. I thought someone can save some hair from their head
Install Node and npm
You can install Node and npm from http://nodejs.org
Install Bower
Bower is a command line utility. Install it with npm.
$ npm install -g bower
Bower requires Node and npm and Git.
Setup bower
The first step is to setup Bower. Create a new local directory and init bower following the instructions.
$ mkdir your_project
$ cd your_project/
$ bower init
After that finishes install our required bower packages:
$ bower install bootstrap-sass-official --save
bower install fontawesome --save
By default this will put them in the bower_components directory which can be changed if you prefer. I will leave it as default.
Install Gulp and its dependency
Now we need to setup our gulp dependencies, which pull from NPM. Create a new package.json file and just add an empty object, {} and save it.
Head back to the terminal and install our NPM dependencies:
$ npm install gulp gulp-ruby-sass gulp-notify gulp-autoprefixer gulp-bower --save-dev
This will install all the needed dependencies in a node_modules folder and also automatically update our package.json file with these dependencies.
setting gulpfile.js
Finally we need to setup the gulpfile.js. Create this file and we’ll step through all the settings.
If you’ve looked at gulp files before then you might know they all start by including the dependencies by using the node require function. Here is the start:
var gulp = require('gulp'),
sass = require('gulp-ruby-sass')
autoprefix = require('gulp-autoprefixer')
notify = require("gulp-notify")
bower = require('gulp-bower');
These are everything we installed in the NPM step above and at this point just included and not actually doing anything.
Next up I create a config object to hold various settings:
var config = {
sassPath: './resources/sass',
bowerDir: './bower_components'
}
var paths = {
scss: [config.sassPath + '/**.scss', config.bowerDir + '/fontawesome/scss/font-awesome.scss'],
font: config.bowerDir + '/fontawesome/fonts/**.*',
js: [config.bowerDir + '/jquery/dist/**.*', config.bowerDir + '/bootstrap-sass-official/assets/javascripts/bootstrap.js']
}
Gulp tasks
Bower:
gulp.task('bower', function() {
return bower()
.pipe(gulp.dest(config.bowerDir))
});
Font awesome icons:
This task generated fontawesome/icons to public/fonts
gulp.task('icons', function() {
return gulp.src(paths.font)
.pipe(gulp.dest('./public/fonts'));
});
Sass on /resources folder and font-awesome
This task publishes scss files to public/css on css format
gulp.task('css', function() {
return gulp.src(paths.scss)
.pipe(sass({style: 'compressed'})
.on("error", notify.onError(function (error) {
return "Error: " + error.message;
})))
.pipe(autoprefix('last 2 version'))
.pipe(gulp.dest('./public/css'));
});
javascripts
This task publishes bootstrap.js and jquery.js on public/js folder
gulp.task('js', function() {
return gulp.src(paths.js)
.pipe(gulp.dest('./public/js'));
});
Watch and Default Task
gulp.task('watch', function() {
gulp.watch(paths.scss, ['css']);
});
gulp.task('default', ['bower', 'icons', 'css', 'js']);
The first is the watch task which just listens for changes in the path and then runs the “css” task. Finally we have a default task which when called runs bower, icons, and the css task. This is useful so contributors can pull down your code, cd into it, run npm install, and finally gulp. Everything should be easily shared and used.
Final gulp file looks like this
var gulp = require('gulp'),
sass = require('gulp-ruby-sass')
autoprefix = require('gulp-autoprefixer')
notify = require("gulp-notify")
bower = require('gulp-bower');
var config = {
sassPath: './resources/sass',
bowerDir: './bower_components'
}
var paths = {
scss: [config.sassPath + '/**.scss', config.bowerDir + '/fontawesome/scss/font-awesome.scss'],
font: config.bowerDir + '/fontawesome/fonts/**.*',
js: [config.bowerDir + '/jquery/dist/**.*', config.bowerDir + '/bootstrap-sass-official/assets/javascripts/bootstrap.js']
}
gulp.task('bower', function() {
return bower()
.pipe(gulp.dest(config.bowerDir))
});
gulp.task('icons', function() {
return gulp.src(paths.font)
.pipe(gulp.dest('./public/fonts'));
});
gulp.task('css', function() {
return gulp.src(paths.scss)
.pipe(sass({
style: 'compressed'
})
.on("error", notify.onError(function (error) {
return "Error: " + error.message;
})))
.pipe(autoprefix('last 2 version'))
.pipe(gulp.dest('./public/css'));
});
gulp.task('js', function() {
return gulp.src(paths.js)
.pipe(gulp.dest('./public/js'));
});
// Rerun the task when a file changes
gulp.task('watch', function() {
gulp.watch(paths.scss, ['css']);
});
gulp.task('default', ['bower', 'icons', 'css', 'js']);
The final demo is on github. You can get the files from here
You can visit documentation section of each tools I have used from their official sites: - Bower - Gulp - Scss