web-dev-qa-db-fra.com

Pourquoi gulp-useref ne semble pas fonctionner avec un commentaire dans la section remplacement?

J'essaie de construire un pipeline de gulp - je veux injecter du CSS dans mon index.html (cela fonctionne bien), puis récupérer tous les autres liens de la source index.html et les remplacer dans la version sortie.

J'ai remarqué que l'appel useref est en train de modifier la sortie if la section basée sur un modèle à remplacer inclut un commentaire HTML (voir l'exemple ci-dessous pour la ligne COMMENT). Il est plus facile de démontrer avec du code:

index.html (fichier source)

<!-- build:css styles/app.css-->
<!--COMMENT-->
<link rel="stylesheet" href="/.tmp/styles.css">
<!-- endbuild -->

gulpfile.js tâche

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/'));
});

Sortie (index.html)

</style>
<link rel="stylesheet" href="styles/lib.css">
<link rel="stylesheet" href="styles/app.css-->" <!--COMMENT>
</head>

<body>
  <div>

Il est plus facile de voir le problème en HTML, mais le commentaire HTML COMMENT HTML perd la fin de la moitié de sa balise, ainsi tout ce qui suit pense qu’il s’agit d’un commentaire.

La raison pour laquelle je souhaite insérer un commentaire dans la section de remplacement est qu'il s'agit en fait d'une instruction gulp-inject qui insère d'autres références avant que je ne fasse la variable useref. Je l'ai simplifié à un simple commentaire HTML posant le problème.

C'est la ligne qui cause le problème: .pipe($.useref())

Pour info, je suis en train de suivre Le cours de John Papa sur Pluralsight où il utilise ce mécanisme exact pour injecter des CSS, puis les remplacer - (les délimiteurs de commentaires HTML inject:css sont mutilés après une useref):

<!-- build:css styles/app.css-->
<!-- inject:css -->
<link rel="stylesheet" href="/.tmp/styles.css">
<!-- endinject -->
<!-- endbuild -->

Comment puis-je obtenir la useref() pour remplacer le modèle par les liens corrects mais laisser le commentaire HTML intact?

Merci.

javascriptgulpgulp-useref
36
Rodney

La raison en est la documentation de vérification des modifications de version https://www.npmjs.com/package/gulp-useref . Vous avez ici un exemple:

gulp.task ('optimise', ['templateCache', 'images'], function () {
 
 var templateCache = config.temp + config.templateCache.files; 
 
 return gulp 
 .src (config.index) 
 .pipe ($. plombier ()) 
 .pipe ($. inject (gulp.src (templateCache , {read: false}, {starttag: ''}))) 
 .pipe ($. useref ({searchPath: './'})) 
 .pipe (gulp.dest ( config.build)); 
});

j'espère que ça aide

1
Pedro Lescano

La raison pour laquelle je souhaite insérer un commentaire dans la section de remplacement est que ce commentaire est en réalité une instruction gulp-inject qui injecte d'autres références avant de procéder à l'utilisation-ref.

Pourriez-vous utiliser une autre balise au lieu d'un commentaire pour faire le même travail? Vous pouvez, par exemple, utiliser une balise avec un ensemble d'attributs data- qui contient la valeur que vous stockez actuellement dans le texte du commentaire.

0
Adam

Vous pouvez essayer node-useref au lieu de gulp-useref qui conserve IE Commentaires conditionnels

<!-- 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 -->

Le résultat sera

<!--[if lt IE 9]>
<script src="scripts/combined.js"></script>
<![endif]-->

Ou essayez de mettre votre commentaire dans le code de votre bâtiment comme ceci:

<!--COMMENT-->
<!-- build:css styles/app.css-->
<link rel="stylesheet" href="/.tmp/styles.css">
<!-- endbuild -->
0
Vince

Les commentaires sont supprimés mais il y a des exceptions. IE les commentaires conditionnels sont conservés afin que vous puissiez y faire une demande ou écrire une demande d'extraction et voir si elle est acceptée. Voici le repo:

https://github.com/digisfera/useref

0
jonkemp