web-dev-qa-db-fra.com

Modifier le fichier en place (même destination) à l'aide de Gulp.js et d'un modèle globbing

J'ai une tâche gulp qui tente de convertir les fichiers .scss en fichiers .css (à l'aide de gulp-Ruby-sass), puis de placer le fichier .css obtenu au même endroit où il a trouvé le fichier d'origine. Le problème est que, comme je suis en train d’utiliser un motif globbing, je ne sais pas nécessairement où le fichier original est stocké.

Dans le code ci-dessous, j'essaie d'utiliser gulp-tap pour puiser dans le flux et déterminer le chemin 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));
});

Basé sur la sortie de la console.log(fileLocation), ce code semble fonctionner correctement. Cependant, les fichiers CSS résultants semblent être placés un répertoire plus haut que prévu. Où il devrait être project/sass/partials, Le chemin du fichier résultant est simplement project/partials.

S'il existe un moyen beaucoup plus simple de procéder, j'apprécierais certainement davantage cette solution. Merci!

javascriptnode.jssassgulp
95
Dan-Nolan

Comme vous le soupçonniez, vous compliquez les choses. La destination n'a pas besoin d'être dynamique car le chemin d'accès global est également utilisé pour le dest. Dirigez simplement vers le même répertoire de base que vous êtes en train de déplacer le 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 par un tableau de chemins, cela ne suffit plus. Dans ce cas, vous souhaitez spécifier l'option de base.

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

C’est plus simple que Numéros1311407. 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("."));
62
NightOwl888
gulp.src("sass/**/*.scss")
  .pipe(sass())
  .pipe(gulp.dest(function(file) {
    return file.base;
  }));

À l'origine, la réponse donnée ici: https://stackoverflow.com/a/29817916/383454 .

Je sais que ce fil est ancien, mais il apparaît toujours comme le premier résultat sur Google. Je pensais donc pouvoir poster le lien ici.

28
bobbarebygg

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