0

I'm currently trying to use one single svg sprite per page, so that it only loads the necessary svg's for each separate page. Is currently working, but I want to create an array so that the task get's called for N pages that I want.

I currently have this structure in gulpfile.js (vers 4):

var autoprefixer = require('autoprefixer'),
    browsersync = require('browser-sync').create(),
    cssnano = require('cssnano'),
    sourcemaps = require('gulp-sourcemaps'),
    del = require('del'),
    gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),
    newer = require('gulp-newer'),
    plumber = require('gulp-plumber'),
    postcss = require('gulp-postcss'),
    rename = require('gulp-rename'),
    sass = require('gulp-sass'),
    svgSprite = require('gulp-svg-sprite');

//Create SVG's into one single image file
function svgs(){
    return gulp
        .src('app/images/src/pageName/*')
        .pipe(svgSprite({
           shape: {
               spacing: {
                   padding: 5
               }
           },
           mode: {
               css: {
                   dest: './',
                   layout: 'diagonal',
                   sprite: 'images/dist/pageName/sprite.svg',
                   bust: false,
                   render: {
                       scss: {
                           dest: 'sass/modules/sprites/_pageName.scss',
                           template: 'app/sass/modules/sprites/_pageNameTemplate.scss'
                       }
                   }
               }
           },
           variables: {
               mapname: 'icons'
           }
       }))
       .pipe(gulp.dest('app/'));
}

exports.svgs = svgs;

The idea is to create an array with the page names and do a for loop:

    var pages = ['page1', 'page2',...];

    function svgs(){
        for (var i = 0; i < pages.length; i++) {

            return gulp
                 .src('app/images/src/' + pages[i] + '/*').........
    }

and then in the console just call the task, but the return only does it for one iteration, anyone have had this before?

Thanks !

Leo
  • 956
  • 8
  • 24

1 Answers1

1

Try glob.sync it returns an array:

const glob = require('glob');

const pageArray = glob.sync('path/to/your/*.pages');

function svgs(done)  {

  pageArray.forEach( page => {
    return gulp.src(page)
      ...
  };
  done();
}
Mark
  • 143,421
  • 24
  • 428
  • 436
  • The problem is that it only goes through the loop once, maybe because of the return? – Leo Oct 21 '19 at 17:21
  • No, the `return` is not a problem - you need it there. Print out the `pageArray` - does it have what you expect? Is it capturing all your `pages`? It is a glob so you can modify it to what you need, I don't know your file structure. Made a small edit to the code. – Mark Oct 21 '19 at 17:29
  • Well I'm using a regular for loop with a console.log inside, and it only prints the first position of the array, therefore it doesn't do the iterations for the rest – Leo Oct 21 '19 at 18:21
  • It does work with the const and the forEach, but why? Now I get another error: [20:28:55] The following tasks did not complete: svgs [20:28:55] Did you forget to signal async completion? – Leo Oct 21 '19 at 18:29
  • I edited the code to add the `done` call which will fix the `async` complaint. I did n't think it would be necessary with returning each stream but apparently it is. – Mark Oct 21 '19 at 19:20
  • I don't know why a `for` loop wouldn't work if the `forEach` does - it should, I would have to see that code but I would stick with the `forEach` anyhow. – Mark Oct 21 '19 at 19:23
  • Is this working for you now? i would appreciate an accepted answer if appropriate. – Mark Oct 21 '19 at 20:52
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/201268/discussion-between-leo-and-mark). – Leo Oct 22 '19 at 13:58