Watch seperate folder in Gulp HTML5 banner build

[rmcnaughGitHub]

Hello Folks I have a gulp task manager that watches and build HTML5 banners, but only one size (example 300x250) at a time. I would like to modify it to watch and build any size inside the app folder. For example if I had 160x600 and 300x250 size in the app folder, I would like to be able to choose which size to watch and build. I just would like to have less node_modules. My gulp file is attached(as .txt) and so is the folder structure. Any help is appreciated. Thank you for your time.

gulpfile.txt

'use strict';

var gulp = require('gulp'),     sass = require('gulp-sass'),//sass compiler     autoprefixer = require('gulp-autoprefixer'),//https://www.npmjs.org/package/gulp-autoprefixer     cleanCSS = require('gulp-clean-css'),//https://github.com/scniro/gulp-clean-css     rename = require('gulp-rename'),//https://www.npmjs.org/package/gulp-rename     browserSync = require('browser-sync'),     uglify = require('gulp-uglify'),//minify js     tinypng = require('gulp-tinypng-compress'),//https://www.npmjs.com/package/gulp-tinypng-compress     del = require('del'),     concat = require('gulp-concat'),//cocatenate files     zip = require('gulp-zip'),     notify = require('gulp-notify'),//gulp plugin to send messages based on Vinyl Files or Errors to Mac OS X, Linux or Windows using the node-notifier module. Fallbacks to Growl or simply logging     spritesmith = require('gulp.spritesmith'),//sprite management - https://www.bignerdranch.com/blog/css-sprite-management-with-gulp/     merge = require('merge-stream'),//Merge files     inlinesource = require('gulp-inline-source'),//Inline Source for JS     replace = require('gulp-replace'),//replace string names

    //NAME ZIP FILE AFTER MAIN DIRECTORY     dirParts = __dirname.split('/'),     zipName = dirParts[dirParts.length - 1];//Then within the "zip-the-files" task definition, replace the hardcoded zip name with: zipName + '.zip'

//PATHS var paths = {     base: {         src: './app',         html: 'app/.html',         css: 'app/css/.css',         js: 'js/*.js',         dist: 'dist',         main: './',         folder: './dist'     },     html: {         src: 'app/index.html',         main: './',         dist: 'dist'     },     styles: {         src: 'app/scss/*/.scss',         main: 'app/css',         dist: 'dist/css'     },     scripts: {         src: 'app/js/*/.js',         main: 'app/js',         dist: 'dist/js',         compress: 'dist/js/.js'     },     images: {         src: 'app/images/.{jpg,png,gif,jpeg}',         main: 'app/images',         dist: 'dist/images',         sprites: 'app/images/spriteSheet/.{jpg,png,gif,jpeg}',         svg: 'app/images/.svg',         fonts: 'app/fonts/*otf'     } };

//HTML COPY - used if compying to another directory gulp.task('copy-html', function(){     gulp.src(paths.html.src)     .pipe(gulp.dest(paths.html.dist));     console.log('Copy HTML'); });

//SASS // Because Browsersync only cares // about your CSS when it's finished compiling // - make sure you call .stream() after gulp.dest gulp.task('sass', function() {
gulp.src(paths.styles.src) .pipe(sass({includePaths: ['scss'], style: 'expanded' })) .pipe(autoprefixer("last 3 version","safari 5", "ie 8", "ie 9"))         .pipe(gulp.dest(paths.styles.main))//app folder         .pipe(browserSync.stream());     console.log('Watching Sass File'); });

gulp.task('sass-build', function() {
gulp.src(paths.styles.src) .pipe(sass({includePaths: ['scss'], style: 'expanded' })) .pipe(autoprefixer("last 3 version","safari 5", "ie 8", "ie 9")) .pipe(concat('style.css'))         .pipe(cleanCSS()) //*minify     console.log('Sass File Built'); });

//SPRITE SHEET gulp.task('sprite-watch', function(){     var spriteData = gulp.src(paths.images.sprites)         .pipe(spritesmith({             imgName: '../images/spriteSheet.png',             cssName: 'spriteSheet.css'         }))     spriteData.img.pipe(gulp.dest(paths.images.main));     spriteData.css.pipe(gulp.dest(paths.styles.main));     console.log('Watching SpriteSheet and SpriteSheet CSS'); });

gulp.task('sprite-build', function(){     var spriteData = gulp.src(paths.images.sprites)         .pipe(spritesmith({             // this whole image path is used             //in css background declarations             imgName: 'spriteSheet.png',             cssName: 'spriteSheet.css'         }));     spriteData.img.pipe(gulp.dest(paths.base.dist));     spriteData.css.pipe(autoprefixer("last 3 version","safari 5", "ie 8", "ie 9"))         .pipe(cleanCSS())     console.log('Bulding SpriteSheet and SpriteSheet CSS'); });

//JAVASCRIPT WATCH {Compress} gulp.task('JS-watch', function(){     gulp.src(paths.scripts.src)      gulp.dest(paths.scripts.main) console.log('Updating JS Files'); });

gulp.task('JS-build', function(){     gulp.src(paths.scripts.src)      .pipe(uglify())//*minify     console.log('Concating and moving all the JS files in /js folder'); });

//BROWSER SYNC - LIVE RE-LOAD // can use 'serve' where 'browser-sync' is used gulp.task('browser-sync', function() {
browserSync.init([paths.base.css, paths.base.js], { server: { baseDir: paths.base.src } }); });

//IMAGE-MINIFY gulp.task('tinypng', function () {     gulp.src(paths.images.src)         .pipe(tinypng({             key: '',             //sigFile: 'images/.tinypng-sigs',             log: true         }))       .pipe(gulp.dest(paths.base.dist));   console.log('Minifying Image'); });

//COPY SVG gulp.task('copy-svg', function(){     gulp.src(paths.images.svg)     .pipe(gulp.dest(paths.base.dist));     console.log('Copy SVG'); });

//COPY FONTS gulp.task('copy-fonts', function(){     gulp.src(paths.images.fonts)     .pipe(gulp.dest(paths.base.dist));     console.log('Copy FONTS'); });

//CLEAN DIST FOLDER gulp.task('clean:dist', function() { return del.sync([paths.base.dist, paths.base.main + '*.zip']); });

//INLINE CSS AND JAVASCRIPT gulp.task('inlinesource', function () { return gulp.src(paths.html.src) .pipe(inlinesource()) .pipe(gulp.dest(paths.base.dist)); console.log('Adding Javscript and CSS to Hmtl Inline'); });

//REPLACE gulp.task( 'replace', [ 'inlinesource' ], function( done ) { gulp.src( paths.base.dist + '/index.html' ) .pipe( replace( '../images/', 'images/') ) .pipe( replace( 'images/', './') ) .pipe( gulp.dest( paths.base.dist ) ) .on('end', function () { done(); }); });

//ZIP FILES - FOLDER gulp.task('zip-the-files', function() {     gulp.src( paths.base.dist + './*' ) .pipe(zip(zipName + '.zip'))         .pipe(gulp.dest('./'))         .on('error', notify.onError({      title: 'Zip File Failed',      message: 'One or more tests failed, see cli for details.'     }));     console.log('Zipping Filename = ', zipName); });

//WATCH gulp.task('watch', function() {     gulp.watch(paths.styles.src, ['sass']);// sass     gulp.watch(paths.styles.src).on('change', browserSync.reload);//sass     gulp.watch(paths.scripts.src).on('change', browserSync.reload);//.js     gulp.watch(paths.base.html).on('change', browserSync.reload);//html     gulp.watch(paths.images.sprites,['sprite-watch']);//sprite });

//DEFAULT TASKS gulp.task('default',['sass', 'sprite-watch', 'JS-watch', 'browser-sync', 'watch']);

//BUILD TASK gulp.task('build',['clean:dist', 'sass-build', 'JS-build', 'copy-html', 'copy-svg', 'replace', 'sprite-build'/, 'tinypng','zip-the-files'/], function(){

});

[phated]

This is not a support forum. Support questions should be directed to StackOverflow.