Измените файл на месте (тот же самый dest) с помощью Gulp.js и шаблона глобуса

У меня есть задача gulp, которая пытается преобразовать файлы .scss в файлы .css(используя gulp -ruby-sass), а затем поместить полученный файл .css в то место, где он нашел исходный файл. Проблема в том, что, поскольку я использую шаблон для подстановки, я не обязательно знаю, где хранится исходный файл.

В приведенном ниже коде я пытаюсь использовать gulp -tap для доступа к потоку и выяснить путь к файлу текущего файла, с которого был прочитан поток:

gulp.task('convertSass', function() {
    var fileLocation = "";
    gulp.src("sass/**/*.scss")
        .pipe(sass())
        .pipe(tap(function(file,t){
            fileLocation = path.dirname(file.path);
            console.log(fileLocation);
        }))
        .pipe(gulp.dest(fileLocation));
});

Основываясь на выходе console.log(fileLocation), этот код выглядит так, как будто он должен работать нормально. Тем не менее, полученные CSS файлы, кажется, помещены в один каталог выше, чем я ожидаю. Где это должно быть project/sass/partials, результирующий путь к файлу - это просто project/partials.

Если будет гораздо более простой способ сделать это, я определенно буду признателен за это решение еще больше. Спасибо!

Ответ 1

Как вы подозревали, вы делаете это слишком сложным. Целевому назначению не нужно быть динамическим, так как трассируемый путь используется для dest. Просто подключитесь к тому же базовому каталогу, из которого вы клонируете src, в этом случае "sass":

gulp.src("sass/**/*.scss")
  .pipe(sass())
  .pipe(gulp.dest("sass"));

Если ваши файлы не имеют общей базы, и вам необходимо передать массив путей, этого уже недостаточно. В этом случае вы должны указать базовый вариант.

var paths = [
  "sass/**/*.scss", 
  "vendor/sass/**/*.scss"
];
gulp.src(paths, {base: "./"})
  .pipe(sass())
  .pipe(gulp.dest("./"));

Ответ 2

Это проще, чем цифры1311407. Вам не нужно указывать конечную папку вообще, просто используйте .. Кроме того, обязательно установите базовый каталог.

gulp.src("sass/**/*.scss", { base: "./" })
    .pipe(sass())
    .pipe(gulp.dest("."));

Ответ 3

gulp.src("sass/**/*.scss")
  .pipe(sass())
  .pipe(gulp.dest(function(file) {
    return file.base;
  }));

Первоначальный ответ здесь: fooobar.com/questions/75698/....

Я знаю, что этот поток старый, но он все еще отображается как первый результат в google, поэтому я подумал, что могу опубликовать ссылку здесь.

Ответ 4

Это было очень полезно!

gulp.task("default", function(){

    //sass
    gulp.watch([srcPath + '.scss', '!'+ srcPath +'min.scss']).on("change", function(file) {
         console.log("Compiling SASS File: " + file.path)
         return gulp.src(file.path, { base: "./" })
        .pipe(sass({style: 'compressed'}))
        .pipe(rename({suffix: '.min'}))
        .pipe(sourcemaps.init())
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(sourcemaps.write('./'))         
        .pipe(gulp.dest(".")); 
    });

    //scripts
    gulp.watch([srcPath + '.js','!'+ srcPath + 'min.js']).on("change", function(file) {
        console.log("Compiling JS File: " + file.path)
        gulp.src(file.path, { base: "./" })
        .pipe(uglify())
        .pipe(rename({suffix: '.min'}))       
        .pipe(gulp.dest(".")); 
    });
})