|
// |
|
// Paths |
|
// |
|
|
|
var basePaths = { |
|
src: 'source/', |
|
dest: 'source/' |
|
}; |
|
|
|
var paths = { |
|
styles: { |
|
src: 'source/css/', |
|
publicDest: 'public/css/' |
|
}, |
|
scripts: { |
|
src: 'source/js/', |
|
libSrc: 'source/js/lib/', |
|
publicDest: 'public/js/' |
|
}, |
|
images: { |
|
src: 'source/images/', |
|
publicDest: 'public/images/' |
|
}, |
|
patterns: { |
|
src: 'source/_patterns/' |
|
} |
|
}; |
|
|
|
var srcFiles = { |
|
styles: paths.styles.src + '**/*.scss', |
|
scripts: paths.scripts.src + '**/*.js', |
|
jsLibs: paths.scripts.libSrc + '**/*.js', |
|
images: paths.images.src + '**/*.*', |
|
patterns: paths.patterns.src + '**/*.*' |
|
}; |
|
|
|
|
|
// |
|
// Gulp variables |
|
// |
|
var gulp = require('gulp'), |
|
$ = require('gulp-load-plugins')(), |
|
del = require('del'), |
|
browserSync = require('browser-sync'), |
|
reload = browserSync.reload, |
|
isProduction = true, |
|
sassStyle = 'compressed', |
|
sourceMap = false, |
|
devUrl = 'patternlab.dev'; |
|
|
|
if ($.util.env.dev === true) { |
|
sassStyle = 'expanded'; |
|
sourceMap = true; |
|
isProduction = false; |
|
} |
|
|
|
var changeEvent = function(evt) { |
|
$.util.log('File', $.util.colors.cyan(evt.path.replace(new RegExp('/.*(?=/' + basePaths.src + ')/'), '')), 'was', $.util.colors.magenta(evt.type)); |
|
}; |
|
|
|
|
|
// |
|
// Styles |
|
// |
|
gulp.task('styles', function () { |
|
return gulp.src(srcFiles.styles) |
|
.pipe($.rubySass({ |
|
style: sassStyle, |
|
sourcemap: sourceMap, |
|
precision: 10, |
|
compass: true |
|
})) |
|
.pipe($.autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4', 'Firefox >= 4')) |
|
.pipe(isProduction ? $.combineMediaQueries({ log: true }) : $.util.noop()) |
|
.pipe(isProduction ? $.csso() : $.util.noop()) |
|
.pipe($.size()) |
|
.pipe(gulp.dest(paths.styles.publicDest)) |
|
.pipe($.filter('*.css')) |
|
.pipe($.notify('Styles task complete')) |
|
.pipe(reload({ stream: true })); |
|
}); |
|
|
|
|
|
// |
|
// Lint Scripts |
|
// |
|
gulp.task('jshint', function () { |
|
return gulp.src([srcFiles.scripts, "!source/js/lib/**/*.js"]) |
|
.pipe(reload({stream: true, once: true})) |
|
.pipe($.jshint()) |
|
.pipe($.jshint.reporter('jshint-stylish-ex')) |
|
.pipe($.if(!browserSync.active, $.jshint.reporter('fail'))); |
|
}); |
|
|
|
|
|
// |
|
// Package Scripts |
|
// |
|
gulp.task('scripts', function () { |
|
return gulp.src(srcFiles.scripts) |
|
.pipe($.concat('app.js')) |
|
.pipe(isProduction ? $.uglify() : $.util.noop()) |
|
.pipe($.size({title: 'scripts'})) |
|
.pipe(gulp.dest(paths.scripts.publicDest)) |
|
.pipe($.filter('*.js')) |
|
.pipe($.notify('Scripts task complete')) |
|
.pipe(reload({ stream: true })); |
|
}); |
|
|
|
|
|
// |
|
// Browser Sync |
|
// |
|
gulp.task('browserSync', function () { |
|
browserSync.init(null, { |
|
proxy: devUrl, |
|
ghostMode: { |
|
clicks: true, |
|
scroll: true, |
|
links: true, |
|
forms: true |
|
}, |
|
debugInfo: true |
|
}); |
|
}); |
|
|
|
|
|
// |
|
// Browser Sync Reload |
|
// |
|
gulp.task('bs-reload', function () { |
|
reload(); |
|
}); |
|
|
|
|
|
// |
|
// Images |
|
// |
|
gulp.task('images', function () { |
|
return gulp.src(srcFiles.images) |
|
.pipe($.cache($.imagemin({ |
|
optimizationLevel: 7, |
|
progressive: true, |
|
interlaced: true |
|
}))) |
|
.pipe(gulp.dest(paths.images.publicDest)) |
|
.pipe($.size({title: 'images'})) |
|
.pipe(reload({ stream: true })); |
|
}); |
|
|
|
|
|
// |
|
// Watch |
|
// |
|
gulp.task('watch', ['styles', 'scripts', 'images', 'browserSync',], function () { |
|
gulp.watch(srcFiles.styles, ['styles']).on('change', function(evt) { |
|
changeEvent(evt); |
|
}); |
|
gulp.watch(srcFiles.scripts, ['scripts']).on('change', function(evt) { |
|
changeEvent(evt); |
|
}); |
|
gulp.watch(srcFiles.scripts, ['jshint']).on('change', function(evt) { |
|
changeEvent(evt); |
|
}); |
|
gulp.watch([srcFiles.patterns], ['bs-reload']).on('change', function(evt) { |
|
changeEvent(evt); |
|
}); |
|
gulp.watch(srcFiles.images, ['images']).on('change', function(evt) { |
|
changeEvent(evt); |
|
}); |
|
}); |
|
|
|
|
|
// |
|
// Default |
|
// |
|
gulp.task('default', ['watch']); |
Thanks for the shout-out. Glad I could help!