gulp - How to concatenate multiple files with watch?

Question

I want to select a couple of files, and generate concatenated files from them. And also want to concatenate my changed files.
This is my assets tree:

assets
  - css
  - js
  - sass
    - _midia_queries.scss
    - media-combine.scss
    - query.scss

So, I want to generate maximum.css(./assets/css/media-combine.min.css) and medium.css(./assets/css/media-combine.min.css, ./assets/css/query.min.css).

Both .min files are been generated by my css task. See below:

gulp.task('css', function (done) {
    gulp.src(paths.sass.src)
        .pipe(plugins.changed('dist'))
        .pipe(plugins.sass())
        .pipe(plugins.combineMediaQueries())
        .pipe(plugins.autoprefixer())
        .pipe( isProduction ? plugins.minifyCss() : gutil.noop() )
        .pipe( isProduction ? plugins.rename({ suffix: ".min" }) : gutil.noop() )
        .pipe(gulp.dest(paths.css.dest))
        .on("end", done);
});

And my concat-css task is using my bad approach of multiple generation files:

gulp.task('concat-css', ['css'], function (done) {
    concatType("css", done);
});

function concatType (type, done) {
    if (isProduction) {
        var task = gulp;
        filesToConcat[type].forEach(function (value) {
            value.files.forEach(function (file, fileIndex) {
                value.files[fileIndex] = paths[type].dest + file;
            });

            gutil.log('File', gutil.colors.green(value.compiled), 'is beign concatenated');
            task = gulp.src(value.files)
                .pipe(plugins.concat(value.compiled))
                .pipe(gulp.dest(paths[type].dest));
            gutil.log('Ready to go!');
        });
        task.on("end", done);
    }
}

Update

When I type gulp on my console/terminal, it runs perfectly my css and concat-css tasks, but, when the watch tasks is triggered by a file change, both run, but, only css works. My .min files are updated, but, my concatenated files are not.

Any ideas to approach this? Thanks.

Could this be due to the fact that gulp runs tasks simultaneously by default? Your css and css-concat tasks will likely be running at the same time. [This SO post may help](http://stackoverflow.com/questions/22824546/how-to-run-gulp-tasks-synchronously-one-after-the-other) — jonowzz, Aug 21 '15 at 21:22
It helped. And I've made a few changes. So, now the only problem is when my *.scss* file is updated, it says it concats my files, but it won't happen. — klauskpm, Aug 21 '15 at 22:03
Try only referencing the 'concat-css' script from the default and watch tasks as you will be running the css part twice otherwise. ie. `gulp.task("default", ['concat-css', 'watch']);` and `gulp.watch(paths.sass.src, ["concat-css"])` — jonowzz, Aug 21 '15 at 22:22
I've tried it. It gives a better performance answer, but, still doesn't work at my watch task. — klauskpm, Aug 25 '15 at 13:40

score 0 · Accepted Answer · answered Aug 25 '15 at 13:49

Sorry, it was a logic problem.

At my concatType function, when I was setting up the path for the targeted files, but, when it was running on watch the path was set a second time, like this:

./assets/css/./assets/css/query.min.css

It would never work. So, I've changed this:

 value.files.forEach(function (file, fileIndex) {
     value.files[fileIndex] = paths[type].dest + file;
 });

 task = gulp.src(value.files)

For this:

files = [];
value.files.forEach(function (file) {
    files.push(paths[type].dest + file);
});

task = gulp.src(files)

gulp - How to concatenate multiple files with watch?

Update

1 Answers1