it-swarm.com.ru

Могу ли я использовать задачу Gulp с несколькими источниками и несколькими получателями?

У меня есть следующее в моем 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(???));
});

Я хочу вывести мои уменьшенные CSS-файлы по следующим путям:

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

Я неправильно понимаю, как использовать источники/места назначения? Или я пытаюсь сделать слишком много в одной задаче?

Правка: Обновлены пути вывода к соответствующим каталогам сайта.

35
David Angel

Я думаю, что запуск задач на папку рецепт может помочь.

Обновление

Следуя идеям в рецепте, и упрощая ваш пример, просто чтобы дать идею, это может быть решением:

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

вы захотите использовать потоки слияния, если вы хотите использовать несколько srcs, но у вас может быть несколько назначений внутри одного и того же. Вот пример.

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

Я предполагал, что вам нужны разные пути, которые передаются по каналу, так что есть site1 и site2, но вы можете сделать это в любом количестве мест. Также вы можете указать dest до любого из этапов, если, например, вы хотите иметь один dest с файлом .min, а другой - без него.

6
ckross01

Вы можете использовать gulp-rename чтобы изменить место записи файлов.

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

Важный бит: используйте параметр base в gulp.src.

5
Heikki

Для тех, кто спрашивает себя, как они могут иметь дело с общими/специфическими CSS-файлами (работает одинаково для скриптов), вот возможный вывод для решения этой проблемы:

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

Все, что вам нужно сделать сейчас, это добавить свои листы по мере создания нотации объекта.

Если у вас есть дополнительные сценарии общего достояния, вы можете сопоставить их по имени на объекте common, а затем добавить их после материализации для этого примера, но перед file.src + '.css', так как вы можете переопределить общие файлы с вашими таможенными файлами.

Обратите внимание, что в атрибуте src вы также можете указать путь следующим образом:

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

охватить весь спуск.

2
Anwar

Я добился успеха, не нуждаясь в чем-то дополнительном, решение, очень похожее на Анвар Наири

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

Использование gulp-if мне очень помогает.

Глоток-если первый аргумент. является вторым аргументом gulp-match condition

gulp-if можно найти в 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