poner para paginas lista estilos enlazar ejemplos codigos basicos concatenation minify gulp gulp-less

concatenation - para - lista de codigos css



¿Hay alguna forma de reescribir el HTML para usar CSS minimizado por gulp? (3)

¿Quieres reescribirlo durante una compilación? ¿Por qué no reemplazar todos los enlaces CSS con un solo enlace a all.min.css en su código fuente? De todos modos, puede usar el complemento gulp-replace para buscar y reemplazar una cadena en sus archivos durante una compilación. Aquí hay otro proyecto de muestra para ver:

Web Boilerplate de la aplicación - Plantilla de la aplicación web front-end HTML5 Boilerplate extendida con hojas de estilo LESS y sistema de compilación Gulp.js.

Estoy luchando con lo siguiente:

Mi gulpfile.js compila todo .less, lo minimiza y concatena todo CSS en ./dist/all.min.css

¿Hay alguna manera de reescribir el archivo HTML, eliminar todas las etiquetas de estilo y solo poner una etiqueta de estilo cargando el CSS modificado?

Ver también gulp-smoosher . Ejemplo:

index.html

<html> <head> <!-- smoosh --> <link rel=''stylesheet'' href=''styles.css''> <!-- endsmoosh --> </head>

estilos.css

body { background: red; }

Gulpfile.js

gulp.task(''default'', function () { gulp.src(''index.html'') .pipe(smoosher()) .pipe(gulp.dest(''dist'')); });

dist / index.html

<html> <head> <style>body { background: red; }</style> </head>

La mejor forma de manejar esto es usar uno de los inyectores HTML desde el principio. Estoy usando gulp-inject con cierto éxito hasta ahora.

Agrega gulp-inject a tu proyecto:

npm i --save-dev gulp-inject

Suponiendo que tiene un diseño de carpeta similar a esto:

  • construir/
  • src /
    • index.html
    • Menos/
      • main.less
    • js /
      • app.js

Su HTML debe incluir esto donde desee que se inserten los archivos CSS o JS, ya sea el encabezado de ambos, o diríjase al CSS y justo antes del cuerpo para sus archivos JS:

<!-- inject:css --> <!-- any *.css files among your sources will go here as: <link rel="stylesheet" href="FILE"> --> <!-- endinject --> <!-- inject:js --> <!-- any *.js files among your sources will go here as: <script src="FILE"></script> --> <!-- endinject -->

Entonces tu gulpfile se ve más o menos así:

gulp.task(''build-styles'', function() { // the return is important! return gulp.src(''src/less/main.less'') .pipe(less()) .pipe(gulp.dest(''build'')); }); gulp.task(''build-js'', function() { // the return is important if you want proper dependencies! return gulp.src(''src/js/**/*.js'') // lint, process, whatever .pipe(gulp.dest(''build'')); }); gulp.task(''build-html'', function() { // We src all files under build return gulp.src(''build/**/*.*'') // and inject them into the HTML .pipe(inject(''src/index.html'', { addRootSlash: false, // ensures proper relative paths ignorePath: ''/build/'' // ensures proper relative paths })) .pipe(gulp.dest(''build'')); }); gulp.task(''build'', [''build-styles'', ''build-js''], function(cb) { gulp.run(''build-html'', cb); }); gulp.task(''default'', [''build''], function() { gulp.watch(''src/**/*.less'', function() { gulp.run(''build-styles''); }); gulp.watch([''build/**/*.*'',''!build/index.html'', ''src/index.html''], function() { gulp.run(''build-html''); }); });

Esta es solo una idea aproximada, y puede hacer mucho más usando gulp-watch para construcciones incrementales, pero la clave aquí es que observemos el directorio de compilación para elegir cuándo reconstruir el archivo HTML, y mire el directorio src para todo lo demás .

NOTA:

Ya que esto está recibiendo un montón de upvotes, hay un par de otros complementos que hacen reemplazo de referencia al lado de gulp-inject . Es posible que desee verlos y ver si alguno de ellos es más adecuado para usted, especialmente si no está usando gulp-rev :

También hay dos bibliotecas de CDN que hacen algo similar, pero para los recursos de CDN