gruntjs - rutas - ¿Cómo debo configurar grunt-usemin para que funcione con una ruta relativa?

url relativos y absolutos

Question

Tengo un proyecto gruñido respaldado por un generador de yeoman que he construido basado en el generator-webapp . Si es de alguna ayuda, puedes encontrarlo en GitHub

El proyecto de gruñido nos hace la tarea de grunt-usemin .

Mi proyecto involucra la construcción de un sitio web multilingüe, y para mantener las cosas limpias, he decidido poner todas las páginas escritas en un idioma en el nombre de una carpeta después del shortcode de 2 letras de dicho idioma.

| project/
|--dist/
|----en/
|------index.html
|------404.html
|------...
|----fr/
|------index.html
|------404.html
|------...

Los archivos están hechos de plantillas de manillares y procesados ​​con assemble . En el diseño tengo bloques de construcción para usemin como

<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="../styles/main.css">
<!-- endbuild -->
<!-- build:js scripts/vendor/modernizr.js -->
<script src="../bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->

Lo que, en un mundo perfecto se traduciría a

<link rel="stylesheet" href="../styles/main.css">
<script src="../scripts/vendor/modernizr.js"></script>

pero en cambio muestra

<link rel="stylesheet" href="styles/main.css">
<script src="scripts/vendor/modernizr.js"></script>

que es menos que ideal en mi caso. La parte relevante de Gruntfile.js ve así

    useminPrepare: {
        options: {
            dest: ''<%= yeoman.dist %>''
        },
        html: [
            ''<%= yeoman.app %>/fr/{,*/}*.html'',
            ''<%= yeoman.app %>/en/{,*/}*.html''
        ]
    },
    usemin: {
        options: {
            dirs: [''<%= yeoman.dist %>'']
        },
        html: [
            ''<%= yeoman.dist %>/fr/{,*/}*.html'',
            ''<%= yeoman.dist %>/en/{,*/}*.html''
        ],
        css: [''<%= yeoman.dist %>/styles/{,*/}*.css'']
    }

He intentado usar la opción basedir configurándola en <%= yeoman.dist %> así como cambiando los bloques de compilación a

<!-- build:css(.tmp) ../styles/main.css -->
<link rel="stylesheet" href="../styles/main.css">
<!-- endbuild -->
<!-- build:js ../scripts/vendor/modernizr.js -->
<script src="../bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->

Pero lamentablemente no fue capaz de obtener una salida adecuada.

Más específicamente, el primero no cambió nada, el segundo hizo que los scripts y los styles las carpetas obtuvieran un nivel demasiado alto en la jerarquía

| project/
|--app/
|--dist/
|--styles/
|--scripts/

en lugar de

| project/
|--app/
|--dist/
|----styles/
|----scripts/

¿Alguien sabría qué hacer? Parece un caso bastante sencillo, pero no pude encontrar la ayuda que necesito a través de Google, GitHub o SO ...

Answer 1

Creo que puedes lograr lo que necesitas de esta manera:

Archivo html:

    <!-- build:css styles/main.css -->
    <link href=''../styles/css/style.css'' rel=''stylesheet'' type=''text/css''>
    <link href=''../styles/css/responsive.css'' rel=''stylesheet'' type=''text/css''>

    <link href="../styles/css/skins/welld.css" rel=''stylesheet'' type=''text/css'' id="skin-file">
    <!-- endbuild -->

Gruntfile.js

        useminPrepare: {
            options: {
                dest: ''<%= yeoman.dist %>/''
            },
            html: [''<%= yeoman.app %>/snippets/head.html'',''<%= yeoman.app %>/snippets/tail.html'']
        },
        usemin: {
            options: {
                dirs: [''<%= yeoman.dist %>/''],
                blockReplacements: {
                    css: function (block) {
                        return ''<link rel="stylesheet" href="../'' + block.dest + ''"/>'';
                    },
                    js: function (block) {
                        return ''<script src="../'' + block.dest + ''"></script>'';
                    }
                }
            },
            html: [''<%= yeoman.dist %>/{,*/}*.html''],
            css: [''<%= yeoman.dist %>/styles/{,*/}*.css'']
        }

La solución clave está en la opción blockReplacements de la tarea usemin. Básicamente, la tarea colocará sus archivos en <% = yeoman.dist%> / styles / main.css, mientras que su html estará en <% = yeoman.dist%> / en / somefileinEnglish.html y todas las instancias de ''estilos /main.css ''en este archivo se reemplazará con'' ../styles/main.css '', agregando la ruta relativa correcta.

Como sugerencia adicional, si está creando un sitio web multilingüe, es posible que desee considerar grunt-i18n para traducir su archivo mientras se construye, por lo que no necesitará mantener un archivo html diferente para cada idioma.

Answer 2

Estaba construyendo mi propio andamio Grunt y me sentí frustrado por este problema. Me las arreglé para crear un trabajo alrededor que me gustaría compartirlo con ustedes.

Me gustaría usar un ejemplo propio para ilustrar la razón detrás de su problema y cómo logré solucionarlo. Digamos que mi estructura de directorios es la siguiente:

| in/
+---- pages/
|    +---- login.html
+---- js/
|    +---- s1.js
|    +---- s2.js
+---- index.html
| out/
| Gruntfile.js

Donde in/ es donde residen todos mis archivos de origen y out/ es el directorio de dest , donde se almacenarán todos los archivos de salida. Digamos que quiero importar s1.js en login.html , escribiría algo como esto:

<!-- build:js ../js/login.js -->
<script src="../js/s1.js"></script>
<!-- endbuild -->

Aquí, el bloque usemin realiza un reemplazo de cadena simple, por lo que la ruta de salida debe estar exactamente donde quiero vincular el archivo de salida. El problema se produce cuando en lugar de tener login.js en out/js/login.js , useminPrepare termina aterrizando en js/login.js . La razón detrás de esto es que useminPrepare simplemente realiza una unión de ruta entre dest (que está out ) y la ruta de salida (que es ../js/login.js ), mientras que debería haber realizado una unión de ruta con respecto a donde está el HTML se encuentra el archivo.

Para login.html este problema, tenga en cuenta que si configuro dest en out/pages que respeta el lugar donde se encuentra login.html , funcionará bien. PERO observe que si index.html importa js/s2.js de una manera similar, eso se js/s2.js . Así que para evitar eso, necesitamos crear un objetivo useminPrepare para index.html con dest: "out" y otro objetivo para login.html con dest: "out/pages" . Por lo tanto, mi configuración useminPrepare ahora se ve algo como esto:

"useminPrepare": {
    t1: {
        dest: "out",
        files: [{src: ["in/*.html"]}],
        ...
    },
    t2: {
        dest: "out/pages",
        files: [{src: ["in/pages/*.html"]],
        ....
    }
}

Todos los objetivos tendrán que correr. Ahora probablemente dirás; ¿Qué pasa si tengo más archivos HTML en otros subdirectorios? ¿Eso significa que tendré que crear un destino para cada directorio donde se encuentran los archivos HTML? Esto es dolor en el culo y estupido. ¡Es! Estoy de acuerdo. Así que escribí una tarea muy especial para ayudar. Lo llamo useminPreparePrepare , deliberadamente lo nombré estúpidamente, porque es estúpido. Realmente espero deshacerme de este trabajo alrededor de un día cuando usemin personas resuelva este problema. Como su nombre lo indica, useminPreparePrepare prepara las configuraciones para useminPrepare. Sus propias configuraciones reflejan los resultados de la revisión (de hecho, la mayoría de las configuraciones son simplemente copiadas) con una excepción; tendrá que agregar una propiedad src que apunte al directorio raíz de origen donde residen todos sus archivos de origen, para que pueda descubrir la ruta relativa entre la raíz de origen y los archivos HTML. Se llevará a cabo esencialmente lo que he mencionado anteriormente. Además, también hace lo mismo con el directorio de ensayo, por lo que los archivos de almacenamiento no se separan del directorio de almacenamiento. Incluso puede tener múltiples objetivos en useminPreparePrepare, copiará las opciones para el objetivo que ejecutó.

Para utilizar esta solución, primero deberá importar useminPreparePrepare. No lo puse en npm, así que solo tendrás que copiarlo y pegarlo. No me importa Luego simplemente cambie el nombre de su configuración useminPrepare a useminPreparePrepare, y agregue la propiedad src . Para el ejemplo anterior, src: "in" . Luego, debe ejecutar useminPreparePrepare con el objetivo que normalmente le gustaría, luego ejecute useminPrepare inmediatamente sin especificar el objetivo para que se ejecuten todos los objetivos. Dado el ejemplo anterior, la configuración de Grunt podría ser algo como esto:

"useminPreparePrepare": {
    html: "in/**/*.html",   // All HTML files under in/ and its subdirectories.
    options: {
        src: "in",
        dest: "out",
        ....
    }
},
"copy": {
    html: { // Copies all HTML files from in/ to out/ preserving their relative paths.
        files: [{
                expand: true,
                cwd: "in",
                src: ["**/*.html"],
                dest: "out"
            }
        ]
    }
},
"usemin": {
    html: "out/**/*.html",  // Process all HTML files under out/ and its subdirectories.
    ...
}

Puede ver que la configuración anterior es lo suficientemente simple como para incluir todos los archivos HTML de forma recursiva en el directorio de origen. useminPreparePrepare se encarga de todas las estupideces de trabajo mientras se ve como useminPrepare.

¡Espero que esto ayude!

Answer 3

Hago una corrección de errores para la ruta relativa. https://www.npmjs.com/package/grunt-usemin-fix

Puede copiar y pegar el cambio a la fuente de use-min para usar la ruta relativa

Answer 4

He visto muchas preguntas sobre esto y no hay respuestas reales. En mi proyecto, asigné la carpeta "dist" al lado del servidor "/ static". Así que no necesito calcular la ruta relativa en index.html.

Pero aún así, el problema sigue siendo usemin

<!-- build:css(.tmp) static/css/main.css -->
<link rel="stylesheet" href="css/main.css">
<!-- endbuild -->

el archivo usemin se escribirá en dist/static/css/main.css

y el HTML mostrará la ruta incorrecta (pero esperada)

<link rel="stylesheet" href="static/css/main.css">

La única solución que he encontrado es no tocar el bloque usemin, ejecutar grunt y actualizar la ruta manualmente.

Answer 5

Mi solución fue modificar manualmente el complemento grunt-usemin.

Abra node_modules/grunt-usemin/fileprocessor.js en su editor de texto favorito. En algún lugar alrededor de la línea 152 encontrar:

if (assetSearchPath && assetSearchPath.length !== 0) {
  this.file.searchPath = assetSearchPath;
}

y reemplazarlo con:

if (assetSearchPath && assetSearchPath.length !== 0) {
  this.file.searchPath.splice(0, 0, assetSearchPath);
}

Por defecto, this.file.searchPath es una matriz que contiene la ruta absoluta al archivo actual. No tiene sentido sobrescribirlo con [''dist''] , es mejor anteponer la matriz con ''dist''. De esta manera, si un elemento no se encuentra en el directorio ''dist'', se podría concluir que la ruta es relativa o es incorrecta. Por lo tanto, utilizamos el segundo valor de la matriz searchPath para buscar el archivo y, si se trata de una ruta relativa, obtenemos lo que queríamos.

Answer 6

Realizo los bloques de usemin relativos a la plantilla.

Tengo una estructura como esta:

app/ - webroot source (devmode)
app/views/layouts - layouts for server-generated pages (also has usermin tags init)
app/js - source javascript

dist/ - production build dir

Hago que mi html tenga este aspecto en app / layouts / main.html:

    <!-- build:js js/static.min.js -->
      <script src="../../js/controllers/StaticCtrl.js"></script>
      <script src="../../js/directives/backImg.js"></script>
      <script src="../../js/smooth-scroll.js"></script>
    <!-- endbuild -->

en dev (no usemin, solo sirve archivos) "../../" ingeniosamente solo se resuelve en "/", por lo que todavía funciona. De esta manera, no es necesario preprocesar durante el desarrollo (con tareas de vigilancia o lo que sea)

Answer 7

Si estoy entendiendo su pregunta correctamente, creo que necesita la opción ''raíz'':

{
  useminPrepare: {
    html: ''html/index.html'',
    options: {
    root: ''app''
    dest: ''dist''
    }
  }
}

Aunque index.html está en la carpeta / html, la búsqueda de archivos será desde app / not html /

Answer 8

Usé múltiples objetivos como se muestra a continuación:

 useminPrepare: {
        target1 : {
                src : [''target1/*.html''],
                options : {
                    dest: ''out''
                }
            },

            target2 : {
                src : [''target2/folder/*.html''],
                options : {
                    dest: ''out/subfolder''
                }
            }
    },

Luego, en el bloque HTML puedes:

<!-- build:js ../subfolder/script.js -->
<script src="../subfolder/scripts/main.js></script>
<!-- endbuild -->

Answer 9

useminPrepare: {
        loyalty: {
            src: ''<%= loyalty.app %>/Views/index.tpl'',
            options: {
                dest: ''.'',
                flow: {
                    html: {
                        steps: {
                            js: [''concat'', ''uglifyjs''],
                            css: [''cssmin'']
                        },
                        post: {}
                    }
                }
            }
        }
    },
<!-- build:css /resources/v4/css/loyalty/index.css -->
<link rel="stylesheet" href="../Resources/css/main.css">
<link rel="stylesheet" href="../Resources/css/product.css">
<link rel="stylesheet" href="../Resources/css/use_code.css">
<!-- endbuild -->

utilizar ''.'' como destino en gruntfile.