The gulpfile.js - Surfing-Chef/Bourbon GitHub Wiki

#Creating the gulpfile.js

###For this project:

gulp	the base for all the plugins
gulp-uglify	minify js files
gulp-sass	compiles Sass to CSS
browser-sync	add live ***CSS reload and browser syncing
gulp-plumber	prevent pipes from breaking caused by errors from gulp plugins
gulp-autoprefixer	prefix CSS
gulp-sourcemaps	source map support for browser styles debug
gulp-concat	concatenates files
del	delete files and folders using globs
gulp-rename	rename js files

• Navigate to the project folder root and enter the following command:

>npm install gulp-uglify gulp-sass browser-sync gulp-plumber gulp-autoprefixer gulp-sourcemaps gulp-concat del gulp-rename --save-dev

This installs the plugins to the project file and includes them in the package.json.

• Now installed, the gulpfile will put the installed plugins to work:

// REQUIREMENTS
var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    sass = require('gulp-sass'),
    browserSync = require('browser-sync'),
    reload = browserSync.reload,
    plumber = require('gulp-plumber'),
    autoprefixer = require('gulp-autoprefixer'),
    sourcemaps  = require('gulp-sourcemaps'),
    concat  = require('gulp-concat'),
    del  = require('del'),
    rename = require('gulp-rename');

// DEVELOPMENT TASKS
gulp.task('scripts', function(){
  gulp.src(['app/js/**/*.js', '!app/js/**/script.js'])
  .pipe(plumber())
  .pipe(concat('script.js'))
  .pipe(gulp.dest('app/js'))
  .pipe(uglify())
  .pipe(gulp.dest('app/js'))
  .pipe(reload({stream: true}));
});


// Sass Tasks - tasks related to sc scss and css
// deployment css - compressed
gulp.task('sassDep', function(){
  gulp.src('app/sass/**/*.scss')
  .pipe(plumber())
  .pipe(sourcemaps.init())
  .pipe(sass({outputStyle: 'compressed'}))
  .pipe(autoprefixer('last 2 versions'))
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest('app/css/'))
  .pipe(reload({stream: true}));
});

// development css - nested
gulp.task('sassDev', function(){
  gulp.src('app/sass/**/*.scss')
  .pipe(plumber())
  .pipe(rename({suffix:'.dev'}))
  .pipe(sass({outputStyle: 'nested'}))
  .pipe(autoprefixer('last 2 versions'))
  .pipe(gulp.dest('app/css/'));
});

// HTML Tasks - tasks related to html
gulp.task('html', function(){
  gulp.src('./app/')
  .pipe(reload({stream: true}));
});

// Browser-Sync Tasks - tasks related to browser-sync
gulp.task('browser-sync', function(){
  browserSync({
    server:{
      baseDir: './app/'
    }
  });
});

// DEPLOYMENT TASKS
// clear out all files and folders from build folder
gulp.task('build:cleanfolder', function(){
  del([
    'build/**/*.*'
  ]);
});

// create build directory for all files
gulp.task('build:copy', ['build:cleanfolder'], function(){
  return gulp.src('app/**/*/')
  .pipe(gulp.dest('build/'));
});

// remove unwanted build files and directories
gulp.task('build:remove', ['build:copy'], function(cb){
  del([  // list files and directories to delete
    'build/sass',
    'build/css/*dev*',
    'build/css/*.map'
  ], cb);
});

// main build task
gulp.task('build', ['build:copy', 'build:remove']);

// test deployment package
gulp.task('build:serve', function(){
  browserSync({
    server:{
      baseDir: './build/'
    }
  });
});

// WATCH TASKS
// watch files and folders for changes
gulp.task('watch', function(){
  gulp.watch('app/js/**/*.js', ['scripts']);
  gulp.watch('./app/**/*.html', ['html']);
  gulp.watch('app/sass/**/*.scss', ['sassDev']);
  gulp.watch('app/sass/**/*.scss', ['sassDep']);
});

// DEFAULT TASKS
// run specified tasks asynchronously
gulp.task('default', ['scripts', 'sassDev', 'sassDep', 'html', 'browser-sync', 'watch']);

####Reference Links ####globs A Glob is a way of matching patterns using wildcard characters.

https://github.com/isaacs/node-glob
https://github.com/isaacs/minimatch
http://www.smashingmagazine.com/2014/06/11/building-with-gulp/

####browsersync browsersync.io
browsersync.io/docs/gulp
Using PHP and browserSync