Skip to content

Instantly share code, notes, and snippets.

@vinzdef
Last active November 11, 2017 20:31
Show Gist options
  • Save vinzdef/6edb79ab5a7f5ee13c0a to your computer and use it in GitHub Desktop.
Save vinzdef/6edb79ab5a7f5ee13c0a to your computer and use it in GitHub Desktop.
My ♥ gulpfile - SASS compile and source mapping , non-interrupting errors, GUI notifications, livereload, js concat
var fs = require('fs'),
gulp = require('gulp'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
sassMaps = require('gulp-sourcemaps'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
notify = require('gulp-notify'),
plumber = require('gulp-plumber'),
livereload = require('gulp-livereload')
var paths = {
sass: 'scss/',
css: 'css/',
js: 'js/src/',
}
var files = {
sass: 'main.scss',
js: 'js/main.js'
}
gulp.task('default', ['sass-dev', 'concat-js'], function() {
livereload.listen()
gulp.watch(paths.sass + '**/*.scss', ['sass-dev'])
gulp.watch(paths.js + '**/*.js', ['concat-js'])
gulp.watch('**/*.html', ['reload'])
})
gulp.task('reload', function(){
gulp.src('index.html')
.pipe(notify('Reloading HTML'))
.pipe(livereload())
})
gulp.task('concat-js', ['clean-js'], function(){
return gulp.src(paths.js + '/**/*.js')
.pipe(plumber({errorHandler: notify.onError("<%= error.message %> \n\n→ <%= error.fileName %> \n\n@ <%= error.lineNumber %>")}))
.pipe(concat(files.js))
.pipe(uglify())
.pipe(gulp.dest('.'))
.pipe(notify('Compiled JS'))
.pipe(livereload())
})
gulp.task('sass-dev', ['clean'], function() {
gulp.src(paths.sass + files.sass)
.pipe(plumber({errorHandler: notify.onError("<%= error.message %> \n\n→ <%= error.fileName %> \n\n@ <%= error.lineNumber %>")}))
.pipe(sassMaps.init())
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(sassMaps.write())
.pipe(gulp.dest(paths.css))
.pipe(notify('Compiled SASS dev'))
.pipe(livereload())
})
gulp.task('sass-prod', ['clean'], function() {
gulp.src(paths.sass + 'main.scss')
.pipe(plumber({errorHandler: notify.onError("<%= error.message %> \n\n→ <%= error.fileName %> \n\n@ <%= error.lineNumber %>")}))
.pipe(sass({
outputStyle: 'compressed'
}))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest(paths.css))
.pipe(notify('Compiled SASS prod'))
.pipe(livereload())
})
gulp.task('clean', function() {
//fs.unlink(paths.css + files.css)
})
gulp.task('clean-js', function() {
try {
fs.unlinkSync(files.js)
} catch (e) {
if (e.code != 'ENOENT') throw e;
}
})
function mkdir(path){
try {
fs.mkdirSync(path)
} catch (e) {
if (e.code != 'EEXIST') throw e
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment