Skip to content

Instantly share code, notes, and snippets.

@eckelon
Last active April 10, 2018 06:06
Show Gist options
  • Save eckelon/8d257e212652ed93d3cbdac89d18d25c to your computer and use it in GitHub Desktop.
Save eckelon/8d257e212652ed93d3cbdac89d18d25c to your computer and use it in GitHub Desktop.
Simple gulpfile that process, lints and minify scss to css and js files. It also keeps files cached in order to improve tasks execution time.
var autoprefixer = require('gulp-autoprefixer');
var cache = require('gulp-cached');
var cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');
var eslint = require('gulp-eslint');
var gulp = require('gulp');
var notify = require("gulp-notify");
var plumber = require('gulp-plumber');
var remember = require('gulp-remember');
var sass = require('gulp-sass');
var sassLint = require('gulp-sass-lint');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var csspath = {
src: 'src/sass/**/*.scss',
dest: 'css/'
};
var jspath = {
src: ['src/js/**/*.js', '!src/js/**/*.min.js'],
dest: 'js/'
};
//compiling scss files
gulp.task("sass", function () {
return gulp.src(csspath.src)
.pipe(plumber({ errorHandler: handleErrors }))
.pipe(cache('sass')) // cache all files, so it'll process only changed files
.pipe(sassLint())
.pipe(sassLint.format())
.pipe(sassLint.failOnError())
// .pipe(sourcemaps.init())
.pipe(sass({
onError: function (err) {
return notify().write(err);
}
}))
.pipe(autoprefixer({ browsers: ['last 2 version', 'safari 5', 'ie >= 9'] }))
.pipe(cleanCSS())
// .pipe(sourcemaps.write('.'))
.pipe(remember('sass')) // now I don't need just the changed files but all the styles, so I can concat'em:
.pipe(concat('styles.css'))
.pipe(gulp.dest(csspath.dest))
.pipe(notify({
message: 'SCSS complete'
}));
});
gulp.task('processjs', function () {
gulp.src(jspath.src)
.pipe(plumber({ errorHandler: handleErrors }))
.pipe(cache('compressing-js')) // cache all files, so it'll process only changed files
.pipe(eslint({
rules: {},
globals: ['jQuery', '$', '$$'],
envs: ['browser']
}))
.pipe(eslint.format())
.pipe(eslint.failAfterError())
.pipe(uglify())
.pipe(gulp.dest(jspath.dest))
.pipe(notify({
message: 'processjs complete'
}));
});
//Watch task
gulp.task("watch", function () {
gulp.start('sass');
gulp.start('processjs');
gulp.watch(csspath.src, ['sass']);
gulp.watch(jspath.src, ['processjs']);
});
/**
* Handle errors.
*/
function handleErrors() {
var args = Array.prototype.slice.call(arguments);
notify.onError({
title: 'Task Failed [<%= error.message %>',
message: 'See console.',
sound: 'Sosumi'
}).apply(this, args);
this.emit('end');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment