0

I want to build watchers dynamically. Therefor I have the following code:

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

The watch-task initially builds all stylesheets. After that it generates the watchers for each main stylesheet in a loop.

My problem is, that I have these main scss-files, which can all import the same file. In this example it is the _view.scss. When I make a change in this file (_view.scss) the corresponding main stylesheets are overwritten as often as the _view.scss occurs as an import. So in this case the _views.scss is imported 4 times and so each main stylesheet is overwritten 4 times.

How can I achieve a single execution?

Greetings Lars

stark
  • 12,615
  • 3
  • 33
  • 50
Lars
  • 45
  • 6
  • I'm not certain I understand what you're trying to do here, but would an acceptable solution be a single main.scss file that would use @includes to include all the other scss files, and just compile that into a single css file? That would at least solve your problem (if I understand it correctly). I can write a full answer but I currently do not understand if this is somehow not a good solution for you. – Kalle Björklid Jan 06 '15 at 06:28
  • I would have done that in that way. I do that in all my projects. That was my first proposal, but it are a lot of scss files and the structure has to stay the same. So, I'm not allowed to change it. That's why I have to find a solution for the multiple execution problem. – Lars Jan 06 '15 at 07:55

0 Answers0