Last active
August 4, 2017 22:32
-
-
Save mikowl/8726437 to your computer and use it in GitHub Desktop.
My Gulpfile
This file contains 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
/* ========================================================================== | |
Dependencies | |
========================================================================== */ | |
var gulp = require('gulp'), | |
clean = require('gulp-clean'), | |
uglify = require('gulp-uglify'), | |
imagemin = require('gulp-imagemin'), | |
autoprefixer = require('gulp-autoprefixer'), | |
concat = require('gulp-concat'), | |
rename = require('gulp-rename'), | |
sass = require('gulp-sass'), | |
notify = require("gulp-notify"), | |
cache = require('gulp-cache'), | |
plumber = require('gulp-plumber'), | |
browserSync = require('browser-sync'), | |
lr = require('tiny-lr'), | |
livereload = require('gulp-livereload'), | |
server = lr(); | |
/* ========================================================================== | |
Sources - Set your folders here | |
========================================================================== */ | |
var source = { | |
// Javascript folder | |
js_src: "./js", | |
// Javascript Library folder | |
js_libs: "./js/lib/" | |
}; | |
/* ========================================================================== | |
Sass watch task | |
Watches and compiles sass files in sass directory, also applies autoprefier | |
========================================================================== */ | |
gulp.task('sass', function(){ | |
return gulp.src('./sass/*.scss') | |
.pipe(plumber({errorHandler: notify.onError("Ack. <%= error.message %>")})) | |
.pipe(sass({ | |
outputStyle: 'compressed', | |
noCache: true | |
}) | |
.on('error', sass.logError)) | |
.pipe(autoprefixer('last 200 versions')) | |
.pipe(gulp.dest('./')) | |
.pipe(browserSync.reload({stream:true})); | |
}); | |
/* ========================================================================== | |
gulp scripts | |
Concatenates and minifies javascript files excluding modernizr | |
and IE6-8 specific selectivizr.js | |
========================================================================== */ | |
// Your javascript vendor/library files to be concatenated and minified | |
gulp.task('scripts', ['cleanScripts'], function() { | |
return gulp.src([source.js_libs+'/*.js', '!'+source.js_libs+'modernizr.js', '!'+source.js_libs+'selectivizr.js']) | |
.pipe(concat("plugins.js")) | |
.pipe(gulp.dest(source.js_src)) | |
.pipe(rename({suffix: '.min'})) | |
.pipe(uglify()) | |
.pipe(gulp.dest(source.js_src)) | |
.pipe(notify({message: 'Scripts are done.'})); | |
}); | |
// Clean plugins.min.js file | |
gulp.task('cleanScripts', function() { | |
return gulp.src('./js/plugins.min.js', {read: false}) | |
.pipe(clean()); | |
}); | |
/* ========================================================================== | |
gulp images | |
Minifies images | |
========================================================================== */ | |
gulp.task('images', function() { | |
gulp.src('./images/**') | |
.pipe(cache(imagemin({ | |
optimizationLevel: 4, | |
progressive: true, | |
interlaced: true | |
}))) | |
.pipe(gulp.dest('./images/')) | |
.pipe(notify({ | |
message: "Images are optimized." | |
})); | |
}); | |
/* ========================================================================== | |
Fire up livereload server | |
========================================================================== */ | |
gulp.task('reload', function () { | |
gulp.src('./') | |
.pipe(livereload(server)); | |
}); | |
// Static server | |
gulp.task('browser-sync', function() { | |
browserSync.init(null, { | |
server: { | |
baseDir: "./" | |
} | |
}); | |
}); | |
/* ========================================================================== | |
gulp watch | |
Main gulp task to watch sass files and any file changes for livereload | |
========================================================================== */ | |
gulp.task('watch', function () { | |
// Listen on port 35729 | |
server.listen(35729, function (err) { | |
if (err) { | |
return console.log(err); | |
} | |
// Watch .scss files | |
gulp.watch('sass/**/*.scss', ['sass']); | |
// Watch all files for changes | |
// We ignore the compiled css file so reload doesn't trigger twice | |
gulp.watch(['./*', '!./*.css'], ['reload']); | |
}); | |
}); | |
/* ========================================================================== | |
default task | |
========================================================================== */ | |
gulp.task('default', function(){ | |
gulp.start('watch', 'scripts', 'images'); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment