Skip to content

Instantly share code, notes, and snippets.

@mikowl
Last active August 4, 2017 22:32
Show Gist options
  • Save mikowl/8726437 to your computer and use it in GitHub Desktop.
Save mikowl/8726437 to your computer and use it in GitHub Desktop.
My Gulpfile
/* ==========================================================================
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