🐐 Bring more inline with gulp best practices

Extract non-specific tasks to fns to be more inline with "the gulp way✨"

Fixes #289

gulpfile.js

@@ -49,6 +49,50 @@ var styleTask = function (stylesPath, srcs) {
  .pipe($.size({title: stylesPath}));
 };
 
+var jshintTask = function (src) {
+ return gulp.src(src)
+ .pipe(reload({stream: true, once: true}))
+ .pipe($.jshint.extract()) // Extract JS from .html files
+ .pipe($.jshint())
+ .pipe($.jshint.reporter('jshint-stylish'))
+ .pipe($.if(!browserSync.active, $.jshint.reporter('fail')));
+}
+
+var imageOptimizeTask = function (src, dest) {
+ return gulp.src(src)
+ .pipe($.cache($.imagemin({
+ progressive: true,
+ interlaced: true
+ })))
+ .pipe(gulp.dest(dest))
+ .pipe($.size({title: 'images'}));
+}
+
+var optimizeHtmlTask = function(src) {
+ var assets = $.useref.assets({searchPath: ['.tmp', 'app', 'dist']});
+
+ return gulp.src(src)
+ // Replace path for vulcanized assets
+ .pipe($.if('*.html', $.replace('elements/elements.html', 'elements/elements.vulcanized.html')))
+ .pipe(assets)
+ // Concatenate and minify JavaScript
+ .pipe($.if('*.js', $.uglify({preserveComments: 'some'})))
+ // Concatenate and minify styles
+ // In case you are still using useref build blocks
+ .pipe($.if('*.css', $.cssmin()))
+ .pipe(assets.restore())
+ .pipe($.useref())
+ // Minify any HTML
+ .pipe($.if('*.html', $.minifyHtml({
+ quotes: true,
+ empty: true,
+ spare: true
+ })))
+ // Output files
+ .pipe(gulp.dest(dest))
+ .pipe($.size({title: 'html'}));
+}
+
 // Compile and automatically prefix stylesheets
 gulp.task('styles', function () {
  return styleTask('styles', ['**/*.css']);
@@ -60,7 +104,7 @@ gulp.task('elements', function () {
 
 // Lint JavaScript
 gulp.task('jshint', function () {
- return gulp.src([
+ return jshintTask([
  'app/scripts/**/*.js',
  'app/elements/**/*.js',
  'app/elements/**/*.html',
@@ -75,13 +119,7 @@ gulp.task('jshint', function () {
 
 // Optimize images
 gulp.task('images', function () {
- return gulp.src('app/images/**/*')
- .pipe($.cache($.imagemin({
- progressive: true,
- interlaced: true
- })))
- .pipe(gulp.dest('dist/images'))
- .pipe($.size({title: 'images'}));
+ return imageOptimizeTask('app/images/**/*', 'dist/images');
 });
 
 // Copy all files at the root level (app)
@@ -126,28 +164,9 @@ gulp.task('fonts', function () {
 
 // Scan your HTML for assets & optimize them
 gulp.task('html', function () {
- var assets = $.useref.assets({searchPath: ['.tmp', 'app', 'dist']});
-
- return gulp.src(['app/**/*.html', '!app/{elements,test}/**/*.html'])
- // Replace path for vulcanized assets
- .pipe($.if('*.html', $.replace('elements/elements.html', 'elements/elements.vulcanized.html')))
- .pipe(assets)
- // Concatenate and minify JavaScript
- .pipe($.if('*.js', $.uglify({preserveComments: 'some'})))
- // Concatenate and minify styles
- // In case you are still using useref build blocks
- .pipe($.if('*.css', $.cssmin()))
- .pipe(assets.restore())
- .pipe($.useref())
- // Minify any HTML
- .pipe($.if('*.html', $.minifyHtml({
- quotes: true,
- empty: true,
- spare: true
- })))
- // Output files
- .pipe(gulp.dest('dist'))
- .pipe($.size({title: 'html'}));
+ return optimizeHtmlTask(
+ ['app/**/*.html', '!app/{elements,test}/**/*.html'],
+ 'dist');
 });
 
 // Polybuild will take care of inlining HTML imports,