Modifier le fichier sur place (même destination) en utilisant Gulp.js et un motif de globbing


99

J'ai une tâche gulp qui tente de convertir des fichiers .scss en fichiers .css (en utilisant gulp-ruby-sass), puis placez le fichier .css résultant au même endroit où il a trouvé le fichier d'origine. Le problème est que, puisque j'utilise un modèle de globbing, je ne sais pas nécessairement où le fichier d'origine est stocké.

Dans le code ci-dessous, j'essaie d'utiliser gulp-tap pour accéder au flux et déterminer le chemin du fichier du fichier actuel à partir duquel le flux a été lu:

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

Sur la base de la sortie de console.log(fileLocation), ce code semble fonctionner correctement. Cependant, les fichiers CSS résultants semblent être placés un répertoire plus haut que ce à quoi je m'attendais. Là où il devrait être project/sass/partials, le chemin du fichier résultant est juste project/partials.

S'il existe une manière beaucoup plus simple de faire cela, j'apprécierais certainement encore plus cette solution. Merci!

Réponses:


155

Comme vous vous en doutez, vous rendez cela trop compliqué. La destination n'a pas besoin d'être dynamique car le chemin global est également utilisé pour le dest. Dirigez-vous simplement vers le même répertoire de base à partir duquel vous effectuez le glissement du src, dans ce cas "sass":

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

Si vos fichiers n'ont pas de base commune et que vous devez passer un tableau de chemins, ce n'est plus suffisant. Dans ce cas, vous voudrez spécifier l'option de base.

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

Ah, génial. Je vous remercie. Existe-t-il également un moyen simple d'utiliser un glob pour la source, mais de tout mettre directement dans le sassdossier?
Dan-Nolan

2
Cela n'a pas fonctionné pour moi. Je devais faire gulp.src("dist/**/*")...gulp.dest("./")
niftygrifty

@ Dan-Nolan, une façon d'aplatir la structure des dossiers semble utiliser gulp-rename , voir cette question
numbers1311407

@niftygrifty Selon la documentation, cela devrait fonctionner dans une situation normale. Les fichiers sont écrits dans leur chemin global correspondant par rapport à une base relative calculée , dans ce cas sass. Peut-être que le plugin sass modifie déjà les chemins?
Numéros1311407

1
Mais cela ne sauvegarde-t-il pas le fichier dans / sass et non dans le sous-répertoire correspondant comme / sass / any / where? Comment puis-je enregistrer les fichiers dans le chemin d'accès global?
Marquez le

68

C'est plus simple que les nombres1311407. Vous n'avez pas du tout besoin de spécifier le dossier de destination, utilisez simplement .. Assurez-vous également de définir le répertoire de base.

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

8
C'est la bonne réponse. Si vous essayez de conserver la structure de destination (c'est-à-dire de ne pas aplatir la structure), vous devez indiquer le répertoire de base dans gulp.src.
Gui Ambros

2
Quand j'essaye ceci, les fichiers sont enregistrés dans "/" et non sous le chemin global.
Marquez le

1
Ce que @GuiAmbros dit n'est pas vrai, du moins pas selon la documentation . La base, par défaut, est calculée pour être tout avant le chemin global. Dans ma réponse, la base serait calculée comme étant ./sass, mais la question spécifie que la sortie conserve le sassdir, c'est pourquoi il est répété dans le dest. Cette réponse obtient le même résultat en utilisant l'option de base, mais aucune des deux approches n'est erronée.
Numéros1311407

Il est également à noter que la situation de l'OP n'est probablement pas si courante, du moins pour le traitement CSS, car vous vous attendez généralement à exporter dans un cssrépertoire ou similaire, pas de sassvers sass. Dans de tels cas, la réponse acceptée est en fait plus simple que cette alternative.
Numéros1311407

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

Réponse à l'origine donnée ici: https://stackoverflow.com/a/29817916/3834540 .

Je sais que ce fil est vieux, mais il apparaît toujours comme le premier résultat sur Google, alors j'ai pensé que je pourrais aussi bien publier le lien ici.


Ce fil est ancien mais les réponses sont toujours correctes, même si je suppose que cette méthode est légèrement plus sèche (bien que légèrement moins efficace). La question liée, en réalité, était un problème d'utilisation destincorrecte. Bien sûr, les solutions données fonctionnent, mais le faire correctement la première fois, simplement en les remplaçant dest('./')par dest('./images'), aurait obtenu le même résultat.
numéros1311407

La raison pour laquelle l'autre solution n'a pas fonctionné pour moi était que j'avais un tableau dans gulp.src (), par exemple gulp.src (['sass / **', 'common / sass / **']) et quand j'ai cherché la réponse, c'est le message que j'ai trouvé. Cela aurait probablement dû être plus clair
bobbarebygg

Logique. Dans votre cas, le problème est qu'il n'y a pas de base commune pour calculer gulp. Votre solution fonctionne, mais la solution donnée par @ NightOwl888 de spécifier la base aurait également fonctionné. Mettre à jour la réponse acceptée pour inclure le cas de l'absence de base commune.
Numéros1311407

Cela devrait être la réponse acceptée! Pas les autres, qui sont spécifiques à un seul fichier ou à un chemin de base.
MrCroft

0

Cela a été très utile!

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(".")); 
    });
})
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.