Question

我有一个多站点我想要使用GulpJS进行处理。我已经把SCSS文件输出到相对的＆＃34; css＆＃34;一个任务中的目录。我尝试了多个设置基本目录的例子，但无济于事。也许我错过了什么。

文件夹结构是：

root
|
theme1
|   |
|   scss
|   |   |
|   |   changes.scss
|   |   common.scss
|   |   login.scss
|   css
|   |  | 
|   |  [Theme1 files go here]
theme2
|   |
|   scss
|   |   |
|   |   changes.scss
|   |   common.scss
|   |   login.scss
|   css
|   |  |
|   |  [Theme2 files go here]
etc.

代码是：

gulp.task('styles', function() {
  var filter = gulpFilter(['*/**/.css.map']);

  return gulp.src('*/scss/{changes,common,login}.scss', {base: './*/' })
    .on('error', function (err) { console.log(err.message); })
    .pipe(sourcemaps.init())
    .pipe(filter)
    .pipe(postcss([ autoprefixer({ browsers: ['last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'android 4'] }) ]))
    .pipe(filter.restore())
    .pipe(changed('*/**/scss')) // Ignore unchanged files
    .pipe(sass({ style: 'expanded' }))
    .pipe(rename({ suffix: '.min' }))
    .pipe( gulp.dest( 'css' ) )
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(header(banner, { pkg : pkg } ))
    .pipe(sourcemaps.write())
    .pipe( gulp.dest( 'css' ) )
    .pipe(notify({ message: 'Styles task complete' }));
   });

任何帮助都将不胜感激。

Answer 1

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

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

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

Gulp - 无法设置多个相对目的地

1 个答案: