Gulpjs объединяет две задачи в одну задачу

ProgramBox

Gulpjs объединяет две задачи в одну задачу

Post author:admin
Запись опубликована:5 марта, 2023
Post category:Вопросы по программированию

#gulp #gulp-sass

Вопрос:

В настоящее время у меня есть две задачи, которые обе компилируют файлы sass. Я все равно хотел бы объединить два каталога в отдельные файлы, но, похоже, было бы удобнее поддерживать, если бы я мог просто создать задачу sass, которая отвечала бы за всю компиляцию sass.

 // Compile Our Sass
gulp.task('bootstrap-sass', function() {
  return gulp.src('./public/bower/bootstrap-sass/lib/*.scss')
    .pipe(sass())
    .pipe(contcat('bootstrap.css'))
    .pipe(gulp.dest('./public/dist/css'));
});

gulp.task('site-sass', function() {
  return gulp.src('./public/app/scss/*.scss')
    .pipe(sass())
    .pipe(contcat('site.css'))
    .pipe(gulp.dest('./public/dist/css'));
});

Обновить:

Я пробовал это:

 // Compile Our Sass
gulp.task('sass', function() {
  var bootstrap = function() {
    return gulp
      .src('./public/bower/bootstrap-sass/lib/*.scss')
      .pipe(sass())
      .pipe(concat('bootstrap.css'))
      .pipe(gulp.dest('./public/dist/css'));
  };

  var site = function() {
    return gulp
      .src('./public/src/scss/*.scss')
      .pipe(sass())
      .pipe(concat('site.css'))
      .pipe(gulp.dest('./public/dist/css'));
  };

  return Promise.all([bootstrap, site]);
});

Но теперь кажется, что ни один файл не компилируется. Любые предложения о том, что я делаю неправильно?

Ответ №1:

Я думаю, что правильный способ сделать это — использовать зависимость от задачи.

В gulp вы можете определить задачи, которые необходимо выполнить перед заданной задачей.

Например:

 gulp.task('scripts', ['clean'], function () {
    // gulp.src( ...
});

При выполнении gulp scripts в терминале очистка выполняется перед задачей скриптов.

В вашем примере у меня были бы две отдельные задачи SASS как зависимость от общей задачи SASS. Что-то вроде:

 // Compile Our Sass
gulp.task('bootstrap-sass', function() {
  return gulp.src('./public/bower/bootstrap-sass/lib/*.scss')
    .pipe(sass())
    .pipe(contact('bootstrap.css'))
    .pipe(gulp.dest('./public/dist/css'));
});

gulp.task('site-sass', function() {
  return gulp.src('./public/app/scss/*.scss')
    .pipe(sass())
    .pipe(contact('site.css'))
    .pipe(gulp.dest('./public/dist/css'));
});

gulp.task('sass', ['bootstrap-sass', 'site-sass']);

Подробнее о зависимости задач читайте в разделе Рецепты Gulp: https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-tasks-in-series.md

Ответ №2:

Это работает.

 var task1 = gulp.src(...)...
var task2 = gulp.src(...)...
return [task1, task2];

Ответ №3:

Решение 1:

 gulp.task('sass', function() {
  gulp.start('bootstrap-sass', 'site-sass');
})

gulp.start выполняет задачи параллельно. И это асинхронно, что означает, что ‘bootstrap-sass’ может быть завершен до ‘site-sass’. Но это не рекомендуется, потому что

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

см. https://github.com/gulpjs/gulp/issues/426

Решение 2:

 var runSequence = require('run-sequence');
gulp.task('sass', function (cb) {
  runSequence(['bootstrap-sass', 'site-sass'], cb);
});

run-sequence — это плагин gulp.

Запускает последовательность задач gulp в указанном порядке. Эта функция предназначена для решения ситуации, когда вы определили порядок выполнения, но решили не использовать или не могут использовать зависимости.

 runSequence(['bootstrap-sass', 'site-sass'], cb);

Эта строка выполняет ‘boostrap-sass’ и ‘site-sass’ параллельно.Если вы хотите запускать задачи последовательно, вы можете

 runSequence('bootstrap-sass', 'site-sass', cb);

1. Не могли бы вы объяснить свой ответ, пожалуйста? ответы только для кода обычно не принимаются, потому что они не обязательно помогают другим понять, как самостоятельно решить проблему в будущем.

2. «Рекомендуемый» — это такой неправильный мир в эпоху после Windows xp

3. @ЯрославРахматуллин Could you explain it?

4. Это субъективное замечание; «рекомендуется» иногда используется для обозначения безопасного для идиотов выбора. Я оскорблен этим. В других случаях он используется, чтобы указать на выбор, который выгоден тому, кто задает вопрос (в отличие от того, кому он рекомендуется) — например, установить какое-либо вредоносное ПО (рекомендуется) в мастере установки. В этом ответе это безопасный для идиотов выбор. Это совершенно не имеет значения для двух независимых задач, рекомендация бесполезна для любого другого случая, когда очень конкретный вариант использования saas1, а затем sass2. Имхо, лучше разбираться в вещах, чем следовать рекомендациям

5. @ЯрославРахматуллин Я использую «рекомендуется» для обозначения совета или предложения. Добавлены некоторые объяснения, почему это не рекомендуется.

Ответ №4:

С помощью Gulp4 вы можете использовать:

gulp.series для последовательного выполнения
gulp.parallel для параллельного выполнения

gulp.task('default', gulp.series('MyTask001', 'MyTask002'));
gulp.task('default', gulp.parallel('MyTask001', 'MyTask002'));

Статья о здесь
Вам больше не нужен плагин последовательности
выполнения, вам нужно установить: npm install -D gulp@next

Ответ №5:

Я только что нашел вызываемый плагин gulp gulp-all и попробовал его. Он прост в использовании.

https://www.npmjs.com/package/gulp-all

В документации к пакету говорится:

 var all = require('gulp-all')

var styl_dir = 'path/to/styles/dir'
var js_dir   = 'path/to/scripts/dir'

function build() {
    return all(
        gulp.src(styl_dir   '/**/*')
            // build Styles 
            .pipe(gulp.dest('dist_dir')),
        gulp.src(js_dir   '/**/*')
            // build Scripts 
            .pipe(gulp.dest('dist_dir'))
    )
}

gulp.task('build', build);

также вы можете поместить подзадачи в массив:

 var scriptBundles = [/*...*/]

function build(){
    var subtasks = scriptBundles.map(function(bundle){
        return gulp.src(bundle.src).pipe(/* concat to bundle.target */)
    })
    return all(subtasks)
}

1. Я отредактировал ваш ответ, чтобы процитировать то, что вы скопировали из документации пакета. Вам определенно следует также добавить в свой ответ предупреждение (как и в самом пакете) о том, что он работает только с Gulp 4, который еще не выпущен.

Ответ №6:

В версии Gulp 4 у нас есть parallel , так что вы можете сделать:

 // Compile Our Sass
gulp.task('bootstrap-sass', function() {
  return gulp.src('./public/bower/bootstrap-sass/lib/*.scss')
    .pipe(sass())
    .pipe(concat('bootstrap.css'))
    .pipe(gulp.dest('./public/dist/css'));
});

gulp.task('site-sass', function() {
  return gulp.src('./public/app/scss/*.scss')
    .pipe(sass())
    .pipe(concat('site.css'))
    .pipe(gulp.dest('./public/dist/css'));
});

gulp.task('sass', gulp.parallel('bootstrap-sass', 'site-sass')); // Combine

Вы также можете записать это как одну задачу, выполнив:

 gulp.task('sass', gulp.parallel(
  function() {
      return gulp.src('./public/bower/bootstrap-sass/lib/*.scss')
        .pipe(sass())
        .pipe(concat('bootstrap.css'))
        .pipe(gulp.dest('./public/dist/css'));
  },
  function() {
      return gulp.src('./public/app/scss/*.scss')
        .pipe(sass())
        .pipe(concat('site.css'))
        .pipe(gulp.dest('./public/dist/css'));
  }));

Я предпочитаю первый метод, потому что его проще поддерживать

Ответ №7:

Оказывается, site() функция возвращала ошибку. Чтобы исправить это, мне нужно было убедиться bootstrap() , что сначала выполняется, поэтому я закончил с этим:

 // Compile Our Sass
gulp.task('sass', function() {
  var bootstrap = function() {
    return gulp
      .src('./public/bower/bootstrap-sass/lib/*.scss')
      .pipe(sass())
      .pipe(concat('bootstrap.css'))
      .pipe(gulp.dest('./public/dist/css'));
  };

  var site = function() {
    return gulp
      .src('./public/src/scss/*.scss')
      .pipe(sass())
      .pipe(concat('site.css'))
      .pipe(gulp.dest('./public/dist/css'));
  };

  return bootstrap().on('end', site);
});

1. Я бы действительно рекомендовал решить это с помощью зависимостей задач вместо этого. Это не только предпочтительное решение, но и по сути то же самое, что вы делаете — только вы делаете это вручную и гораздо менее описательно, если вы спросите меня. Также, если вы действительно предпочитаете объединять потоки, вы можете заглянуть в «объединитель потоков». Вот пример, на который вы можете посмотреть: github.com/gulpjs/gulp/blob/master/docs/recipes /…

Ответ №8:

Я не уверен, правильно ли я понимаю вопрос, но если я это сделаю, это должно быть простым решением:

 gulp.task('sass', ['bootstrap-sass', 'site-sass']);

Ответ №9:

Вы пробовали использовать merge-stream?

 merge = require('merge-stream');
// Compile Our Sass
gulp.task('sass', function() {
  var bootstrap = gulp
      .src('./public/bower/bootstrap-sass/lib/*.scss')
      .pipe(sass())
      .pipe(concat('bootstrap.css'))
      .pipe(gulp.dest('./public/dist/css'));

  var site = gulp
      .src('./public/src/scss/*.scss')
      .pipe(sass())
      .pipe(concat('site.css'))
      .pipe(gulp.dest('./public/dist/css'));

  return merge(bootstrap, site);

});

См. https://blog.mariusschulz.com/2015/05/02/merging-two-gulp-streams для получения более подробной информации

Ответ №10:

РЕШЕНИЕ: вызовите функции!!!

 return Promise.all([bootstrap(), site()])

Помните о parens bootstrap(), site(), чтобы они возвращали обещание 🙂

Ответ №11:

Также возможно создать другую задачу для компиляции других задач, передав массив имен задач следующим образом:

 gulp.task('sass-file-one', function () {
     console.log('compiled sass-file-one')
});
gulp.task('sass-file-two', function () {
     console.log('compiled sass-file-two')
});

gulp.task('compile-all-sass', ['sass-file-one','sass-file-two']);

затем вы можете просто запустить gulp compile-all-sass