grunt - css with sass

Argumento de la línea de comandos como var en Sass, para URL de CDN codificadas en compilación

Question

Para el desarrollo local de HTML / Sass / Css, usamos libsass (a través de Grunt) para compilar nuestros archivos Sass en Css. Las URL de la imagen de fondo de Css son relativas a la raíz.

Hablar con descaro a

$dir-img: /img;

.header {
    background-image: url(#{$dir-img}/header.jpg);
}

Nos gustaría cambiar la URL para usar un CDN al compilar para el servidor de producción:

background-image: url(http://media.website.com/img/header.jpg);

¿Hay alguna solución para pasar un argumento de línea de comandos a Sass para que Sass pueda usar un Sass @IF para cambiar las URL relativas a la raíz a CDN codificadas como las URL? Algo como:

Línea de comando:

grunt sass:dist --cdnurl="http://media.website.com/img/"

Hablar con descaro a

Entonces Sass comprueba si se dio el argumento de la línea de comando:

@if using CDN {
    $dir-img: cdnurl;
@else {
    $dir-img: /img;
}

Y luego todas las URL de IMG usarían la URL de CDN.

Answer 1

No pude encontrar nada en las opciones de línea de comandos de libass para pasar dichos vars. a Sass.

¡Pero finalmente se me ocurrió una versión de trabajo! Haz que Grunt escriba un parcial de configuración de Sass.

Muy simple en realidad si ya estás usando Grunt y Sass. Ya teníamos instalado NodeJS y Grunt-cli en nuestro servidor de prueba (prueba).

Configuración de Sass

En Sass ya usamos un archivo de configuración de Sass (más grande) que contiene algunos vars como:

_config.scss

$dir-font: ''/assets/assets/fonts'';
$dir-htc: ''/assets/htc'';
$dir-img: ''/assets/images'';

Este archivo de configuración contiene mucha más configuración, pero he actualizado estos valores. en este archivo de configuración a:

@import "_sourcepaths";
$dir-font: ''/assets/fonts'' !default;
$dir-htc: ''/assets/htc'' !default;
$dir-img: ''/assets/images'' !default;

Tenga en cuenta el @import partial de _sourcepaths.scss . Este pequeño archivo parcial es generado por Grunt . El Sass !default; se usa como vars de reserva. o puede que ya no los necesites (están sobreescritos por Grunt).

Grunt setup

Del lado de Grunt, agregué una tarea personalizada que solo se ejecuta en nuestro servidor de prueba (o prueba) (por ejemplo, durante un proceso de compilación). En nuestra máquina local seguimos usando rutas relativas a la raíz para el desarrollo local.

Grunt configuración personalizada de destino

module.exports = function(grunt) {
    grunt.initConfig({
        writeSassConfig: {
            options: {
                scss: ''./assets/scss/partials/_sourcepaths.scss'',
                dirFont: ''/assets/fonts'',
                dirHtc: ''/assets/htc'',
                dirImg: ''/assets/images''
            },
            cdn: {
                //pathprefix: ''http://cdn.website.com''
                pathprefix: grunt.option(''pathprefix'') || ''''
            }
        }
    }
});

Ejemplo cdn Grunt objetivo con hardcoded ( http://cdn.website.com ) o dinámico (vía grunt.option línea de comandos argumento) pathprefix . Vea a continuación en ''Ejecutando la tarea Grunt'' cómo ejecutar esto. También tiene una reserva || '''' || '''' a vaciar, que en realidad restablece las rutas en el archivo de configuración de Sass a las URL relativas a la raíz.

Grunt tarea personalizada

Luego, la tarea requerida de Grunt (para la configuración anterior). Esta tarea Grunt escribe el parcial de Sass en el disco.

grunt.registerMultiTask(''writeSassConfig'', ''Write Sass config file to change source paths'', function(){
    grunt.config.requires(
        this.name + ''.options.scss'',
        this.name + ''.options.dirFont'',
        this.name + ''.options.dirHtc'',
        this.name + ''.options.dirImg'',
    );

    // Create Sass vars
    var _thisOptions = this.options(),
        pathprefix = this.data.pathprefix || '''',
        contents = "// Generated by Grunt for dynamic paths like a CDN server/n";
        contents += "$dir-font: ''" + pathprefix + _thisOptions.dirFont + "'';/n";
        contents += "$dir-htc: ''" + pathprefix + _thisOptions.dirHtc + "'';/n";
        contents += "$dir-img: ''" + pathprefix + _thisOptions.dirImg + "'';/n";

    grunt.file.write(_thisOptions.scss, contents);
});

Grunt tarea aliased

Esto crea un flujo de trabajo encadenado personalizado de dos tareas que se ejecutan una tras otra. El sass:dist es una tarea y objetivo Grunt regular a través del complemento grunt-sass (libsass). Probablemente ya estés usando esto.

grunt.registerTask(''build-sasscdn'', ''Generate Sass config for different Sass paths like a CDN server path'', function(){
    grunt.task.run(
        ''writeSassConfig'',
        ''sass:dist''
    );          
});

Ejecución de la tarea Grunt personalizada

La var. pathprefix , a través de grunt.option(''pathprefix'') , en el destino personalizado de Grunt se proporciona a través del argumento de la línea de comando grunt :

grunt build-sasscdn --pathprefix="https://cdn.website.com"

Este nombre de dominio puede ser cambiado por el lenguaje de secuencia de comandos (servidor de prueba) del lado del servidor (como .NET / PHP / Ruby). El archivo de configuración de Sass _sourcepaths.scss ahora ha sido modificado por Grunt para:

_sourcepaths.scss

$dir-font: ''https://cdn.website.com/assets/fonts'';
$dir-htc: ''https://cdn.website.com/assets/htc'';
$dir-img: ''https://cdn.website.com/assets/images'';

Recuerda que _sourcepaths.scss es importado por Sass. La tarea Grunt alias ejecuta entonces el destino habitual sass:dist , que simplemente vuelve a compilar el Sass (en el servidor de ensayo / prueba) CON rutas de nombre de dominio CDN actualizadas y codificadas en el Css.