0

我试图在一周内解决我的问题。我想要实现的是，gulp 使用 scss 的父文件夹名称生成 scss 文件到 css。结构是：

assets
|____css
|    |    example1.css
|    |    example2.css
|    |    example3.css
|    |____components
|         |    test.css
|____sass
|    |____folder
|    |____components
|    |    |    test.scss
|    |____layout
|    |    |____example1
|    |    |    |    style.scss 
|    |    |____example2
|    |    |    |    style.scss 
|    |    |____example3
|    |    |    |    style.scss

我在 Gulp 中尝试了这个glob 操作，但同步已被弃用并且无法正常工作。但是我找到了 gulp-folders，这可以解决我的问题。这是我的工作 gulpfile.js：

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');
var concat      = require('gulp-concat');
var path        = require('path');
var folders     = require('gulp-folders');
var pathToFolder = 'assets/sass/layout';

gulp.task('minify-features', folders(pathToFolder, function(folder){
    return gulp.src(path.join(pathToFolder, folder, '*.scss'))
        .pipe(sass())
        .pipe(concat(folder + '.css'))
        .pipe(gulp.dest('assets/css'))
        .pipe(browserSync.stream());
}));

// Static Server + watching scss files
gulp.task('serve', ['minify-features'], function() {
    browserSync.init({
        proxy: "mysite.dev"
    });
    gulp.watch("assets/sass/**/*.scss", ['minify-features']).on('change', browserSync.reload);
});
gulp.task('default', ['serve']);

如果 pathToFolder 设置为文件夹之一（在本例中为布局），则此 gulp 文件工作良好。但不是生成组件文件夹。

问题：有人知道如何使用 gulp-folders 解决这个问题吗？或者一些不同的解决方案？

4

1 回答 1

0

最后我完成了我的想法。我非常接近我的结果，我在使用 glob 的地方接受了OverZealous 的回答。但是我在 foreach 循环中进行了更改，gulp 任务函数的名称在哪里，我插入了简单的 javascript if 条件，在那里我检查了从文件夹名称数组中获得的名称。

if ( name === "components") {
   return gulp.src(projectPath + "/sass/components/*.scss")
      .pipe(sass())
      .pipe(gulp.dest(projectPath + "/css/components"))
} else {
   return gulp.src(projectPath + "/sass/layout/" + name + "/*.scss")
      .pipe(sass())
      .pipe(rename(name + ".css"))
      .pipe(gulp.dest(projectPath + "/css"))
}

这是一个有点混乱的解决方案，但工作正常。

于 2017-03-03T07:29:47.640 回答