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

100

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

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

javascript node.js sass gulp Дан-Нолан
источник

Ответы:

156

Как вы и подозревали, вы слишком усложняете ситуацию. Место назначения не обязательно должно быть динамическим, так как глобальный путь также используется для 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("./"));
числа1311407
источник
Ах, круто. Спасибо. Есть ли еще простой способ использовать глобус для источника, но просто положить все прямо в sassпапку?
Дан-Нолан
2
У меня это не сработало. Я должен был сделать gulp.src("dist/**/*")...gulp.dest("./")
niftygrifty
@ Dan-Nolan, один из способов сглаживания структуры папок, похоже, заключается в использовании gulp-rename , см. Этот вопрос
numbers1311407
@niftygrifty Согласно документации, он должен работать в нормальной ситуации. Файлы записываются в их соответствия globbed пути против расчетной относительной базы , в данном случае sass. Возможно, плагин sass уже изменяет пути?
numbers1311407
1
Но разве это не сохраняет файл в / sass, а не в соответствующем подкаталоге, например / sass / any / where? Как мне сделать так, чтобы файлы сохранялись в глобальном пути?
Марк
68

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

gulp.src("sass/**/*.scss", { base: "./" })
    .pipe(sass())
    .pipe(gulp.dest("."));
НочьСова888
источник
8
Это правильный ответ. Если вы пытаетесь сохранить структуру назначения (т. Е. Не выравнивать структуру), вы должны указать базовый каталог в gulp.src.
Gui Ambros
2
Когда я пытаюсь это сделать, файлы сохраняются в "/", а не по пути с указанием глобуса.
Марк
1
То, что говорит @GuiAmbros, не соответствует действительности, по крайней мере, в соответствии с документами . База по умолчанию рассчитывается как все, что находится перед глобальным путем. В моем ответе база будет рассчитана как равная ./sass, но в вопросе указано, что на выходе сохраняется sassкаталог, поэтому он повторяется в файле dest. Этот ответ дает тот же результат при использовании базовой опции, но оба подхода неверны.
numbers1311407
Также примечательно, что ситуация с OP, вероятно, не так распространена, по крайней мере, для обработки CSS, поскольку обычно вы ожидаете экспорта в cssкаталог или аналогичный, а не из sassв sass. В таких случаях принятый ответ на самом деле проще, чем эта альтернатива.
числа1311407,
30 
gulp.src("sass/**/*.scss")
  .pipe(sass())
  .pipe(gulp.dest(function(file) {
    return file.base;
  }));

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

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

боббайг
источник
Эта ветка устарела, но ответы все еще верны, хотя я полагаю, что этот метод немного СУХЕЕ (если немного менее эффективен). Связанный вопрос, действительно, был проблемой destнеправильного использования . Конечно, данные решения работают, но если сделать все правильно с первого раза, просто заменив dest('./')на dest('./images'), то результат будет тот же.
numbers1311407
Причина, по которой другое решение не сработало для меня, заключалась в том, что у меня был массив внутри gulp.src (), например gulp.src (['sass / **', 'common / sass / **']), и когда я искал ответ, это был пост, который я нашел. Хотя, наверное, следовало прояснить это
bobbarebygg
Имеет смысл. В вашем случае проблема в том, что нет общей базы для расчета gulp. Ваше решение работает, но решение @ NightOwl888 об указании базы также сработало бы. Обновление принятого ответа, чтобы включить случай отсутствия общей базы.
numbers1311407
Это должен быть принятый ответ! Не другие, которые относятся только к одному файлу или к базовому пути.
MrCroft
0

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

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(".")); 
    });
})
mftohfa
источник