CSS minify und benennen Sie mit schluck

Question

Ich habe eine Variable wie

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

Was ich schluck will für mich zu tun ist, um minify die Dateien und dann rename für mich.

Aber die Aufgaben derzeit geschrieben als (für eine Datei)

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

Wie neu zu schreiben, so dass es funktioniert mit meinem Variable files oben definiert?

Answer 1

Sie sollten in der Lage sein, alle Dateien, die Sie für Ihre Quelle benötigen, mit einem Glob auszuwählen, anstatt sie in einem Objekt zu definieren, was Ihre Aufgabe vereinfachen sollte. Wenn Sie möchten, dass die CSS-Dateien in separaten Dateien zusammengefasst werden, sollten Sie sie nicht zusätzlich konklamen.

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

Ich versuchte die früheren Antworten, aber ich bekam eine endlose Schleife, weil ich die Dateien nicht ignorierte, die bereits minimiert wurden.

Erster Einsatz dieser Code, die auf andere Antworten ähnelt:

//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)); 
}); 

Beachten Sie die '!css/build/*.min.css' im src (dh var cssMinifyLocation)

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

Sie verkleinerten Dateien sowohl in der Uhr zu ignorieren haben und die Aufgabe.

Answer 3

Dies ist, was ich

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

Dann

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

Endergebnis ist einzigartig Zeitstempel hinzugefügt

Beispiel in index.html

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