español - gulp watch

Gulpjs combina dos tareas en una sola tarea

Question

Actualmente tengo dos tareas, que ambos compilan archivos sass. Todavía me gustaría agrupar los dos directorios en archivos separados, pero parece que sería más fácil de mantener si simplemente pudiera crear una tarea ''sass'' que sería responsable de toda la compilación de 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''));
});

ACTUALIZAR:

He intentado esto:

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

Pero ahora parece que ninguno de los archivos está siendo compilado. ¿Alguna sugerencia sobre lo que estoy haciendo mal?

Answer 1

¿Has intentado usar 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);

});

Vea https://blog.mariusschulz.com/2015/05/02/merging-two-gulp-streams para más detalles

Answer 2

Acabo de encontrar un plugin trago llamado gulp-all y lo probé. Es fácil de usar.

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

La documentación del paquete dice:

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);

También puedes poner subtareas en una matriz:

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

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

Answer 3

Con Gulp4 puedes utilizar:

• gulp.series para ejecución secuencial

• gulp.parallel para ejecución paralela

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

Artículo sobre aquí
Ya no necesitas el plugin de run-sequence
Necesitas instalar: npm install -D gulp @ next

Answer 4

Creo que la forma correcta de hacerlo es mediante la dependencia de tareas.

Gulp puede definir tareas que deben ejecutarse antes de una tarea determinada.

Por ejemplo:

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

Cuando se realizan gulp scripts de gulp scripts en el terminal, se ejecuta clean antes de la tarea de secuencias de comandos.

En su ejemplo, tendría las dos tareas SASS separadas como una dependencia de una tarea SASS común. Algo como:

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

Lea más sobre la dependencia de la tarea en la sección de recetas de Gulp: https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-tasks-in-series.md

Answer 5

En gulp4 (todavía en alfa), tenemos paralelos, así que puedes hacer:

// 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

También puedes escribirlo como una sola tarea haciendo:

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''));
  }));

Prefiero el primer método porque es más fácil de mantener.

Answer 6

Funciona.

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

Answer 7

LA SOLUCIÓN: llamar a las funciones !!!

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

Tenga en cuenta el bootstrap () , site () para que devuelvan una promesa :)

Answer 8

Resulta que la función site() estaba devolviendo un error. Para arreglarlo, necesitaba asegurarme de que bootstrap() ejecutaba primero, así que terminé con esto:

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

Answer 9

También es posible crear otra tarea para compilar otras tareas pasando una matriz de nombres de tareas como esta:

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'']);

entonces simplemente puede ejecutar gulp compile-all-sass

Answer 10

Solución 1:

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

gulp.start ejecuta tareas en paralelo. Y es asíncrono, lo que significa que ''bootstrap-sass'' puede estar terminado antes de ''site-sass''. Pero no se recomienda porque

gulp.start no está documentado a propósito porque puede llevar a archivos de compilación complicados y no queremos que la gente lo use

vea https://github.com/gulpjs/gulp/issues/426

Solución 2:

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

run-sequence es un plugin truculento.

Ejecuta una secuencia de tareas engañosas en el orden especificado. Esta función está diseñada para resolver la situación en la que ha definido el orden de ejecución, pero elige no usar o no las dependencias.

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

Esta línea ejecuta ''boostrap-sass'' y ''site-sass'' en paralelo. Si desea ejecutar tareas en serie, puede

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