web-dev-qa-db-fra.com

CSS minify et renommer avec gulp

J'ai une variable comme

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

Ce que je veux que le gouffre fasse pour moi, c'est minify les fichiers et ensuite rename pour moi.

Mais les tâches sont actuellement écrites comme (pour un fichier)

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

Comment réécrire pour que cela fonctionne avec ma variable files définie ci-dessus?

cssgulpgulp-watch
28
Howard

Vous devriez pouvoir sélectionner les fichiers dont vous avez besoin pour votre src avec un Glob plutôt que de les définir dans un objet, ce qui devrait simplifier votre tâche. De plus, si vous voulez que les fichiers CSS soient réduits en fichiers séparés, vous ne devriez pas avoir besoin de les concatater.

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

});
54
Doodlebot

J'ai essayé les réponses précédentes, mais j'ai eu une boucle sans fin parce que je n'ignorais pas les fichiers déjà minifiés. 

Commencez par utiliser ce code qui ressemble à d’autres réponses:

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

Notez le '!css/build/*.min.css' dans le src (c'est-à-dire var cssMinifyLocation)

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

Vous devez ignorer les fichiers minifiés à la fois dans la surveillance et dans la tâche. 

14
bbuie

C'est ce que j'ai fait

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

Ensuite

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

le résultat final est un horodatage unique ajouté

Exemple dans index.html 

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