Question

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

这是我想要的文件夹结构的表示（基本上，scss文件夹中的scss文件需要保存为原始scss文件夹旁边的css文件夹中的css文件）和rogue 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（其中有很多＆＃34; debug＆＃34;内容）。

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。：我做了google并阅读了很多stackoverflow线程，但没有一个能解决我的问题（好吧，如果有的话，它对我来说没有用）。

Answer 1

这很有效。它正确处理你的rogueSASS文件并创建一个css文件夹，你想要它与css文件在那里。

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

1,Brand,sports
1,Color,White
1,Gender,Male
1,Logo,yes
1,width,10
4,Brand,Running
4,width,12
4,Fits,Lose
3,catgegory,shoe
3,Color,blue
3,Color,white
3,primarycolor,blue
5,size,M
5,Brand,Sports
5,Brand,Running

这些可以成为一项任务。

Gulp目的地相对于来源

1 个答案: