Skip to content

Instantly share code, notes, and snippets.

@HPieters
Created January 4, 2015 19:35
Show Gist options
  • Save HPieters/88dd18e99c8925b2cabb to your computer and use it in GitHub Desktop.
Save HPieters/88dd18e99c8925b2cabb to your computer and use it in GitHub Desktop.
BrowserSync Gulpfile
//load plugins
var gulp = require('gulp'),
compass = require('gulp-compass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
livereload = require('gulp-livereload'),
plumber = require('gulp-plumber'),
imagemin = require('gulp-imagemin'),
cache = require('gulp-cache'),
browserSync = require('browser-sync'),
reload = browserSync.reload,
favicons = require('favicons'),
path = require('path');
//error notification settings for plumber
var plumberErrorHandler = { errorHandler: function (error) {
console.log(error.message);
this.emit('end');
}
};
// BrowserSync
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./public/"
}
});
});
// Favicons
gulp.task('favicon', function() {
favicons({
// I/O
files: {
src: "src/img/favicon/favicon-1024x1024.png",
dest: "public",
html: "public/index.html"
},
// Icon Types
icons: {
android: false,
apple: true,
coast: false,
favicons: true,
firefox: false,
opengraph: false,
windows: false,
},
// Miscellaneous
settings: {
logging: true
}
}, function (err) {
// err: An error that may have occurred during the Favicons build. `object`
//console.log(err);
});
});
//styles
gulp.task('styles', function() {
return gulp.src('./src/sass/*.scss')
.pipe(plumber(plumberErrorHandler))
.pipe(compass({
config_file: './config.rb',
css: 'public/css',
sass: 'src/sass',
image: 'html/images'
}))
.on('error', function(err) {
// Would like to catch the error here
console.log(err)
})
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('public/css'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('public/css'))
.pipe(reload({stream:true}));
});
//scripts
gulp.task('scripts', function() {
return gulp.src('./src/js/*.js')
.pipe(plumber(plumberErrorHandler))
.pipe(concat('main.js'))
.pipe(gulp.dest('public/js'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('public/js'))
.pipe(reload({stream:true}));
});
// Images
gulp.task('images', function() {
return gulp.src('./src/img/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('public/img'))
.pipe(reload({stream:true}));
});
// Default task
gulp.task('default', function() {
gulp.start('styles', 'scripts', 'images');
});
//watch
gulp.task('live', ['browser-sync'], function() {
// Watch .scss files
gulp.watch('src/sass/*.scss', ['styles']);
// Watch .js files
gulp.watch('src/js/*.js', ['scripts']);
// Watch image files
gulp.watch('src/img/**/*', ['images']);
});
@HPieters
Copy link
Author

"devDependencies": {
"gulp": "^3.8.10",
"browser-sync": "^1.8.3",
"del": "^1.1.1",
"favicons": "^2.0.5",
"gulp": "^3.8.10",
"gulp-autoprefixer": "^2.0.0",
"gulp-cache": "^0.2.4",
"gulp-compass": "^2.0.3",
"gulp-concat": "^2.4.3",
"gulp-connect": "^2.2.0",
"gulp-imagemin": "^2.1.0",
"gulp-jshint": "^1.9.0",
"gulp-livereload": "^3.2.0",
"gulp-minify-css": "^0.3.11",
"gulp-notify": "^2.1.0",
"gulp-plumber": "^0.6.6",
"gulp-rename": "^1.2.0",
"gulp-uglify": "^1.0.2",
"path": "^0.4.9"
}

@brianfeister
Copy link

@HPieters - this is working inside a Vagrant box for you? I have a setup that also includes Docker and I'm trying to track down what layer the failure is happening.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment