run npm script using gulp got repeated action

Question

I saw multiple repeated execution of my node script when I try to chain and run my npm script in gulp. Below is my gulp file.

gulp.task('icons', function() {
    return gulp.src( base + 'icons/*.svg' )
        .pipe($.iconfontCss({
            targetPath  : "../css/myicons.css",
            fontPath    : '../fonts/',
            cssClass    : 'sa-icon',
        }))
        .pipe($.iconfont({
            formats     : ['svg', ],
            timestamp   : Math.round(Date.now()/1000),
        }))
        .pipe(gulp.dest( dist.fonts ))
        .pipe(run('npm run icons-to-json')); 
});

My node script, there's nothing wrong with it for sure, I tried node icons-to-json it worked just fine, don't have repeated action.

const iconsFolder = './icons';
const fs = require('fs');
const jsonfile = require('jsonfile');

    let json = [];
    fs.readdir(iconsFolder, [], (err, files) => {
      files.forEach(file => {
        if(file.split('.')[0] !== 'icons'){
            json.push({'name': file.split('.')[0]})
        }
      });
      jsonfile.writeFile(iconsFolder+'/icons.json' , json);
    });

My terminal look like this when I run gulp icons

[12:11:23] Using gulpfile ~\Projects\my-web\gulpfile.js
[12:11:23] Starting 'icons'...
[12:11:23] gulp-svgicons2svgfont: Font created
$ npm run icons-to-json

> @ icons-to-json C:\Users\Superant-Laptop\Projects\my-web\
> node icons-to-json

$ npm run icons-to-json

> @ icons-to-json C:\Users\Superant-Laptop\Projects\my-web\
> node icons-to-json

$ npm run icons-to-json

> @ icons-to-json C:\Users\Superant-Laptop\Projects\my-web
> node icons-to-json

$ npm run icons-to-json

> @ icons-to-json C:\Users\Superant-Laptop\Projects\my-web
> node icons-to-json

[12:11:33] Finished 'icons' after 9.97 s

score 1 · Answer 1 · edited May 23 '17 at 12:32

1

You are running npm run icons-to-json for every svg icon you have in base + 'icons/.

If you only want that to run once, you need to follow the pattern as shown here: https://github.com/gulpjs/gulp/blob/master/docs/recipes/using-multiple-sources-in-one-task.md

That is, the first stream processes all icons and the next stream runs an npm script - merge both of those streams and you have one task.

The alternative is to run the second stream as a separate task which runs only after first task of processing icons is done.

Update:

Here are some examples of patterns like the first I mentioned:

Gulpjs combine two tasks into a single task

Here is an example of the second approach:

gulp.task('icons', function() {
    return gulp.src( base + 'icons/*.svg' )
        .pipe($.iconfontCss({
            targetPath  : "../css/myicons.css",
            fontPath    : '../fonts/',
            cssClass    : 'sa-icon',
        }))
        .pipe($.iconfont({
            formats     : ['svg', ],
            timestamp   : Math.round(Date.now()/1000),
        }))
        .pipe(gulp.dest( dist.fonts ));
});

gulp.task('icons-to-json', function() {
  return run('npm run icons-to-json').exec();
});

gulp.task('icons-tasks', function() {
  gulp.start('icons', 'icons-to-json');
});

edited May 23 '17 at 12:32

Community

1
1

answered Mar 27 '17 at 04:40

HJ Cross

66
1
6

1

I think what I need is just run icons-to-json after the icons task. – Alex Yong Mar 27 '17 at 05:01
1

I would prefer that as well if I were in your situation. Please accept my answer if you think it answered what you asked for. Thanks! – HJ Cross Mar 27 '17 at 05:12
add the code it, I still haven't found any working solution yet, you gave me hint not answer. – Alex Yong Mar 27 '17 at 06:17
there's no relation btw icons task and npm task? You should put it in all. What if I just want to run icons task but i have other tasks besides these 2? – Alex Yong Mar 27 '17 at 14:33
I changed the code to make it more obvious what is going on. The relationship that icons and icons-to-json tasks have to each other is defined in the icons-tasks. In short, you can run icons task by itself, you could run icons-to-json task by itself, or you could run both by running the icons-tasks task. This last task could be run as a part of a bigger task that runs other tasks besides these two. – HJ Cross Mar 27 '17 at 16:37

run npm script using gulp got repeated action

1 Answers1