Minimizza CSS e rinominarlo con gulp

ho una variabile comeMinimizza CSS e rinominarlo con gulp

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

Quello che voglio il sorso di fare per me è quello di minify i file e quindi rename per me.

Ma i compiti non è al momento scritto come (per un file)

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

come riscrivere in modo da farlo funzionare con la mia variabile files definito sopra?

fonte

2014-09-10 Howard

Vuoi dire che stai cercando di iterare il professionista perties del tuo oggetto 'file'? (PS: C'è una ragione per cui è un oggetto? Mi sarei aspettato che si trattasse di un array, basato sul suo nome ..?) – ne1410s

Solo un FYI 'gulp-minify-css' è stato [deprecato] (https://www.npmjs.com/package/gulp-minify-css) in favore di [gulp-clean-css] (https://github.com/scniro/gulp-clean-css) – scniro

Dovresti essere in grado di selezionare qualsiasi file necessario per il tuo src con un Glob piuttosto che definirli in un oggetto, che dovrebbe semplificare il tuo compito. Inoltre, se si desidera che i file css vengano ridotti in file separati, non è necessario concatenarli.

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() { 

});

fonte

2014-09-10 16:58:57 Doodlebot

Quando lo faccio, sta creando nuovi file con .min.min.css ogni volta che salgo. Perché lo sta facendo? – jaminroe

Su src, puoi sempre specificare i file da ignorare usando "!". Esempio (si desidera escludere tutti i file * .min.css nella cartella css e nella sottocartella: 'gulp.src (['css/**/*. Css', '! Css/**/*. min.css']) ' – intellion

ho cercato le risposte precedenti, ma ho avuto un loop senza fine perché non ero ignorando i file che sono stati già minimizzato.

prima volta l'uso di questo codice che è simile ad altre risposte:

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

Avviso il '!css/build/*.min.css' nel src (cioè var cssMinifyLocation)

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

Bisogna ignorare i file minified sia l'orologio e il compito.

fonte

2015-10-22 23:01:36 bbuie

Questo è ciò che ho fatto

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

Poi

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

risultato finale è timestamp unica aggiunto

Esempio in index.html

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

fonte

2017-03-23 22:59:39

Minimizza CSS e rinominarlo con gulp

risposta

Problemi correlati