lire les fichiers html et trouver js/css et rapetisser que et remplacer le nom js/css avec l'ancien nom - Gulp

Je dispose d'un fichier html comme ceci:lire les fichiers html et trouver js/css et rapetisser que et remplacer le nom js/css avec l'ancien nom - Gulp

<html class="h-100"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Login</title> 

    <!-- main css --> 
    <link rel="stylesheet" href="../src/vendors/clarity-ui/css/clarity-ui.min.css"> 
    <link rel="stylesheet" href="../src/scss/main.css"> 
</head>

Je veux lire le fichier html pour le faire:

nom d'extrait et le chemin ou le fichier css js
rapetisser ou js
Copier dist répertoire
Renommer cs s ou js chemin/nom vers un nouvel emplacement et nom

Comment faire cela avec les plugins Gulp et Gulp?

Source

2017-10-03 Ehsan Ali

Regardez gulp-useref. Il a un bon exemple:

var gulp = require('gulp'), 
useref = require('gulp-useref'), 
gulpif = require('gulp-if'), 
uglify = require('gulp-uglify'), 
minifyCss = require('gulp-clean-css'); 

gulp.task('html', function() { 
     // I made a small change to gulp.src below 
    return gulp.src('./app/*.html') 
    .pipe(useref()) 
    .pipe(gulpif('*.js', uglify())) 
    .pipe(gulpif('*.css', minifyCss())) 
    .pipe(gulp.dest('dist')); 
});

[EDIT: Ajout votre code html]

<html class="h-100"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Login</title> 

    <link rel="stylesheet" href="../src/vendors/clarity-ui/css/clarity-ui.min.css"> 

    <!-- build:css dist/css/main.css --> 
    <link rel="stylesheet" href="../src/scss/main.css"> 
    <!-- endbuild --> 

    <!-- build:js ../dist/js/myJS.js --> 
    <script src="../src/js/myJS.js"></script> 
    <!-- endbuild --> 

</head>

Je suppose que vous ne voulez pas changer le vendeur déjà minified css. Il n'est donc pas nécessaire d'élaborer une directive à ce sujet.

Et useref ne concaténera pas le fournisseur css car il n'attrapera pas cet actif car il n'y a pas de directive de construction autour de lui.

Vous pouvez faire quelque chose de similaire pour vos fichiers js.

[EDIT:. Ajouté dossier structure]

-[your working directory] 
---[app] 
-----test.html 
---[src] 
------[scss] 
--------main.css 
------[js] 
--------myJS.js 
-gulpfile.js

Ainsi, les gulpfile.js est dans votre répertoire de travail de base au-dessus de l'application et les dossiers src. Exécuter gulp html à partir de votre répertoire de travail va créer un dossier 'dist' avec votre css minifié et jfs éclairé dedans et votre main.html modifié.

J'ai exécuté ceci sur un système de test avec cette structure de dossiers et cela fonctionne parfaitement. Faites-moi savoir si vous avez encore des problèmes.

Source

2017-10-03 13:52:59 Mark

Merci @Mark mais je ne veux pas concaténer tous les fichiers js ou css. Utilisation useref pour concaténer des fichiers d'actifs. Avez-vous une idée? –

C'est juste leur exemple de code. Il ne concaténera pas votre CSS, par exemple, si vous mettez une directive de construction autour de chacun séparément. Avez-vous essayé après avoir mis les directives dans votre fichier html? Les directives indiquent quels actifs css ou js obtenir et à quoi les renommer. Mettez une directive autour de chaque css individuel. – Mark

Cela ne fonctionne pas. Que faire avec ce script? –

lire les fichiers html et trouver js/css et rapetisser que et remplacer le nom js/css avec l'ancien nom - Gulp

Répondre

Questions connexes