javascript - llamar - Cambie el enlace o el nombre de archivo del script en html después de que gruntjs minimice/uglify

llamar javascript desde html

Question

Estoy usando minify / uglify estándar para archivos css / js y combino varios archivos a main.min.css o app.min.js ... Sin embargo, mi archivo .html debe modificarse para que apunte a estos nuevos nombres de archivos también en <link> o <script>

Hay alguna manera de automatizar esto? ¿O cómo modificar los archivos .html automáticamente para cambiar el nombre de los nombres de los archivos usando gruntjs ?

Answer 1

Esto es fácilmente automatizado con grunt-processhtml. Aquí hay un ejemplo de la documentación:

<!-- build:js app.min.js -->
<script src="my/lib/path/lib.js"></script>
<script src="my/deep/development/path/script.js"></script>
<!-- /build -->

<!-- changed to -->
<script src="app.min.js"></script>

Lea más en https://www.npmjs.org/package/grunt-processhtml

Answer 2

Estoy usando la aplicación Middleman para diferenciar entre dev vs build en mi archivo html o haml:

- if development?

y

- if build?

Answer 3

Puede usar grunt preprocess para hacer esto: https://github.com/jsoverson/grunt-preprocess

Básicamente, necesita configurar una plantilla y hacer que el proceso reemplace las partes relevantes.

La parte de Gruntfile se verá así:

preprocess: {
    dev: {
            options: {
                    context: {
                            DEBUG: true,
                            HOST: ''<%= env.dev.HOST %>''
                    }
            },
            files: {
                    ''index.html'': ''tpl/index.tpl''
            }
    },
    production: {
            options: {
                    context: {
                            DEBUG: false,
                            HOST: ''<%= env.production.HOST %>
                    }
            },
            files: {
                    ''index.html'': ''tpl/index.tpl''
            }
    }

}

Answer 4

Puedes hacer esto con grunt-string-replace . Aquí hay un ejemplo de cómo podrías usarlo.

En mi index.html encuentras las siguientes etiquetas de importación:

<!--start PROD imports
<script src="assets/dist/traffic.min.js"></script>
end PROD imports-->

<!--start DEV imports-->
<script src="assets/js/app.js"></script>
<script src="assets/js/services.js"></script> 
<script src="assets/js/directives.js"></script>
<script src="assets/js/filters.js"></script>
<script src="assets/js/resources.js"></script>
<script src="assets/js/controller/homeControllers.js"></script>
<script src="assets/js/controller/adminControllers.js"></script>
<script src="assets/js/controller/reportsControllers.js"></script>
<!--end DEV imports-->

Fíjese en los comentarios ''iniciar importaciones'' y ''finalizar importaciones''. Por defecto (en DEV) comentamos la importación PROD.

En mi archivo grunt luego agrego la siguiente tarea:

    ''string-replace'': {
        inline: {
            files: {
                ''index.html'': ''index.html''
            },
            options: {
                replacements: [
                    {
                        pattern: ''<!--start PROD imports'',
                        replacement: ''<!--start PROD imports-->''
                    },
                    {
                        pattern: ''end PROD imports-->'',
                        replacement: ''<!--end PROD imports-->''
                    },
                    {
                        pattern: ''<!--start DEV imports-->'',
                        replacement: ''<!--start DEV imports''
                    },
                    {
                        pattern: ''<!--end DEV imports-->'',
                        replacement: ''end DEV imports-->''
                    }
                ]
            }
        }
    }

Ejecutar la tarea (grunt string-replace) me da:

<!--start PROD imports-->
<script src="assets/dist/traffic.min.js"></script>
<!--end PROD imports-->

<!--start DEV imports
<script src="assets/js/app.js"></script>
<script src="assets/js/services.js"></script>
<script src="assets/js/directives.js"></script>
<script src="assets/js/filters.js"></script>
<script src="assets/js/resources.js"></script>
<script src="assets/js/controller/homeControllers.js"></script>
<script src="assets/js/controller/adminControllers.js"></script>
<script src="assets/js/controller/reportsControllers.js"></script>
end DEV imports-->

Ahora las importaciones de DEV se han comentado, mientras que la importación de PROD ya no se comenta.

Answer 5

Una tarea grunt muy adecuada para esto es grunt-html-build

Puede sustituir algunas partes del HTML desde dev a una versión de producción. Ver ejemplos allí, es fácil de configurar.

Ahora, usando la configuración estándar presentada para grunt-html-build , si los archivos minificados se nombran dinámicamente durante el proceso de compilación como:

some-file.js -> another-name.min.js

Uno puede configurar grunt-html-build con:

[...]
scripts: {
   bundle: [
            ''<%= fixturesPath %>/scripts/*.min.js''
   ]
},
[...]

Una sección de HTML como:

<!-- build:script bundle -->
<script type="text/javascript" src="/path/to/js/libs/jquery.js"></script>
<script type="text/javascript" src="/path/to/js/libs/knockout.js"></script>
<script type="text/javascript" src="/path/to/js/libs/underscore.js"></script>
<script type="text/javascript" src="/path/to/js/app/module1.js"></script>
<script type="text/javascript" src="/path/to/js/app/module2.js"></script>
<!-- /build -->

Se cedería a algo como:

<script type="text/javascript" src="scripts/other-name.min.js"></script>
<script type="text/javascript" src="scripts/another-other-name.min.js"></script>

Eso es lo que @hyprstack está pidiendo en los comentarios.