sass - sourcemaps - Gulp-Manejo de múltiples temas y carpetas
node-sass (3)
Estoy tratando de crear un gulpfile final que podamos usar en uno de nuestros grandes sitios (uno con múltiples temas dependiendo de la sección del sitio en la que se encuentre). Intento que solo ejecute el proceso que necesita ejecutar y no recompila todo.
Permítanme diseñar exactamente lo que intento lograr:
Estructura de carpetas
src/
master-theme/
css/
style.scss
partials/
_a.scss
_b.scss
img/
a.jpg
b.jpg
sub-theme/
css/
style.scss
partials/
_c.scss
_d.scss
img/
c.png
d.jpg
Quiero que estos archivos sean comprimidos / compilados y terminen en la carpeta de destino con la misma estructura de carpetas (simplemente reemplace src con dest en su mente)
El problema
Por el momento, puedo hacer que haga lo que quiero, pero el archivo gulp compila y comprime todo . Por ejemplo, si agrego una imagen al sub-theme/img , ejecutará la compresión de la imagen para todos los "temas". Estoy usando gulp-changed pero todavía significa que está mirando todas las imágenes a través del sitio.
Lo mismo _c.scss con el sass, si actualizo _c.scss , pero el master css y el subtema css se compilan, lo que obviamente no es deseable.
Solución actual
Realmente no tengo uno en este momento. En este momento estoy usando gulp-file-tree para generar un archivo json de la estructura de carpetas, luego cada vez que se cambia un archivo, pasando por eso con una función (que sé que es horrible, pero una solución que funciona actualmente)
var tree = require(''./build/tree.json'');
var children = tree.children;
for (var i = children.length - 1; i >= 0; i--) {
var child = children[i];
if(child.isDirectory)
task(child)
}
There task() es un gulp tareas pasadas (por ejemplo, compilación Sass)
La estructura de la carpeta no está disponible para discusión. No quiero que esto se convierta en una estructura de ''estructurar tus archivos de forma diferente''. Hay varios otros factores involucrados que no están relacionados con este tema en cuanto a por qué somos así (lo siento, tuve que decir que ...)
Estoy abierto a probar cualquier cosa, ya que he mirado este archivo durante días. Las tareas que intento ejecutar son:
- Compilación Sass
- Generación Sprite
- SVG sprite a PNG sprite
- Compresión de imagen
- Compresión de Javascript
Gracias de antemano por tu ayuda. Si se encuentra una solución, escribiré una publicación adecuada sobre ella para que los demás no sientan mi dolor ...
Usaría el siguiente complemento para administrar un caché para sus archivos procesados. Luego usará el caché y determinará qué se debe cambiar y qué se ha procesado antes de esto.
https://github.com/wearefractal/gulp-cached
HTH
Puede crear una función con parámetros que compila solo el archivo modificado, luego puede llamar a otro que combine el resultado. Por ejemplo, genera a.css y b.css y cuando se actualiza a.scss, solo se debe actualizar a.css. Después de cada llamada, active una función de combinación que combina ayb. Google también ve cómo obtiene la ruta del archivo modificado. No recuerdo qué complemento utilicé
Estoy haciendo más o menos lo mismo, y creo que lo he conseguido.
gulpfile.js:
var gulp = require(''gulp''),
debug = require(''gulp-debug''),
merge = require(''merge-stream''),
sass = require(''gulp-sass''),
less = require(''gulp-less''),
changed = require(''gulp-changed''),
imagemin = require(''gulp-imagemin''),
prefix = require(''gulp-autoprefixer''),
minifyCSS = require(''gulp-minify-css''),
browserSync = require(''browser-sync''),
reload = browserSync.reload,
path = require(''path''),
glob = require(''glob'');
// Log errors to the console
function errorHandler(error) {
console.log(error.toString());
this.emit(''end'');
}
function processThemeFolder(src) {
function debugTheme(type) {
return debug({ title: ''theme '' + theme + '' '' + type});
}
var theme = path.basename(src);
var dest = ''public/themes/'' + theme;
return merge(
gulp
.src([src + ''/sass/**/*.scss''])
.pipe(changed(dest + ''/css'', { extension: ''.css'' }))
.pipe(debugTheme(''sass''))
.pipe(sass())
.pipe(minifyCSS())
.pipe(gulp.dest(dest + ''/css'')),
gulp
.src([src + ''/less/**/*.less''])
.pipe(changed(dest + ''/css'', { extension: ''.css'' }))
.pipe(debugTheme(''less''))
.pipe(less())
.pipe(minifyCSS())
.pipe(gulp.dest(dest + ''/css'')),
gulp
.src([src + ''/js/**/*.js''])
.pipe(changed(dest + ''/js''))
.pipe(debugTheme(''js''))
.pipe(uglify())
.pipe(gulp.dest(dest + ''/js'')),
gulp
.src([src + ''/img/**/*.{png,jpg,gif}''])
.pipe(changed(dest + ''/img''))
.pipe(debugTheme(''img''))
.pipe(imagemin())
.pipe(gulp.dest(dest + ''/img''))
).on(''change'', reload);
}
gulp.task(''themes'', function() {
var srcThemes = glob.sync(''resources/themes/*'');
return merge(srcThemes.map(processThemeFolder));
});
// ...
La clave aquí es usar gulp-changed para pasar solo los archivos modificados. El resto es crema en la parte superior.
Todos los flujos de compilación muestran una línea de depuración que detalla qué archivos van a entrar en la transmisión. En un cambio en la transmisión, el navegadorSync recibe una notificación para volver a cargar los navegadores, usando la transmisión (si es posible). La tarea de tema solo se completa una vez que se completan todas sus secuencias de compilación, y la tarea de temas generales solo se marcará como terminada cuando se hayan terminado todos los temas.
Los archivos fuente del tema se almacenan en resources / themes / themename y escribe su salida en public / themes / themename.
Esto está funcionando muy bien para mí, YMMV. :-)