Как запустить задание после завершения gulp.watch и продолжить просмотр?

Question

Так что я изо всех сил стараюсь watch а также mix работать вместе.

У меня есть мой gulpfile, который делает что-то подобное для просмотра sass:

gulp.task('default',function(){
    gulp.src('resources/assets/sass/**/*.scss')
        .pipe(sass().on('error',sass.logError))
        .pipe(gulp.dest('resources/assets/css/'));

    gulp.watch('resources/assets/sass/**/*.scss',['styles']);
})

У меня тоже есть мой смешивающий скрипт, который использует выходные данные задачи, прежде чем сделать мой файл CSS:

elixir(function(mix) {
    mix.styles(
        [
            "../metronic/global/css/components-rounded.css",
            "../metronic/global/css/plugins.css",
            "../metronic/admin/layout3/css/layout.css",
            "../metronic/admin/layout3/css/custom.css",
            "../metronic/admin/pages/css/timeline.css",
            "../dist/sweetalert.css",
            "../dist/toastr.min.css",
            "../css/global.css",
        ],
        'public/css/layout.css'
    );
}

Дело в том, что я не понимаю, как объединить оба watch в elixir(function) это остановит процесс, и если я поставлю его после опеки, он будет работать только на gulp один раз.

Тогда у меня может возникнуть вопрос: как выполнить задание после завершения gulp.watch и продолжить просмотр?

Answer 1

Я предполагаю, что вы все .scss файлы не имеют префикса _, Если вы префикс .scss файлы с _парсер scss не скомпилирует .scss файл как самостоятельный файл. Итак, технически вам не нужно elixir (Опять же, предполагая, что elixir используется для объединения всех CSS-файлов) здесь. Вы глотаете код будет просто:

gulp.task('default',function(){
    gulp.src('resources/assets/sass/**/*.scss')
        .pipe(sass().on('error',sass.logError))
        .pipe(gulp.dest('resources/assets/css/'));

    gulp.watch('resources/assets/sass/**/*.scss',['styles']);
})

Теперь сделайте следующее:

• Префикс всех .scss файлы с _, Пример: _components-rounder.scss, _plugins.scss и т.п.
• Создать layout.scss (без _ префикс) и вставьте в него следующий код:

---

@import "relative/path/to/components-rounder";
@import "relative/path/to/plugins";
// Include all other scss files below without underscore prefix and extension as I shown above

Answer 2

Используйте глоток

npm install gulp-batch --save-dev

Запустите вашу sass-программу где-нибудь еще и позвольте часам делать то, что она делает, пока запускаете sass для изменений

var batch = require('gulp-batch');

gulp.task('default',function(){
    gulp.src('resources/assets/sass/**/*.scss')
        .pipe(sass().on('error',sass.logError))
        .pipe(gulp.dest('resources/assets/css/'));
})

gulp.task('watch',function(){
    // Run watch
    gulp.watch('resources/assets/sass/**/*.scss',['styles'], batch(function(events, cb) {
      // run every time on changes
      gulp.start('default', cb);
    }));
})

Answer 3

Хорошо, после часа потери волос вот решение:

Прежде всего вы должны использовать elixir Однако я не нашел правильного решения, работающего по-другому.

Довольно легко, когда вы видите это: mix.sass("*.scss","resources/assets/css/global.css");

Как только вы сделали это вместо того, чтобы просто gulp использование gulp watch который будет искать любые изменения в файлах вашей функции эликсира.

Так как он содержит файлы, измененные mix.sass(...) он автоматически перезапустит микширование вашего стиля.

Наконец это выглядит так:

elixir(function(mix) {

    mix.sass("*.scss","resources/assets/css/global.css");

    mix.styles(
        [
            "../metronic/global/css/components-rounded.css",
            "../metronic/global/css/plugins.css",
            "../metronic/admin/layout3/css/layout.css",
            "../metronic/admin/layout3/css/custom.css",
            "../metronic/admin/pages/css/timeline.css",
            "../dist/sweetalert.css",
            "../dist/toastr.min.css",
            "../css/global.css",
        ],
        'public/css/layout.css'
    );

}