CODEWITHSUNDEEP
javascriptnode.jsgulp
Alex Yong
Alex Yong

Reputation: 7645

run npm script using gulp got repeated action

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

Upvotes: 0

Views: 300

Answers (1)

HJ Cross
HJ Cross

Reputation: 66

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');
});

Upvotes: 1

Related Questions