Last active
August 31, 2017 12:44
-
-
Save josephdburdick/49a4bb299a614d8f3f77 to your computer and use it in GitHub Desktop.
Gulpfile - precompress and sprite generation
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
'use strict'; | |
// generated on 2014-06-24 using generator-gulp-webapp 0.1.0 | |
var src_dir = 'app', | |
dest_dir = 'dist'; | |
var gulp = require('gulp'); | |
// load plugins | |
var $ = require('gulp-load-plugins')(), | |
browserSync = require('browser-sync'), | |
gutil = require('gulp-util'), | |
fileinclude = require('gulp-file-include'), | |
svgSprite = require('gulp-svg-sprites'), | |
reload = browserSync.reload; | |
gulp.task('styles', function () { | |
return gulp.src(src_dir + '/styles/main.scss') | |
.pipe($.plumber(function (error) { | |
gutil.beep(); | |
gutil.log(gutil.colors.red(error.message)); | |
this.emit('end'); | |
})) | |
.pipe($.rubySass({ | |
lineNumbers: true, | |
style: 'expanded', //compact, compressed | |
precision: 10 | |
})) | |
.pipe($.autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) | |
.pipe(gulp.dest('.tmp/styles')) | |
.pipe(gulp.dest(dest_dir + '/styles')) | |
.pipe(browserSync.reload({ stream: true })) | |
.pipe($.size()); | |
}); | |
gulp.task('scripts', function () { | |
return gulp.src(src_dir + '/scripts/main.js') ///scripts/**/*.js | |
.pipe($.plumber(function (error) { | |
gutil.beep(); | |
gutil.log(gutil.colors.red(error.message)); | |
this.emit('end'); | |
})) | |
.pipe($.jshint()) | |
.pipe($.jshint.reporter(require('jshint-stylish'))) | |
.pipe($.jshint.reporter('fail')) | |
.pipe(gulp.dest(dest_dir + '/scripts')) | |
.pipe($.size()) | |
}); | |
gulp.task('fileinclude', function() { | |
return gulp.src([src_dir + '/templates/*.html']) | |
.pipe($.plumber(function (error) { | |
gutil.beep(); | |
gutil.log(gutil.colors.red(error.message)); | |
this.emit('end'); | |
})) | |
.pipe(fileinclude({ | |
prefix: '@@', | |
basepath: '@file' | |
})) | |
.pipe(gulp.dest(src_dir)) | |
.pipe(gulp.dest(dest_dir)) | |
.pipe(browserSync.reload({ stream: true })) | |
.pipe($.size()); | |
}); | |
gulp.task('html', ['styles', 'scripts'], function () { | |
var jsFilter = $.filter('**/*.js'); | |
var cssFilter = $.filter('**/*.css'); | |
return gulp.src(src_dir + '/*.html') | |
.pipe($.useref.assets({ searchPath: '{.tmp,app}' })) | |
.pipe(jsFilter) | |
.pipe($.uglify()) | |
.pipe(jsFilter.restore()) | |
.pipe(cssFilter) | |
.pipe($.csso()) | |
.pipe(cssFilter.restore()) | |
.pipe($.useref.restore()) | |
.pipe($.useref()) | |
.pipe(gulp.dest(dest_dir)) | |
.pipe(browserSync.reload({ stream: true })) | |
.pipe($.size()); | |
}); | |
gulp.task('sprite', function () { | |
return gulp.src(src_dir + '/images/*.svg') | |
.pipe(svgSprite()) | |
.pipe(gulp.dest(src_dir + '/images/sprite')); // Write the sprite-sheet + CSS + Preview | |
}); | |
gulp.task('images', ['sprite'], function () { | |
return gulp.src('app/images/**/*') | |
.pipe($.filter('*.{jpg,jpeg,svg,gif,png}')) | |
.pipe($.imagemin({ | |
optimizationLevel: 3, | |
progressive: true, | |
interlaced: true | |
})) | |
.pipe(gulp.dest(dest_dir + '/images')) | |
.pipe($.size()); | |
}); | |
gulp.task('fonts', function () { | |
return $.bowerFiles() | |
.pipe($.filter(src_dir + '/**/*.{eot,svg,ttf,woff}')) | |
.pipe($.flatten()) | |
.pipe(gulp.dest(dest_dir + '/fonts')) | |
.pipe($.size()); | |
}); | |
gulp.task('extras', function () { | |
return gulp.src([src_dir + '/*.*', '!app/**/*.html'], { dot: true }) | |
.pipe(gulp.dest(dest_dir)); | |
}); | |
gulp.task('clean', function () { | |
return gulp.src(['.tmp', dest_dir], { read: false }).pipe($.clean()); | |
}); | |
gulp.task('build', ['fileinclude', 'images', 'styles', 'scripts', 'fonts', 'extras']); | |
gulp.task('default', ['clean'], function () { | |
gulp.start('build'); | |
}); | |
gulp.task('serve', ['styles'], function () { | |
browserSync.init({ | |
server: { | |
baseDir: [src_dir, '.tmp'] | |
}, | |
notify: false | |
}); | |
}); | |
// inject bower components | |
gulp.task('wiredep', function () { | |
var wiredep = require('wiredep').stream; | |
gulp.src(src_dir + '/styles/**/*.scss') | |
.pipe(wiredep({ | |
directory: src_dir + '/bower_components' | |
})) | |
.pipe(gulp.dest(src_dir + '/styles')) | |
.pipe(gulp.dest(dest_dir + '/styles')); | |
gulp.src(src_dir + '/scripts/**/*.js') | |
.pipe(wiredep({ | |
directory: src_dir + '/bower_components' | |
})).pipe(gulp.dest(dest_dir + '/scripts')); | |
gulp.src(src_dir + '*.html') | |
.pipe(wiredep({ | |
directory: src_dir + '/bower_components', | |
exclude: ['bootstrap-sass-official'] | |
})) | |
.pipe(gulp.dest(dest_dir)); | |
}); | |
gulp.task('watch', ['serve'], function () { | |
var server = $.livereload(), | |
files = [ | |
src_dir + '/templates/**/*.html', | |
'.tmp/styles/**/*.css', | |
src_dir + '/scripts/**/*.js', | |
src_dir + '/images/**/*' | |
]; | |
// watch for changes | |
gulp.watch(files).on('change', function (file) { | |
server.changed(file.path); | |
}); | |
gulp.watch(src_dir + '/templates/**/*.html', ['fileinclude']); | |
gulp.watch(src_dir + '/styles/**/*.scss', ['styles']); | |
gulp.watch(src_dir + '/scripts/**/*.js', ['scripts']); | |
gulp.watch(src_dir + '/images/**/*', ['images']); | |
gulp.watch('bower.json', ['wiredep']); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment