Question

我目前有这样的文件结构

   projects
     sites
       site-example
            css
            scss
       site-second-example
            css
            scss
       site-third-example
            css
            scss
       ***
       site-fifty-example
            css
            scss

我正在尝试编写一个gulp任务，我可以从项目文件夹中运行，它将查看sites文件夹内部，然后分别浏览每个文件夹，查找任何scss文件，然后将它们编译为css。< / p>

我试着遵循这个食谱，但我必须以某种方式弄乱它： https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-task-steps-per-folder.md

gulpfile.js

    var gulp = require('gulp');
    var sass = require('gulp-sass');
    var sourcemaps = require('gulp-sourcemaps');
    var fs = require('fs');
    var path = require('path');
    var merge = require('merge-stream');

    var postcss = require('gulp-postcss');
    var autoprefixer = require('autoprefixer');

    var output = './**/css';

    var sassOptions = {
      errLogToConsole: true,
      outputStyle: 'expanded'
    };

    var scriptsPath = './sites';

    function getFolders(dir) {
        return fs.readdirSync(dir)
          .filter(function(file) {
            return fs.statSync(path.join(dir, file)).isDirectory();
          });
    }

    gulp.task('sass', function() {

        var processors = [
          autoprefixer({
            browsers: ['last 12 versions']
          })
        ];

       var folders = getFolders(scriptsPath);

       var tasks = folders.map(function(folder) {
          return gulp.src(path.join(scriptsPath, folder, '/**/*.scss'))
            .pipe(sourcemaps.init())
            .pipe(sass(sassOptions).on('error', sass.logError))
            .pipe(postcss(processors))
            .pipe(sourcemaps.write('./maps'))
            .pipe(gulp.dest(output));
       });

       return merge(tasks);
    });

Answer 1

您不能将globstar var output = './**/css';放在目标目录中，如下所示：

gulp.dest()

这不会奏效，因为folder无法从上下文神奇地猜测您希望文件最终进入哪个目录。

您必须为getFolders()返回的每个gulp.src()显式构建目标目录，就像您对var tasks = folders.map(function(folder) { var src = path.join(scriptsPath, folder, 'scss'); var dst = path.join(scriptsPath, folder, 'css'); return gulp.src(path.join(src, '**/*.scss')) .pipe(sourcemaps.init()) .pipe(sass(sassOptions).on('error', sass.logError)) .pipe(postcss(processors)) .pipe(sourcemaps.write('./maps')) .pipe(gulp.dest(dst)); });所做的那样：

$http.put("/fraisforfait", elements);

迭代通过多个文件夹将所有SASS编译为Gulp中的CSS

1 个答案: