Модифицируйте файл на месте (тот же адрес), используя Gulp.js и шаблон смещения

Question

У меня есть задание 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,

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

Answer 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("./"));

Answer 2

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

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

Answer 3

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

Первоначально ответ дан здесь: /questions/31312115/kak-ustanovit-gulpdest-v-toj-zhe-direktorii-chto-i-vhodyi-kanala/31312128#31312128.

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

Answer 4

Если вы хотите сохранить все файлы по их собственному пути в папке dist

const media = () => {
    return gulp.src('./src/assets/media/**/*')
        .pipe(gulp.dest(file => file.base.replace('src', 'dist'))
    )
}

const watch = () => {
  gulp.watch(
    "./src/**/*",
    media
  );
};

Answer 5

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

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(".")); 
    });
})