Install for front end

front-end.md

Setting up front end project

1. Bower init

2. Add .bowerrc with following

This tells bower where to install sass files.

{
  "directory" : "vendor"
}

3. Start gulpfile.js. Basic template below:

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function() {
  gulp.src('./sass/**/style.scss')
    .pipe(sass())
    .pipe(gulp.dest('./'));
});

gulp.task('fonts', function() {
   gulp.src('./vendors/bootstrap-sass/assets/fonts/bootstrap/**/*.{ttf,woff,woff2,eof,eot,svg}')
   .pipe(gulp.dest('./fonts/bootstrap'));
   gulp.src('./vendors/fontawesome/fonts/**/*.{ttf,woff,woff2,eof,svg,eot,otf}')
   .pipe(gulp.dest('./fonts'));
});

gulp.task('watch', function() {
  gulp.watch('./sass/**/*.scss', ['sass'])
    .on('change', function(event){
      console.log(event);
      console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
})

gulp.task('default', ['sass']);