it-swarm.com.ru

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

В настоящее время у меня есть две задачи, которые компилируют sass-файлы. Я все еще хотел бы объединить эти две директории в отдельные файлы, но, похоже, было бы проще поддерживать, если бы я мог просто создать задачу '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'));
});

ОБНОВЛЕНИЕ:

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

// 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]);
});

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

51
Noah Goodrich

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

В 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

63
mikaelb

Оно работает.

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

Решение 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);
21
gzc

Я только что нашел плагин 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)
}
5
user5509760

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

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

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

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

3
Mark

Оказывается, что функция 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);
});
2
Noah Goodrich

В gulp4 (все еще в альфа-формате) у нас есть параллель, так что вы можете сделать:

// 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', 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(contact('bootstrap.css'))
        .pipe(gulp.dest('./public/dist/css'));
  },
  function() {
      return gulp.src('./public/app/scss/*.scss')
        .pipe(sass())
        .pipe(contact('site.css'))
        .pipe(gulp.dest('./public/dist/css'));
  }));

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

2
smac89

Вы пытались использовать 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 для получения более подробной информации

1
I-Lin Kuo

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

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

Знайте о паренах bootstrap (), site () так что они возвращают обещание :)

1
nicoabie

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

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

0
Angie