Question

我的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

我是否误解了如何使用来源/目的地？或者我是否想在一项任务中完成太多任务？

编辑：更新了相应站点目录的输出路径。

Answer 1

我想running tasks per folder食谱可能有所帮助。

<强>更新

按照配方中的想法，并过度简化您的样本只是为了提出想法，这可以是一个解决方案：

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

Answer 2

如果您想使用多个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，但你可以根据需要在尽可能多的地方进行。您也可以在任何步骤之前指定目标，例如，您希望有一个具有.min文件的目标和一个不具有该目标的目标。

Answer 3

您可以使用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选项。

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

现在你要做的就是在构造对象符号时添加你的工作表。

如果你有附加公共脚本，你可以在对象common上按名称映射它们，然后在实例化后为这个例子添加它们，但在file.src + '.css'之前添加它们，因为你可能想要覆盖公共包含海关文件的文件。

请注意，在src属性中，您还可以输入如下路径：

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

确定整个后代的范围。

Answer 5

在gulp上具有多个目标的多个源，而无需使用任何额外的插件，而只是在每个js和css上进行串联。下面的代码对我有用。请尝试一下。

 const gulp = require('gulp');
 const concat = require('gulp-concat');
 function task(done) {
    var theme = {
        minifiedCss: {
             common: { 
                src : ['./app/css/**/*.min.css', '!./app/css/semantic.min.css'], 
                name : 'minified-bundle.css', 
                dest : './web/bundles/css/' 
            }
        },
        themeCss:{
            common: { 
                 src : ['./app/css/style.css', './app/css/responsive.css'], 
                 name : 'theme-bundle.css', 
                 dest : './web/bundles/css/' 
            }
        },
        themeJs: {
            common: {
                src: ['./app/js/jquery-2.1.1.js', './app/js/bootstrap.js'],
                name: 'theme-bundle.js',
                dest: './web/_themes/js/'
            }
        }
    }
    Object.keys(theme).map(function(key, index) {
        return gulp.src(theme[key].common.src)
        .pipe( concat(theme[key].common.name) )
        .pipe(gulp.dest(theme[key].common.dest));
    });
    done();
}
exports.task = task;

Answer 6

使用gulp-if对我有很大帮助。

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

Answer 7

我成功了，不需要任何额外的东西，该解决方案与Anwar Nairi's

非常相似

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

Answer 8

我认为我们应该为包含所有这些文件创建1个临时文件夹。然后gulp.src指向该文件夹

Answer 9

目标将与源具有相同的目录结构。

我可以使用具有多个来源和多个目的地的Gulp任务吗？

9 个答案: