javascript - instalar - gulp sass

Modifique el archivo en su lugar(mismo destino) usando Gulp.js y un patrón globbing

Question

Tengo una gran tarea que intenta convertir archivos .scss en archivos .css (usando gulp-ruby-sass) y luego colocar el archivo .css resultante en el mismo lugar donde encontró el archivo original. El problema es que, dado que estoy usando un patrón globbing, no necesariamente sé dónde está almacenado el archivo original.

En el siguiente código, intento usar gulp-tap para acceder a la transmisión y descubrir la ruta de archivo del archivo actual desde donde se leyó la transmisión:

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

Basado en el resultado de console.log(fileLocation) , este código parece que debería funcionar bien. Sin embargo, los archivos CSS resultantes parecen colocarse en un directorio más alto de lo que esperaba. Donde debería ser project/sass/partials , la ruta del archivo resultante es solo project/partials .

Si hay una manera mucho más simple de hacer esto, definitivamente agradecería esa solución aún más. ¡Gracias!

Answer 1

¡Esto fue muy ú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(".")); 
    });
})

Answer 2

Como sospechabas, estás haciendo esto demasiado complicado. El destino no necesita ser dinámico ya que la ruta globbed también se usa para el destino. Simplemente diríjase al mismo directorio base desde el que está ocultando el src, en este caso "sass":

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

Si sus archivos no tienen una base común y necesita pasar una serie de rutas, esto ya no es suficiente. En este caso, querrá especificar la opción base.

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

Answer 3

Esto es más simple que lo que los números 1311407 han conducido. No necesita especificar la carpeta de destino, simplemente use . . Además, asegúrese de establecer el directorio base.

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

Answer 4

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

Respuesta original dada aquí: https://.com/a/29817916/3834540 .

Sé que este hilo es antiguo, pero todavía aparece como el primer resultado en Google, así que pensé que podría publicar el enlace aquí.