Skip to content

Instantly share code, notes, and snippets.

@SimonFricker
Last active March 23, 2017 13:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SimonFricker/5317809170096379172bba47e1d3bb02 to your computer and use it in GitHub Desktop.
Save SimonFricker/5317809170096379172bba47e1d3bb02 to your computer and use it in GitHub Desktop.
Front end dev gulpfile - browserSync, sass, uglify, plumber
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var uglifyCss = require('gulp-uglifycss');
var plumber = require('gulp-plumber');
gulp.task('browserSync', function(){
browserSync.init({
proxy: "http://localhost/app/"
});
});
gulp.task('watch', ['browserSync', 'sass'], function(){
gulp.watch('app/assets/**/*.scss', ['sass'])
gulp.watch('app/*.php', browserSync.reload);
gulp.watch('app/assets/css/*.css', browserSync.reload);
gulp.watch('app/assets/js/*.js', browserSync.reload);
})
gulp.task('sass', function(){
return gulp.src('app/assets/css/style.scss')
.pipe(plumber())
.pipe(sass({includePaths: ['./app/assets/css/**']}, {errLogToConsole: true}))
.on('error', reportError)
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('concat-min-js', function(){
return gulp.src('app/assets/js/*.js')
.pipe(concat('app/assets/js/theme.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
gulp.task('concat-min-css', function(){
return gulp.src('app/assets/css/style.css')
.pipe(concat('style.min.css'))
.pipe(uglifyCss())
.pipe(gulp.dest('app/assets/css/style.min.css'));
});
gulp.task('concat-min', ['concat-min-css', 'concat-min-js']);
/// error handeling
var reportError = function (error) {
// [log]
//console.log(error);
// Format and ouput the whole error object
//console.log(error.toString());
// ----------------------------------------------
// Pretty error reporting
var report = '\n';
var chalk = gutil.colors.white.bgRed;
if (error.plugin) {
report += chalk('PLUGIN:') + ' [' + error.plugin + ']\n';
}
if (error.message) {
report += chalk('ERROR:\040') + ' ' + error.message + '\n';
}
console.error(report);
// ----------------------------------------------
// Notification
if (error.line && error.column) {
var notifyMessage = 'LINE ' + error.line + ':' + error.column + ' -- ';
} else {
var notifyMessage = '';
}
notify({
title: 'FAIL: ' + error.plugin,
message: notifyMessage + 'See console.',
sound: 'Sosumi' // See: https://github.com/mikaelbr/node-notifier#all-notification-options-with-their-defaults
}).write(error);
gutil.beep(); // System beep (backup)
// ----------------------------------------------
// Prevent the 'watch' task from stopping
this.emit('end');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment