serve - install gulp mac

¿Cómo reemplazo los nombres de archivo listados en index.html con la salida de gulp-rev?

Question

Estoy usando gulp-rev para construir archivos estáticos que puedo configurar para que no caduquen nunca . Me gustaría reemplazar todas las referencias a los archivos generados en index.html a estos archivos renombrados, pero parece que no puedo encontrar nada que haga eso como Grunt con usemin.

Por lo que puedo decir ahora, tengo algunas opciones.

1. Use gulp-usemin2 , que depende de gulp-rev. Cuando voy a buscar los complementos de Gulp , dice que gulp-usemin2 hace demasiado, así que debería usar gulp-useref , pero no puedo configurar gulp-ref para usar la salida de gulp-rev.
2. Escribir mi propio complemento para reemplazar los bloques (scripts y estilos) en index.html (y en el CSS) con los archivos generados.

¿Algunas ideas? No veo por qué este pequeño caso de uso debería ser lo único en mi camino para reemplazar a Grunt.

Answer 1

Acabo de escribir un complemento de trago para hacer esto, funciona especialmente bien con gulp-rev y gulp-useref.

El uso dependerá de cómo hayas configurado las cosas, pero debería tener el siguiente aspecto:

gulp.task("index", function() {
  var jsFilter = filter("**/*.js");
  var cssFilter = filter("**/*.css");

  return gulp.src("src/index.html")
    .pipe(useref.assets())
    .pipe(jsFilter)
    .pipe(uglify())             // Process your javascripts
    .pipe(jsFilter.restore())
    .pipe(cssFilter)
    .pipe(csso())               // Process your CSS
    .pipe(cssFilter.restore())
    .pipe(rev())                // Rename *only* the concatenated files
    .pipe(useref.restore())
    .pipe(useref())
    .pipe(revReplace())         // Substitute in new filenames
    .pipe(gulp.dest(''public''));
});

Answer 2

En lugar de tratar de resolver este problema varios pasos trillados (que gulp-rev parece querer que hagas), he entregado gulp-rev a gulp-rev-all para resolver este caso de uso en un solo plugin.

Para mi caso de uso personal, quería revocar absolutamente todo, pero como alguien más planteó una solicitud de función, debería existir la posibilidad de excluir ciertos archivos como index.html. Esto será implementado pronto.

Answer 3

Esto me ayudó a gulp-html-replace .

 <!-- build:js -->
    <script src="js/player.js"></script> 
    <script src="js/monster.js"></script> 
    <script src="js/world.js"></script> 
<!-- endbuild -->
    var gulp = require(''gulp'');
    var htmlreplace = require(''gulp-html-replace'');

    gulp.task(''default'', function() {
      gulp.src(''index.html'')
        .pipe(htmlreplace({
            ''css'': ''styles.min.css'',
            ''js'': ''js/bundle.min.js''
        }))
        .pipe(gulp.dest(''build/''));
    });

Answer 4

He enfrentado el mismo problema, probé gulp-rev-all, pero tiene algún problema de ruta, no muy libre de usar.

Así que encuentro una solución, uso gulp-rev y gulp-replace :

Al principio tengo un símbolo de reemplazo en mis archivos html (js, css)

<link rel="stylesheet" href="{{{css/common.css}}}" />

<script src="{{{js/lib/jquery.js}}}"></script>

en archivos css

background: url({{{img/logo.png}}})

En segundo lugar, después de una tarea de compilación, use gulp-replace para reemplazar todas las referencias de archivos estáticos:

Tomar el stylus compilar en desarrollo como ejemplo:

gulp.task(''dev-stylus'', function() {
   return gulp.src([''./fe/css/**/*.styl'', ''!./fe/css/**/_*.styl''])
             .pipe(stylus({
               use: nib()
             }))
             .pipe(replace(//{/{/{(/S*)/}/}/}/g, ''/static/build/$1''))
             .pipe(gulp.dest(''./static/build/css''))
             .pipe(refresh());
});

En el entorno de producción, use gulp-rev para generar rev-manifest.json

gulp.task(''release-build'', [''release-stylus'', ''release-js'', ''release-img''], function() {
  return gulp.src([''./static/build/**/*.css'',
                   ''./static/build/**/*.js'',
                   ''./static/build/**/*.png'',
                   ''./static/build/**/*.gif'',
                   ''./static/build/**/*.jpg''],
                   {base: ''./static/build''})
             .pipe(gulp.dest(''./static/tmp''))
             .pipe(rev())
             .pipe(gulp.dest(''./static/tmp''))
             .pipe(rev.manifest())
             .pipe(gulp.dest(''./static''));
});

Luego use gulp-replace para reemplazar los refs en archivos estáticos con rev-manifest.json:

gulp.task(''css-js-replace'', [''img-replace''], function() {
  return gulp.src([''./static/tmp/**/*.css'', ''./static/tmp/**/*.js''])
             .pipe(replace(//{/{/{(/S*)/}/}/}/g, function(match, p1) {
               var manifest = require(''./static/rev-manifest.json'');
               return ''/static/dist/''+manifest[p1]
             }))
             .pipe(gulp.dest(''./static/dist''));
});

Answer 5

Podrías hacerlo con gulp-useref así.

var gulp = require(''gulp''),
    useref = require(''gulp-useref''),
    filter = require(''gulp-filter''),
    uglify = require(''gulp-uglify''),
    minifyCss = require(''gulp-minify-css''),
    rev = require(''gulp-rev'');

gulp.task(''html'', function () {
    var jsFilter = filter(''**/*.js'');
    var cssFilter = filter(''**/*.css'');

    return gulp.src(''app/*.html'')
        .pipe(useref.assets())
        .pipe(jsFilter)
        .pipe(uglify())
        .pipe(rev())
        .pipe(jsFilter.restore())
        .pipe(cssFilter)
        .pipe(minifyCss())
        .pipe(rev())
        .pipe(cssFilter.restore())
        .pipe(useref.restore())
        .pipe(useref())
        .pipe(gulp.dest(''dist''));
});

o incluso podrías hacerlo de esta manera:

gulp.task(''html'', function () {
    var jsFilter = filter(''**/*.js'');
    var cssFilter = filter(''**/*.css'');

    return gulp.src(''app/*.html'')
        .pipe(useref.assets())
        .pipe(rev())
        .pipe(jsFilter)
        .pipe(uglify())
        .pipe(jsFilter.restore())
        .pipe(cssFilter)
        .pipe(minifyCss())
        .pipe(cssFilter.restore())
        .pipe(useref.restore())
        .pipe(useref())
        .pipe(gulp.dest(''dist''));
});

El problema es actualizar las rutas de los activos en el html con las nuevas rutas del archivo rev. gulp-useref no hace eso.