Only one file being minified

[tetreault]

Hey, thanks for this module. I'm not sure I'm missing something totally obvious but only one of my files is being minified. The directories are:

public/src/css/*.css (contains main.css)
pubilc/src/css/vendor/*.css (contains bootstrap etc)

Below are the relevant snippets:

const cssUserSources = 'public/src/css/*';
const cssVendorSources = 'public/src/css/vendor/*';
const cssUserOutputDir = 'public/dist/css';
const cssVendorOutputDir = 'pubilc/dist/css/vendor';

// css tasks
gulp.task('css', () => {
  gulp.src(cssVendorSources)
    .pipe(cleanCss({debug: true}, (details) => {
      console.log(details.name + ': ' + details.stats.originalSize);
      console.log(details.name + ': ' + details.stats.minifiedSize);
    }))
    .pipe(gulp.dest(cssVendorOutputDir));

  gulp.src(cssUserSources)
    .pipe(cleanCss({debug: true}, (details) => {
      console.log(details.name + ': ' + details.stats.originalSize);
      console.log(details.name + ': ' + details.stats.minifiedSize);
    }))
    .pipe(gulp.dest(cssUserOutputDir));
});

After my gulp file runs successfully, I check the dist/css folder and only see main.css is there, not any of the files in dist/css. However, when I run the gulp file I see the console logs from the above snippet for all the css files.

Node: v8.2.1
npm: 5.4.1

[scniro]

@tetreault hey there, thanks for opening this up. The good news is, what you shared appears to be easily correctable. Check out the following example...

gulp.task('css:vendor', () => {
  return gulp.src(cssVendorSources)
    .pipe(cleanCss({debug: true}, (details) => {
      console.log(details.name + ': ' + details.stats.originalSize);
      console.log(details.name + ': ' + details.stats.minifiedSize);
    }))
    .pipe(gulp.dest(cssVendorOutputDir));
});

gulp.task('css:source', () => {
  return gulp.src(cssUserSources)
    .pipe(cleanCss({debug: true}, (details) => {
      console.log(details.name + ': ' + details.stats.originalSize);
      console.log(details.name + ': ' + details.stats.minifiedSize);
    }))
    .pipe(gulp.dest(cssUserOutputDir));
});

gulp.task('css', ['css:vendor', 'css:source']);

Since you're essentially trying to run two asynchronous tasks, I believe once one completes the execution aborts. I don't have an exact technical explanation on hand right this moment, but this blog post, Task Dependencies in Gulp, and this StackOverflow answer explain a bit more. Speaking of, I'd suggest asking asking a question there next time! The awesome SO community will surely dish up a great answer for you far faster than I can on here (seriously, less than a few minutes in most cases 😎). Anyways, I hope this resolves it for you. Please keep me posted with your findings.

[tetreault]

awesome thanks for the quick reply, going to try it out now! the reasoning you provided makes total sense, was a little burnt out yesterday cant believe that didnt occur to me!