javascript - gulp js
¿Por qué gulp-useref no parece funcionar con un comentario en la sección de reemplazo? (4)
La razón por la que quiero poner un comentario dentro de la sección de reemplazo es que el comentario es en realidad una declaración de gulp-inject que inyecta algunas otras referencias antes de usar el uso-ref.
¿Podría usar alguna otra etiqueta en lugar de un comentario para hacer el mismo trabajo? Podría, por ejemplo, usar una etiqueta con un conjunto de atributos de data- que contenga el valor que está almacenando actualmente en el texto del comentario.
Estoy tratando de construir una tubería Gulp - Quiero inyectar algo de CSS en mi index.html (esto funciona bien) y luego tomar todos los otros enlaces de la fuente index.html y reemplazarlos en la versión de salida.
useref que la llamada a useref está destruyendo el resultado si la sección de plantilla para reemplazar incluye un comentario HTML (vea el ejemplo a continuación para la línea COMMENT ). Es más fácil de demostrar con código:
index.html (archivo fuente)
<!-- build:css styles/app.css-->
<!--COMMENT-->
<link rel="stylesheet" href="/.tmp/styles.css">
<!-- endbuild -->
tarea de gulpfile.js
gulp.task(''optimizeReplace'', function () {
var assets = $.useref.assets({ searchPath: ''./'' });
return gulp
.src(''./src/client/index.html'')
.pipe(assets)
.pipe(assets.restore())
.pipe($.useref()) //THIS IS THE PROBLEM LINE; IF INJECT IS NOT RUN FIRST IT IS MANGLED
.pipe(gulp.dest(''./wwwroot/''));
});
Salida ( index.html )
</style>
<link rel="stylesheet" href="styles/lib.css">
<link rel="stylesheet" href="styles/app.css-->" <!--COMMENT>
</head>
<body>
<div>
El problema es más fácil de ver en HTML, pero el comentario COMMENT HTML pierde la mitad final de su etiqueta, por lo que todo después de que crea que se trata de un comentario.
La razón por la que quiero poner un comentario dentro de la sección de reemplazo es que el comentario es en realidad una declaración de gulp-inject que inyecta algunas otras referencias antes de useref . Lo simplifiqué a un simple comentario en HTML que causaba el problema.
Esta es la línea que causa el problema: .pipe($.useref())
FYI Estoy siguiendo el curso de John Papa en Pluralsight, donde usa este mecanismo exacto para inyectar algo de CSS y luego reemplazarlos - (los delimitadores de comentarios HTML de inject:css se destrozan después de un useref ):
<!-- build:css styles/app.css-->
<!-- inject:css -->
<link rel="stylesheet" href="/.tmp/styles.css">
<!-- endinject -->
<!-- endbuild -->
¿Cómo puedo obtener el useref() para reemplazar la plantilla con los enlaces correctos pero dejar el comentario HTML intacto?
Gracias.
La razón es la documentación de verificación de cambio de versión useref aquí tiene un ejemplo:
gulp.task(''optimize'', [''templateCache'', ''images''], function(){ var templateCache = config.temp + config.templateCache.files; return gulp .src(config.index) .pipe($.plumber()) .pipe($.inject(gulp.src(templateCache, {read: false}, {starttag: ''''}))) .pipe($.useref({ searchPath: ''./'' })) .pipe(gulp.dest(config.build)); });
Espero eso ayude
Los comentarios se eliminan pero hay excepciones. Los comentarios condicionales de IE se conservan para que pueda realizar una solicitud allí o escribir una solicitud de extracción y ver si se acepta. Aquí está el repositorio:
Puedes probar node-useref en lugar de gulp-useref, que conserva IE Conditional Comments
<!-- build:js scripts/combined.js -->
<!--[if lt IE 9]>
<script type="text/javascript" src="scripts/this.js"></script>
<script type="text/javascript" src="scripts/that.js"></script>
<![endif]-->
<!-- endbuild -->
El resultado será
<!--[if lt IE 9]>
<script src="scripts/combined.js"></script>
<![endif]-->
O intenta sacar tu comentario de tu código de construcción así:
<!--COMMENT-->
<!-- build:css styles/app.css-->
<link rel="stylesheet" href="/.tmp/styles.css">
<!-- endbuild -->