javascript - descargar - install gulp windows

Gulp.js orden de fusión de secuencia de eventos

Question

Estoy intentando fusionar archivos css y scss en un archivo main.css que se encuentra en mi directorio de compilación. Está funcionando, pero no en el orden correcto. Los atributos de estilo de los archivos scss deben estar en la parte inferior del archivo main.css para que anulen el resto.

Mi tarea Gulp se ve así:

 //CSS
gulp.task(''css'', function () {
var cssTomincss = gulp.src([''dev/css/reset.css'', ''dev/css/style.css'',''dev/css/typography.css'', ''dev/css/sizes.css'']);
var cssFromscss = gulp.src([''dev/css/*.scss''])
.pipe(sass());
return es.merge(cssTomincss, cssFromscss)
.pipe(concat(''main.css''))
.pipe(minifyCSS())
.pipe(gulp.dest(''build/css''))
});

Estoy definiendo las fuentes primero con variables. Estoy utilizando el complemento gulp-sass para convertir el archivo scss a css normal (.pipe (sass)) y luego fusiono los dos con la función es.merge y los concatené en main.css.

El problema es que los atributos de estilo de los archivos .scss terminan en algún lugar en el extremo superior del archivo main.css. Los necesito para estar en el fondo. Así que necesitan ser concatenadas en la parte inferior.

¿Alguna pista sobre cómo hacer esto?

Answer 1

Fallé con todas las respuestas proporcionadas, produjeron algunos errores silenciosos. Finalmente, merge2 funcionó para mí (parece que hubo gulp-merge y más tarde se cambió el nombre del proyecto a merge2 ). No estoy seguro de por qué hay una necesidad en el plugin de streamify , por ejemplo, los flujos creados con Rollup pueden producir "errores de flujo no soportado" con gulp-concat , gulp-uglify o gulp-insert .

const mergeStreams = require(''merge2'');
const streamify = require(''streamify'');
...
gulp.task(''build'', () => {
const streams = sources.map(createJSFile);
return mergeStreams(...streams)
.pipe(streamify(concat(''bundle.js'')))
.pipe(streamify(uglify()))
.pipe(gulp.dest(''./dist''));
});

Answer 2

Lo intenté sin éxito: el orden de alguna manera no se tuvo en cuenta.

La solución que funcionó para mí fue usar stream-series , mencionada por Aperçu .

return streamSeries(
cssTomincss,
cssFromscss)
.pipe(concat(''main.css''))
.pipe(minifyCSS())
.pipe(gulp.dest(''build/css''));

Answer 3

Parece que el plugin gulp-order encaja perfectamente bien en su caso.

Le permite reordenar la stream pasada con su propio patrón glob , por ejemplo, basado en su código:

return es.merge(cssTomincss, cssFromscss)
.pipe(order([
''dev/css/reset.css'',
''dev/css/style.css'',
''dev/css/typography.css'',
''dev/css/sizes.css'',
''dev/css/*.css'',
]))
.pipe(concat(''main.css''))
.pipe(minifyCSS())
.pipe(gulp.dest(''build/css''))

Un inconveniente de esto es que tiene que volver a declarar sus globs , pero puede desplazarse asignando sus globs a un valor y luego concentrarlos en su tubería de order , mucho más limpio.

Puede que tengas que configurar la opción base para . de orden trillado como se indica en su Léame si los archivos no se ordenaron correctamente.

Otra forma sería utilizar stream-series , básicamente lo mismo que la secuencia de eventos , pero el orden de su secuencia se conserva y no tiene que volver a escribir sus globs .

Answer 4

Pruebe streamqueue .

var streamqueue = require(''streamqueue'');
gulp.task(''css'', function () {
return streamqueue({ objectMode: true },
gulp.src([''dev/css/reset.css'', ''dev/css/style.css'', ''dev/css/typography.css'', ''dev/css/sizes.css'']),
gulp.src([''dev/css/*.scss'']).pipe(sass())
)
.pipe(concat(''main.css''))
.pipe(minifyCSS())
.pipe(gulp.dest(''build/css''))
});

Esta hoja de trucos te ayudará. PDF está aquí.