相对于源的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杰西x64。

页码：我在谷歌上搜索了很多stackoverflow线程，但没有一个能解决我的问题(好吧，如果有，那对我来说就不管用了)。

Answer 1

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

重要：gull.src文件是相对于gullfile.js所在的位置。对于这段代码，我把它放在HTML文件夹中，与app_xxx文件夹处于同一级别。如果你把它放在其他地方，你将不得不修改sassFile和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('.'))
})

这些可以合并为一项任务。