Skip to content

Instantly share code, notes, and snippets.

@jedlovescpe2
Forked from leymannx/gulpfile.js
Created November 8, 2018 10:13
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 jedlovescpe2/02f86344d7d73ff1a6b28dd538281c70 to your computer and use it in GitHub Desktop.
Save jedlovescpe2/02f86344d7d73ff1a6b28dd538281c70 to your computer and use it in GitHub Desktop.
Gulp Sass with autoprefixer and minify.
var gulp = require('gulp'),
sass = require('gulp-sass'),
rename = require('gulp-rename'),
cssmin = require('gulp-cssnano'),
prefix = require('gulp-autoprefixer'),
plumber = require('gulp-plumber'),
notify = require('gulp-notify'),
sassLint = require('gulp-sass-lint'),
sourcemaps = require('gulp-sourcemaps');
// Temporary solution until gulp 4
// https://github.com/gulpjs/gulp/issues/355
runSequence = require('run-sequence');
var displayError = function(error) {
// Initial building up of the error
var errorString = '[' + error.plugin.error.bold + ']';
errorString += ' ' + error.message.replace("\n",''); // Removes new line at the end
// If the error contains the filename or line number add it to the string
if(error.fileName)
errorString += ' in ' + error.fileName;
if(error.lineNumber)
errorString += ' on line ' + error.lineNumber.bold;
// This will output an error like the following:
// [gulp-sass] error message in file_name on line 1
console.error(errorString);
};
var onError = function(err) {
notify.onError({
title: "Gulp",
subtitle: "Failure!",
message: "Error: <%= error.message %>",
sound: "Basso"
})(err);
this.emit('end');
};
var sassOptions = {
outputStyle: 'expanded'
};
var prefixerOptions = {
browsers: ['last 2 versions']
};
// BUILD SUBTASKS
// ---------------
gulp.task('styles', function() {
return gulp.src('scss/main.scss')
.pipe(plumber({errorHandler: onError}))
.pipe(sourcemaps.init())
.pipe(sass(sassOptions))
.pipe(prefix(prefixerOptions))
.pipe(rename('main.css'))
.pipe(gulp.dest('css'))
.pipe(cssmin())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('css'))
});
gulp.task('sass-lint', function() {
gulp.src('scss/**/*.scss')
.pipe(sassLint())
.pipe(sassLint.format())
.pipe(sassLint.failOnError());
});
gulp.task('watch', function() {
gulp.watch('scss/**/*.scss', ['styles']);
});
// BUILD TASKS
// ------------
gulp.task('default', function(done) {
runSequence('styles', 'watch', done);
});
gulp.task('build', function(done) {
runSequence('styles', done);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment