How to run gulp task from code?

Question

gulp.js

Hello, I have a gulp build, it has a task to build less of the main file, it looks like this

gulp.task('less1', function() {
    return gulp.src(src.less)
        .pipe(plumber())
        .pipe(less())
        .pipe(min())
        .pipe(pref({
            browsers: ['last 8 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('app/css'))
        .pipe(reload({stream:true}));
})

I also came up with the idea to write rules for media queries in separate files, it looks like this

gulp.task('media', function() {
    return gulp.src(src.media)
        .pipe(plumber())
        .pipe(less())
        .pipe(min())
        .pipe(pref({
            browsers: ['last 8 versions'],
            cascade: false
        }))
        .pipe(reload({stream:true}));
})

There is also a watcher

gulp.task('watcher', function() {
    gulp.watch(src.less, ['less1']);
    gulp.watch(src.media, ['media']);
})

gulp.task('default', ['watcher', 'sync'])

The problem is that changes to media files are only applied when I save the main stylesheet. In the main file, media files are connected via import.
The question is, can I somehow solve this issue without using the concat plugin?

Answer 1

I also came up with the idea to write rules for media queries in separate files, it looks like this

A very bad idea.
You are using a preprocessor. Use it to the fullest. Write media rules right inside the selector they apply to.
Plus, start using a plugin for combining media (combine-mq and the like) - they will collect all the media at the end of the file in the resulting css.
On the subject: you can call multiple tasks

gulp.watch(src.less, ['less1', 'media']);
gulp.watch(src.media, ['media']);