Modifique o arquivo no local (mesmo destino) usando Gulp.js e um padrão globbing

99

Eu tenho uma tarefa gulp que está tentando converter arquivos .scss em arquivos .css (usando gulp-ruby-sass) e, em seguida, coloco o arquivo .css resultante no mesmo lugar em que encontrou o arquivo original. O problema é que, como estou usando um padrão globbing, não sei necessariamente onde o arquivo original está armazenado.

No código abaixo, estou tentando usar o gulp-tap para acessar o fluxo e descobrir o caminho do arquivo atual do qual o fluxo foi lido:

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));
});

Com base na saída do console.log(fileLocation), este código parece que deve funcionar bem. No entanto, os arquivos CSS resultantes parecem ser colocados um diretório acima do que eu esperava. Onde deveria estar project/sass/partials, o caminho do arquivo resultante é justo project/partials.

Se houver uma maneira muito mais simples de fazer isso, eu definitivamente apreciaria essa solução ainda mais. Obrigado!

Dan-Nolan
fonte

Respostas:

155

Como você suspeitou, você está tornando isso muito complicado. O destino não precisa ser dinâmico, pois o caminho global também é usado para o dest. Basta canalizar para o mesmo diretório base do qual você está globalizando o src, neste caso "sass":

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

Se seus arquivos não tiverem uma base comum e você precisar passar uma série de caminhos, isso não será mais suficiente. Nesse caso, você deseja especificar a opção base.

var paths = [
  "sass/**/*.scss", 
  "vendor/sass/**/*.scss"
];
gulp.src(paths, {base: "./"})
  .pipe(sass())
  .pipe(gulp.dest("./"));
números 1311407
fonte
Ah, incrível. Obrigado. Existe também uma maneira fácil de usar um glob para o código-fonte, mas apenas colocar tudo direto na sasspasta?
Dan-Nolan
2
Isso não funcionou para mim. Eu tive que fazer gulp.src("dist/**/*")...gulp.dest("./")
bacana
@ Dan-Nolan uma forma de nivelar a estrutura da pasta parece ser usando gulp-rename , veja esta pergunta
números 1311407
@niftygrifty De acordo com a documentação , deve funcionar em uma situação normal. Os arquivos são gravados em seu caminho globbed correspondente em uma base relativa calculada , neste caso sass. Talvez o plugin sass aqui já esteja modificando os caminhos?
números 1311407 de
1
Mas isso não salva o arquivo em / sass e não no respectivo subdiretório como / sass / any / where? Como faço para salvar os arquivos no caminho globbed?
Marcos
68

Isso é mais simples do que os números 1311407 acenderam. Você não precisa especificar a pasta de destino, simplesmente use .. Além disso, certifique-se de definir o diretório base.

gulp.src("sass/**/*.scss", { base: "./" })
    .pipe(sass())
    .pipe(gulp.dest("."));
NightOwl888
fonte
8
Esta é a resposta certa. Se você está tentando preservar a estrutura de destino (ou seja, não nivelar a estrutura), deve indicar o diretório base em gulp.src.
Gui Ambros
2
Quando tento fazer isso, os arquivos são salvos em "/" e não no caminho globbed.
Marcos
1
O que @GuiAmbros diz não é verdade, pelo menos não de acordo com os documentos . A base, por padrão, é calculada para ser tudo antes do caminho globbed. Em minha resposta, a base seria calculada como ./sass, mas a pergunta especifica que a saída retém o sassdir, e é por isso que ele é repetido no dest. Essa resposta obtém o mesmo resultado usando a opção básica, mas nenhuma das abordagens está errada.
números 1311407
Também é notável que a situação do OP provavelmente não seja tão comum, pelo menos para processamento de CSS, como normalmente você esperaria exportar para um cssdiretório ou similar, não de sasspara sass. Em tais casos, a resposta aceita é realmente mais simples do que esta alternativa.
números 1311407 de
30
gulp.src("sass/**/*.scss")
  .pipe(sass())
  .pipe(gulp.dest(function(file) {
    return file.base;
  }));

Resposta dada originalmente aqui: https://stackoverflow.com/a/29817916/3834540 .

Sei que este tópico é antigo, mas ainda aparece como o primeiro resultado no google, então achei melhor postar o link aqui.

bobbarebygg
fonte
Este tópico é antigo, mas as respostas ainda estão corretas, embora eu suponha que esse método seja um pouco mais SECO (embora um pouco menos eficiente). A questão vinculada, na verdade, era uma questão de uso destincorreto. Claro que as soluções fornecidas funcionam, mas fazer certo da primeira vez, simplesmente substituir dest('./')por dest('./images'), teria alcançado o mesmo resultado.
números 1311407
O motivo pelo qual a outra solução não funcionou para mim foi que eu tinha um array dentro de gulp.src (), por exemplo, gulp.src (['sass / **', 'common / sass / **']) e quando pesquisei a resposta, esta foi a postagem que encontrei. Provavelmente deveria ter deixado isso mais claro
bobbarebygg
Faz sentido. No seu caso, o problema é que não existe uma base comum para o cálculo do gole. Sua solução funciona, mas a solução fornecida por @ NightOwl888 de especificar a base também teria funcionado. Atualizar a resposta aceita para incluir o caso de não haver base comum.
números 1311407 de
Esta deve ser a resposta aceita! Não os outros, que são específicos para apenas um arquivo ou para um caminho base.
MrCroft
0

Isso foi muito útil!

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
fonte