相对于源的 Gulp 目标

Question

我正在尝试解析所有文件夹中的所有 SCSS 文件，并且我需要它们位于原始文件的相对目标中。

这是我想要的文件夹结构的表示（基本上，scss文件夹中的scss文件需要保存为原始scss文件夹旁边的css文件夹中的css文件）和流氓scss文件（不在scss文件夹中）应该有css文件保存在与 scss 文件相同的目标位置。

html
│   README.md
│
└───app_abc
│   │   index.php
│   │   something_else.php
│   │
│   └───styles
│       └───scss
│       │       _mixins.scss
│       │       layout.scss
│       │       content.scss
│       │
│       └───css
│               layout.css
│               content.css
│   
└───app_def
│   │   index.php
│   │   something_else.php
│   │   rogue.scss
│   │   rogue.css
│   │
│   └───styles
│       └───scss
│       │       _mixins.scss
│       │       layout.scss
│       │       content.scss
│       │
│       └───css
│               layout.css
│               content.css
└───app_ghi
    ...

我昨天和今天尝试玩了几个小时，但无济于事。我可以在同一个文件夹中创建 CSS 文件，但这不是我想要的。

这是我的 gulpfile.js（里面有很多“调试”的东西）。

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    path = require('path'),
    through = require('through2');


const debug = require('gulp-debug');


const sassFiles = './html/**/[^_]*.scss';

function parsePath() {
    return through.obj(function (file, enc, cb) {
        console.log(file.base);
        console.log(file.cwd);
        console.log(file.path);
        console.log(file.name);
        console.log(path.relative(file.cwd, file.path));
        console.log(path.relative(path.join(file.cwd, file.base), file.path))
        console.log(path.relative(path.join(file.cwd, file.base), file.path).replace('scss', 'css'))
        console.log(file.path.replace(file.name, '').replace('scss', 'css'))
        cb();
    });
}

gulp.task('sass', function(){
  return gulp.src(sassFiles)
    .pipe(debug({title: 'test:', minimal: false}))
    .pipe(parsePath())
    .pipe(sass().on('error', sass.logError))
    //.pipe(gulp.dest('css'))
    //.pipe(gulp.dest(function (file) {
        //return file.path.replace('scss', 'css');
        //return path.relative(path.join(file.cwd, file.base), file.path).replace('scss', 'css');
    //}))
    .pipe(gulp.dest(function (file) {
        console.log(file.base);
        return file.base;
    }));
});

gulp.task('watch', ['sass'], function(){
  gulp.watch(sassFiles, ['sass']); 
})

感谢您的帮助。

Ps.：无论如何，我在 Debian Jessie x64 上运行。

Pps.：我用谷歌搜索并阅读了很多 stackoverflow 线程，但没有一个能解决我的问题（好吧，如果有，它对我不起作用）。

Answer 1

这是有效的。它会正确处理您的 rogueSASS 文件，并在您想要的位置创建一个 css 文件夹，其中包含 css 文件。

重要提示：gulp.src 文件与您的 gulpfile.js 所在的位置相关。对于此代码，我将它放在 HTML 文件夹中 - 与 app_xxx 文件夹处于同一级别。如果你把它放在其他地方，你将不得不修改 sassFiles 和 rogueSassFiles 声明。

var gulp = require("gulp");
var sass = require("gulp-sass");

// flatten can be useful to solve tricky long directory changes
// var flatten = require("gulp-flatten");

var rename = require("gulp-rename");
// var using = require("gulp-using");


const sassFiles = './**/styles/scss/*.scss';
const rogueSassFiles = ['./**/*.scss', '!./**/styles/**'];


gulp.task('watch', ['sass', 'rogueSASS'], function () {
  gulp.watch( sassFiles, ['sass']);
  gulp.watch( rogueSassFiles, ['rogueSASS']);
})

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

  return gulp.src(sassFiles)
    .pipe(sass().on('error', sass.logError))

       // remove the "scss" folder name from the end of the directory list

    .pipe(rename(function (path) {
       var temp = path.dirname.slice(0, -4);
       path.dirname = temp + "css";
    }))

    .pipe(gulp.dest('.'))
})


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

  return gulp.src(rogueSassFiles)
      //   gulp-using shows which files are getting through gulp.src !!
      //  .pipe(using())
   .pipe(sass().on('error', sass.logError))
   .pipe(gulp.dest('.'))
})

这些可以组合成一个任务。