0

Estoy colaborando con un proyecto en github y mi trabajo consiste en crear estilos para diferentes temas visuales. El proyecto consta de archivos scss, y para poder comprobar lo que estoy haciendo necesito compilarlos. No deseo instalar ruby-sass y ya tengo instalado webpack, además he instalado node-sass y sass-loader, pero no sé cómo configurarlo.

Como pueden ver en la imagen, tengo cuatro archivos sass principales, de los cuáles tres tengo que compilar por separado.

introducir la descripción de la imagen aquí

EL problema es que no sé cómo configurar webpack para que pueda compilar cada uno de estos archivos sin problemas y que encuentre correctamente los archivos scss base que está por fuera de la carpeta donde están los archivos por compilar.

introducir la descripción de la imagen aquí

Además, tengo pensado crear otros cuatro estilos, cuya estructura es la misma, los mismos archivos, por lo cuál me sería de mucha ayuda una configuración general para poder usarla en cada proyecto.

1 respuesta 1

0

Para responder al mismo caso de uso, pero haciendo uso de gulp he confeccionado el siguiente código:

'use strict';

import merge    from 'merge-stream';
import gulp     from 'gulp';

import yaml     from 'js-yaml';
import fs       from 'fs';
import path     from 'path';

// Themes path
const themesPath = "jet/static/jet_src/scss/themes/";

function getFolders(dir) {
    return fs.readdirSync(dir)
        .filter(function (file) {
            return fs.statSync(path.join(dir, file)).isDirectory();
        });
}

function sass() {
    var folders = getFolders(themesPath);
    return merge.apply(null, folders.map(folder => {
        return gulp.src(path.join(themesPath, folder, '/**/*.scss'))
            .pipe($.sourcemaps.init())
            .pipe($.sass({
                includePaths: PATHS.sass
            })
                .on('error', $.sass.logError))
            .pipe($.autoprefixer({
                browsers: COMPATIBILITY
            }))
            // Comment in the pipe below to run UnCSS in production
            .pipe($.if(PRODUCTION, $.uncss(UNCSS_OPTIONS)))
            .pipe($.if(PRODUCTION, $.cssnano()))
            .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
            .pipe(gulp.dest(PATHS.dist + '/css/themes/' + folder))
            .pipe(browser.reload({stream: true}));
    }));
}

Entonces, como se puede notar en realidad la función no es complicada, consiste en ejecutar la misma tarea sobre el arbol de directorios presente en el proyecto:

  • Definimos una variable constante cuyo valor es una cadena de caracteres que contiene el camino hacia la carpeta donde están las subcarpetas para cada tema.
  • Creamos una función que devuelve en un arreglo la lista de subcarpetas de la carpeta themes.
  • Viene la parte más compleja: normalmente los proyectos están estructurados de forma que todos los archivos sass o scss se encuentran en una misma carpeta y el resultado final es la mezcla de todos esos archivos en un único archivo o en varios archivos pero siempre siguiendo la misma estructura de la carpeta origen.

    Sin embargo, esta estructura nos indica que se va a ejecutar la anterior tarea, pero con varias carpetas en lugar de una, por lo que debemos deducir, si o si, de lo contrario vamos a tener problemas en la ejecución de tareas, que debemos crear un hilo de tareas, que implica esto? Cuando tenemos una sóla tarea gulp cierra la tarea luego de que se completa, cuando tenemos multiples tareas tenemos que cerrarlas todas antes de que gulp pueda completar esa tarea.

    Por tanto necesitamos mezclar todas las tareas en canal(pipe), y para ello usamos merge-stream antes de ejecutar las subtareas.

  • Ahora bien, vamos a ejecutar cada subtarea a lo largo de cada arbol del desarrollo: llamamos árbol al desglose que hacemos desde el directorio padre hacia los archivos finales. Para ello usamos la función map.

  • Finalmente, esto es muy importante también, tener cuidado de que la tarea replique el árbol de carpetas de la misma forma que está constituido en el árbol original, de forma que cada archivo esté destinado a la subcarpeta correspondiente a cada tema. Por eso al final, dentro de la función dest añadimos la variable folder, que contiene el nombre de la subcarpeta, para que pueda destinar los archivos resultantes en su respectiva carpeta.

Eso es todo. El resultado habla por si sólo: introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

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.