Last active
April 10, 2018 06:06
-
-
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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