css - clean - rename a file gulp

CSS minify y renombrar con gulp

Question

Tengo una variable como

var files = {
''foo.css'': ''foo.min.css'',
''bar.css'': ''bar.min.css'',
};

Lo que quiero que el truco haga por mí es minify los archivos y luego rename .

Pero las tareas se escriben actualmente como (para un archivo)

gulp.task(''minify'', function () {
gulp.src(''foo.css'')
.pipe(minify({keepBreaks: true}))
.pipe(concat(''foo.min.css''))
.pipe(gulp.dest(''./''))
});

¿Cómo reescribir para que funcione con mis files variables definidos anteriormente?

Answer 1

Debería poder seleccionar cualquier archivo que necesite para su src con un Glob en lugar de definirlos en un objeto, lo que debería simplificar su tarea. Además, si desea que los archivos css se reduzcan en archivos separados, no debería tener que concentrarlos.

var gulp = require(''gulp'');
var minify = require(''gulp-minify-css'');
var rename = require(''gulp-rename'');
gulp.task(''minify'', function () {
gulp.src(''./*.css'')
.pipe(minify({keepBreaks: true}))
.pipe(rename({
suffix: ''.min''
}))
.pipe(gulp.dest(''./''))
;
});
gulp.task(''default'', [''minify''], function() {
});

Answer 2

Esto es lo que he hecho.

var injectOptions = {
addSuffix: ''?v='' + new Date().getTime()
};

Entonces

return gulp.src(''*.html'')
.pipe(wiredep(options))
.pipe(inject(injectSrc, injectOptions))
.pipe(gulp.dest(''''));

El resultado final es una marca de tiempo única añadida

Ejemplo en index.html

 <script src="/public/js/app.js?v=1490309718489"></script>

Answer 3

Probé las respuestas anteriores, pero obtuve un bucle sin fin porque no estaba ignorando los archivos que ya estaban minimizados.

Primero use este código que es similar a otras respuestas:

//setup minify task
var cssMinifyLocation = [''css/build/*.css'', ''!css/build/*.min.css''];
gulp.task(''minify-css'', function() {
return gulp.src(cssMinifyLocation)
.pipe(minifyCss({compatibility: ''ie8'', keepBreaks:false}))
.pipe(rename({ suffix: ''.min'' }))
.pipe(gulp.dest(stylesDestination));
});

Observe el ''!css/build/*.min.css'' en el src (es decir, var cssMinifyLocation)

//Watch task
gulp.task(''default'',function() {
gulp.watch(stylesLocation,[''styles'']);
gulp.watch(cssMinifyLocation,[''minify-css'']);
});

Tienes que ignorar los archivos minificados tanto en el reloj como en la tarea.