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

Ответ 1

Я думаю, что может помочь запущенные задачи для каждой папки.

Обновление

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

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

Ответ 2

Вы можете использовать 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.

Ответ 3

вам захочется использовать потоки слияния, если вы хотите использовать несколько 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, и тот, который этого не сделал.

Ответ 4

Для тех, кто задает себе вопрос, как они могут работать с общими/специфичными 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) )
    }); 
});

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

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

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

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

чтобы охватить все потоки.

Ответ 5

используйте gulp -if, помогите мне много.

gulp - первый аргумент. это второй аргумент 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')))
});