it-swarm.com.ru

Модифицируйте файл на месте (тот же адрес), используя 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.

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

95
Dan-Nolan

Как вы и подозревали, вы делаете это слишком сложным. Назначение не обязательно должно быть динамическим, поскольку глобальный путь используется и для 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("./"));
146
numbers1311407

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

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

Первоначально ответ дан здесь: https://stackoverflow.com/a/29817916/383454 .

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

27
bobbarebygg

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

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