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

Поэтому я изо всех сил пытаюсь, чтобы и 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 и продолжить просмотр?


laravel sass gulp laravel-elixir
person Baldráni    schedule 19.05.2016    source источник

Ответы (3)


arrow_upward
1
arrow_downward

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

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
person Mr_Green    schedule 19.05.2016
comment
Хорошая идея, но мне нужно было использовать эликсир: / Мне наконец удалось это сделать, и я разместил ответ ниже :) - person Baldráni; 19.05.2016

arrow_upward
1
arrow_downward

Используйте gulp-batch.

npm install gulp-batch --save-dev

Запустите свои дерзкие вещи где-нибудь в другом месте и позвольте часам делать то, что они делают, пока вы запускаете свою дерзость на изменениях.

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);
    }));
})
person Wilmer SH    schedule 19.05.2016

arrow_upward
0
arrow_downward

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

Прежде всего, вы должны использовать 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'
    );

}
person Baldráni    schedule 19.05.2016