2

Buenas a todos, trataré de ser breve. Tengo una estructura así:

estructura para el desarrollo

./base/scss/
  └ salida/
     └ modelo1/
       └ archivo.scss
     └ modelo2/
       └ archivo.scss
       └ submodelo2/
         └ archivo.scss

estructura para la producción

./css
  └ modelo1-archivo.css
  └ modelo2-archivo.css
  └ modelo2-submodelo2-archivo.css

La verdad quiero almacenar todo mis estilos en un único directorio, en producción no me interesa definir sub-directorios, caso que no aplica para el desarrollo. Sin embargo quiero manejar cierta estructura en los ficheros de estilos en mi directorio css y que estos estén pautados por la jerarquía en la que se definen en desarrollo. «Espero ser claro»

He estado manejando la automatización usando Netbeans y su complemento para SASS, una configuración algo así:

./base/scss/salida => ./css

El problema es obvio (la respuesta es)

./css/
  └ modelo1/
    └ archivo.scss
  └ modelo2/
    └ archivo.scss
    └ submodelo2/
      └ archivo.scss

He hecho algunos pinpinos en gulp, pero el resultado es bastante parecido. «entre otras cosas por que no lo domino, se que si pudiese recibir como parámetro las rutas aplicaría expresiones regulares .split.join para remplazar los / por - pero aún no lo veo claro.

imaginando una tarea en gulp

gulp.task("sass", function () {
    gulp.src("./base/scss/**/*.scss")
        //cosas por hacer .pipe's
        .pipe(modulo(function (ruta) { /* modulo que me permita editar */
            return ruta.replace("/", "-"); 
        })
        .pipe(gulp.dest("./css"))
});

Agradezco mucho un empujón, gracias por el tiempo prestado.

2
  • Hola Neder, por favor, incluye en tu pregunta las partes relevantes de tu archivo gulp.
    – toledano
    el 22 abr. 2017 a las 21:01
  • Adicione algo que imagino funcionaría, aunque realmente no conozco mucho de gulp creo que el problema se solucionaría si existiese un modulo que permita pasar un función como parámetro que a su vez reciba la cadena (ruta) de cada uno de los ficheros, quizás se requiera hacer un tratamiento mayor pero el concepto es así de simple, a esas alturas seria posible tratar la ruta como una cadena y hacer las operaciones que se necesiten para que al final el resultado sea el deseado.
    – NekoOs
    el 22 abr. 2017 a las 21:31

2 respuestas 2

1

Hay un plugin específico para Gulp y sass. Solo tienes que instalarlo en las dependencias de desarrollo:

npm install --save-dev gulp-sass

Y el uso es mas o menos como lo imaginas:

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
  return gulp.src('./base/sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

Puedes vigilar los cambios en los archivos de tu tema y recompilar cuando sea necesario:

gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

Recuerdo que antes había algún problema con la generación de sass por alguna versión de Ruby, pero ya no la he visto.

La documentación del plugin la encuentras en inglés en este enlace: https://www.npmjs.com/package/gulp-sass

3
  • Ya estoy usando gulp-sass, mi problema no deriva de que no pueda compilar y generar mis css, realmente radica en la forma como quiero renombrar los archivos generados carpeta-subcarpeta-subsubcarpeta-archivo.css
    – NekoOs
    el 22 abr. 2017 a las 21:47
  • @NederAlfonsoFandiñoAndrade Quieres un solo archivo? O que todos los archivos estén en un solo directorio?
    – toledano
    el 22 abr. 2017 a las 21:49
  • Quiero que todos los archivos estén en un único directorio, pero que conserven el nombre de la ruta de donde los compile separado por guiones. ./base/scss/salida/carpeta1/subcarpeta1/archivo.sass => ./css/carpeta1-subcarpeta1-archivo.sass Tenga en cuenta que el patrón de búsqueda ./base/scss/**/*.scss, ./base/scss es el directorio donde esta mi sass de allí en adelante capturo el resto y remplazo los / por - para formar el nombre del archivo generado. «espero ser claro»
    – NekoOs
    el 22 abr. 2017 a las 21:55
1

Hace poco publique esta pregunta definiendo que tenia una estructura algo así:

introducir la descripción de la imagen aquí

Para explicar un poco mas en el directorio base almaceno mi desarrollo y en el css mi producción «Es una estructura hipotética para simplificar»

Finalmente he optado por encontrar una solución para este problema combinando Gulp y PHP, puesto que me manejo mejor en este ultimo, compartiré la solución a fin de promover una respuesta mas optima con los mismos resultados.

La estructura donde almaceno mi desarrollo es algo así:

base

Donde en el directorio /base/scss posee todos mis ficheros sass que posteriormente se compilan de forma automática gracias a una tarea programada y generan contenido replicando la estructura en /base/css, luego de que esta tarea es realizada mi interés es agrupar todos los archivos en el directorio y subdirectorios de /base/css en un directorio de producción definido como /css, es aquí cuando decidí usar PHP a falta de una solución concreta.

php producir.php base/css/salida css

El resultado final para producción es algo así:

introducir la descripción de la imagen aquí

La verdad aun no estoy contento con la solución, pero hasta ahora es la forma como he solventado el problema a continuación comparto el código del fichero producir.php

<?php

function esArchivoLegible($directorio) {
    return is_file($directorio) && is_readable($directorio);
}

function esDirectorioLegible($directorio) {
    return is_dir($directorio) && is_readable($directorio);
}

function listarArchivosLegibles($directorio, $respuesta = []) {
    $archivosExcluidos = [".", "..", ".htaccess", ".htpasswd"];
    $contenidoDirectorio = scandir($directorio);
    foreach ($contenidoDirectorio as $contenido) {
        $fichero = "$directorio/$contenido";
        if (in_array($contenido, $archivosExcluidos)) {
            continue;
        } elseif (esArchivoLegible($fichero)) {
            $respuesta[] = $fichero;
        } elseif (esDirectorioLegible($fichero)) {
            $respuesta = listarArchivosLegibles($fichero, $respuesta);
        }
    }
    return $respuesta;
}

function copiarTodoLosContenidosEnUnaSoloDirectorio($origen, $destino) {
    foreach (listarArchivosLegibles($origen) as $archivo) {
        $nombre = trim(str_replace([$origen, '/'], ['', '-'], $archivo), '-');
        copy($archivo, "$destino/$nombre");
    }
}

if (!isset($argv[1])) {
    echo "No ha definido un origen";
} elseif (!esDirectorioLegible($argv[1])) {
    echo "El origen no es un directorio legible";
} elseif (!isset($argv[2])) {
    echo "No ha definido un destino";
} elseif (!esDirectorioLegible($argv[2])) {
    echo "El destino no es un directorio legible";
} else {
    copiarTodoLosContenidosEnUnaSoloDirectorio($argv[1], $argv[2]);
}
echo "\n"; /* Un salto de linea por estética en la consola */

Estoy seguro que se puede replicar la idea usando meramente Javascript y no artificios de gulp para ejecutar PHP.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.