0

我想动态地建立观察者。因此，我有以下代码：

gulp.task('watch', ['build-styles'], function() {
  for(var j = 0; j < watchStylesIndicator.length; j++) {
    setWatchPipe(watchStylesIndicator[j]);
  }

  gulp
    .watch([ basePaths.dest + '/assets/css/*.css' ], [ 'build-manifest' ])
    .on('change', function(event) { changeEvent(event); });
});

function setWatchPipe(groupName) {
  gulp.watch(watchStyles[groupName], function(e) {
    var name = groupName.charAt(0).toUpperCase() + groupName.slice(1);

    return gulp.src(appFiles.styles['src' + name])
      .pipe($.plumber({ errorHandler: function (error) {}}))
      .pipe($.rubySass({
          style: sassStyle,
          compass: true,
          noCache: true
      }))
      .pipe($.plumber.stop())
      .pipe(gulp.dest(paths.styles.destTemp))
      .pipe($.size({
          showFiles: true
      }));
  });
}

watchStylesIndicator = ['list', 'page', 'shop', 'submit'];

watchStyles = {
  shop: [
    basePaths.src + stylePaths + '/shop/shop.scss',
    basePaths.src + stylePaths + '/shop/_similar-shops.scss',
    basePaths.src + stylePaths + '/voucher/_view.scss'
  ],
  submit: [
    basePaths.src + stylePaths + '/voucher/submit.scss',
    basePaths.src + stylePaths + '/voucher/_view.scss',
    basePaths.src + stylePaths + '/_checkout.scss'
  ],
  list: [
    basePaths.src + stylePaths + '/voucher/list.scss',
    basePaths.src + stylePaths + '/voucher/_view.scss'
  ],
  page: [
    basePaths.src + stylePaths + '/voucher/_popup.scss',
    basePaths.src + stylePaths + '/voucher/_view.scss'
  ],
};

appFiles = {
  styles: {
    srcPage:    paths.styles.srcPage + '/page.scss',
    srcShop:    paths.styles.srcShop + '/shop.scss',
    srcSubmit:  paths.styles.srcVouch + '/submit.scss',
    srcList:    paths.styles.srcVouch + '/list.scss'
  }
};

监视任务最初构建所有样式表。之后，它会在循环中为每个主样式表生成观察者。

我的问题是，我有这些主要的 scss 文件，它们都可以导入同一个文件。在此示例中，它是 _view.scss。当我在此文件 (_view.scss) 中进行更改时，相应的主样式表将被覆盖，因为 _view.scss 作为导入出现。所以在这种情况下 _views.scss 被导入 4 次，因此每个主样式表被覆盖 4 次。

如何实现单次执行？

问候拉尔斯

4

0 回答 0