Question

当我尝试在gulp中链接和运行我的npm脚本时，我看到了多次重复执行我的节点脚本。下面是我的gulp文件。

signInButton

我的节点脚本，确实没有任何问题，我尝试了节点图标-json它工作得很好，没有重复动作。

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

当我运行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); });

时，我的终端看起来像这样

gulp icons

Answer 1

您正在为npm run icons-to-json中的每个svg图标运行base + 'icons/。

如果您只希望运行一次，则需要按照此处所示的模式进行操作：https://github.com/gulpjs/gulp/blob/master/docs/recipes/using-multiple-sources-in-one-task.md

也就是说，第一个流处理所有图标，下一个流运行npm脚本 - 合并这两个流并且您有一个任务。

另一种方法是将第二个流作为单独的任务运行，该任务仅在完成处理图标的第一个任务后运行。

<强>更新

以下是我提到的第一个模式的一些例子：

Gulpjs combine two tasks into a single task

以下是第二种方法的示例：

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

使用gulp运行npm脚本得到重复动作

1 个答案: