wake-up-neo.com

Kann ich eine Gulp-Aufgabe mit mehreren Quellen und mehreren Zielen verwenden?

Ich habe folgendes in meiner gulpfile.js: 

   var sass_paths = [
        './httpdocs-site1/media/sass/**/*.scss',
        './httpdocs-site2/media/sass/**/*.scss',
        './httpdocs-site3/media/sass/**/*.scss'
    ];

gulp.task('sass', function() {
    return gulp.src(sass_paths)
        .pipe(sass({errLogToConsole: true}))
        .pipe(autoprefixer('last 4 version'))
        .pipe(minifyCSS({keepBreaks:true}))
        .pipe(rename({ suffix: '.min'}))
        .pipe(gulp.dest(???));
});

Ich möchte meine minimierten CSS-Dateien in die folgenden Pfade ausgeben:

./httpdocs-site1/media/css
./httpdocs-site2/media/css
./httpdocs-site3/media/css

Missverstehe ich, wie man Quellen/Ziele verwendet? Oder versuche ich mit einer einzigen Aufgabe zu viel zu erreichen?

Bearbeiten: Aktualisierte Ausgabepfade für entsprechende Site-Verzeichnisse.

35
David Angel

Ich vermute, dass die laufenden Aufgaben pro Ordner Rezept helfen können.

Update

Folgen Sie den Ideen im Rezept und vereinfachen Sie Ihre Probe zu einfach, um die Idee zu geben.

var gulp = require('gulp'),
    path = require('path'),
    merge = require('merge-stream');

var folders = ['httpdocs-site1', 'httpdocs-site2', 'httpdocs-site3'];

gulp.task('default', function(){

    var tasks = folders.map(function(element){
        return gulp.src(element + '/media/sass/**/*.scss', {base: element + '/media/sass'})
            // ... other steps ...
            .pipe(gulp.dest(element + '/media/css'));
    });

    return merge(tasks);
});
54
Ghidello

sie möchten Merge-Streams verwenden, wenn Sie mehrere SRCs verwenden möchten, aber mehrere Ziele innerhalb derselben Quelle haben können. Hier ist ein Beispiel.

var merge = require('merge-stream');


gulp.task('sass', function() {
   var firstPath = gulp.src(sass_paths[0])
               .pipe(sass({errLogToConsole: true}))
               .pipe(autoprefixer('last 4 version'))
               .pipe(minifyCSS({keepBreaks:true}))
               .pipe(rename({ suffix: '.min'}))
               .pipe(gulp.dest('./httpdocs-site1/media/css'))
               .pipe(gulp.dest('./httpdocs-site2/media/css'));
   var secondPath = gulp.src(sass_paths[1])
               .pipe(sass({errLogToConsole: true}))
               .pipe(autoprefixer('last 4 version'))
               .pipe(minifyCSS({keepBreaks:true}))
               .pipe(rename({ suffix: '.min'}))
               .pipe(gulp.dest('./httpdocs-site1/media/css'))
               .pipe(gulp.dest('./httpdocs-site2/media/css'));
   return merge(firstPath, secondPath);
});

Ich nahm an, Sie wollten hier verschiedene Wege haben, also gibt es site1 und site2, aber Sie können dies an beliebig vielen Stellen tun. Sie können auch ein Ziel vor einem der Schritte angeben, wenn Sie beispielsweise ein Ziel mit der .min-Datei haben wollten und eines, das nicht vorhanden war.

6
ckross01

Mit gulp-rename können Sie ändern, wo Dateien geschrieben werden.

gulp.task('sass', function() {
    return gulp.src(sass_paths, { base: '.' })
        .pipe(sass({errLogToConsole: true}))
        .pipe(autoprefixer('last 4 version'))
        .pipe(minifyCSS({keepBreaks:true}))
        .pipe(rename(function(path) {
            path.dirname = path.dirname.replace('/sass', '/css');
            path.extname = '.min.css';
        }))
        .pipe(gulp.dest('.'));
});

Wichtiges Bit: Verwenden Sie die Option base in gulp.src.

5
Heikki

Für diejenigen, die sich fragen, wie sie mit Common/Specifics-CSS-Dateien umgehen können (funktioniert bei Skripten gleich), können Sie dieses Problem lösen:

var gulp = require('gulp');
var concat = require('gulp-concat');
var css = require('gulp-clean-css');

var sheets = [
    { src : 'public/css/home/*', name : 'home.min', dest : 'public/css/compressed' },
    { src : 'public/css/about/*', name : 'about.min', dest : 'public/css/compressed' }
];

var common = {
    'materialize' : 'public/assets/materialize/css/materialize.css'
};

gulp.task('css', function() {
    sheets.map(function(file) {
        return gulp.src([
            common.materialize, 
            file.src + '.css', 
            file.src + '.scss', 
            file.src + '.less'
        ])
        .pipe( concat(file.name + '.css') )
        .pipe( css() )
        .pipe( gulp.dest(file.dest) )
    }); 
});

Jetzt müssen Sie nur noch Ihre Blätter hinzufügen, wenn die Objektnotation erstellt wird.

Wenn Sie über zusätzliche Commons-Skripts verfügen, können Sie sie anhand des Namens auf dem Objekt common zuordnen und dann nach Materialize für dieses Beispiel hinzufügen, jedoch vor dem file.src + '.css', da Sie die allgemeinen Dateien mit Ihren Zolldateien überschreiben möchten.

Beachten Sie, dass Sie im Attribut src auch einen Pfad wie folgt eingeben können:

'public/css/**/*.css'

eine ganze Abhängigkeit abdecken.

2
Anwar

Ich hatte Erfolg, ohne etwas extra zu benötigen, eine Lösung, die Anwar Nairi's sehr ähnlich ist. _

const p = {
  dashboard: {
    css: {
      orig: ['public/dashboard/scss/style.scss', 'public/dashboard/styles/*.css'],
      dest: 'public/dashboard/css/',
    },
  },
  public: {
    css: {
      orig: ['public/styles/custom.scss', 'public/styles/*.css'],
      dest: 'public/css/',
    },
    js: {
      orig: ['public/javascript/*.js'],
      dest: 'public/js/',
    },
  },
};

gulp.task('default', function(done) {
  Object.keys(p).forEach(val => {
    // 'val' will go two rounds, as 'dashboard' and as 'public'
    return gulp
      .src(p[val].css.orig)
      .pipe(sourcemaps.init())
      .pipe(sass())
      .pipe(autoPrefixer())
      .pipe(cssComb())
      .pipe(cmq({ log: true }))
      .pipe(concat('main.css'))
      .pipe(cleanCss())
      .pipe(sourcemaps.write())
      .pipe(gulp.dest(p[val].css.dest))
      .pipe(reload({ stream: true }));
  });
  done(); // <-- to avoid async problems using gulp 4
});
0
Carles Alcolea

Die Verwendung von gulp-if hilft mir sehr.

Der Schluck-wenn erste Argument. ist das zweite Argument des Gulp-Matches condition

gulp-if kann in gulp-if gefunden werden

import {task, src, dest} from 'gulp';
import VinylFile = require("vinyl");
const gulpif = require('gulp-if');

src(['foo/*/**/*.md', 'bar/*.md'])
    .pipe(gulpif((file: VinylFile) => /foo\/$/.test(file.base), dest('dist/docs/overview')))
    .pipe(gulpif((file: VinylFile) => /bar\/$/.test(file.base), dest('dist/docs/guides')))
});
0
xsilen T