web-dev-qa-db-fra.com

Puis-je utiliser une tâche Gulp avec plusieurs sources et plusieurs destinations?

J'ai les éléments suivants dans mon fichier 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(???));
});

Je veux sortir mes fichiers CSS minifiés dans les chemins suivants:

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

Est-ce que je comprends mal comment utiliser les sources/destinations? Ou est-ce que j'essaie d'accomplir trop de choses dans une tâche?

Modifier: les chemins de sortie mis à jour vers les répertoires de site correspondants.

javascriptnode.jsgulp
35
David Angel

Je suppose que les tâches en cours d'exécution par dossier recette peuvent aider.

Mettre à jour

En suivant les idées de la recette et en simplifiant votre échantillon simplement pour donner l’idée, cela peut être une solution:

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

vous souhaiterez utiliser des flux de fusion si vous souhaitez utiliser plusieurs sources, mais vous pouvez avoir plusieurs destinations dans le même. Voici un exemple.

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

J'ai supposé que vous vouliez des chemins différents ici, donc il y a site1 et site2, mais vous pouvez le faire dans autant d'endroits que nécessaire. Vous pouvez également spécifier une destination avant l'une des étapes si, par exemple, vous souhaitez avoir une destination avec le fichier .min et une autre.

6
ckross01

Vous pouvez utiliser gulp-rename pour modifier l'emplacement où les fichiers seront écrits.

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

Bit important: utilisez l'option base dans gulp.src.

5
Heikki

Pour ceux qui se demandent comment ils peuvent gérer les fichiers CSS communs/spécifiques (fonctionne de la même manière pour les scripts), voici un résultat possible pour résoudre ce problème:

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

Il ne vous reste plus qu'à ajouter vos feuilles au fur et à mesure que la notation de l'objet est construite.

Si vous avez des scripts communs supplémentaires, vous pouvez les mapper par nom sur l'objet common, puis les ajouter après la matérialisation pour cet exemple, mais avant le file.src + '.css' car vous souhaiterez peut-être remplacer les fichiers communs par vos fichiers de douane.

Notez que dans l'attribut src, vous pouvez également mettre le chemin comme ceci:

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

pour couvrir toute une descendance.

2
Anwar

J'ai eu du succès sans avoir besoin de rien d'extra, une solution très similaire à Anwar Nairi

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

Utiliser gulp-if m'aide beaucoup.

Le gulp-if premier argument. est le deuxième argument gulp-match condition

gulp-if peut être trouvé dans gulp-if

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