CSS уменьшает и переименовывает с помощью gulp

У меня есть переменная типа

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

Что я хочу сделать gulp для меня, это minify файлы, а затем rename для меня.

Но задачи в настоящее время записываются как (для одного файла)

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

Как переписать, чтобы он работал с моей переменной files, определенной выше?

Ответы

Ответ 1

Вы должны иметь возможность выбирать любые файлы, необходимые для вашего src, с помощью Glob, а не определять их в объекте, что должно упростить вашу задачу. Кроме того, если вы хотите, чтобы css файлы были минитизированы в отдельные файлы, вам не нужно их конкатенировать.

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

});

Ответ 2

Я попробовал более ранние ответы, но у меня получился бесконечный цикл, потому что я не игнорировал файлы, которые уже были оценены.

Сначала используйте этот код, похожий на другие ответы:

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

Обратите внимание на '!css/build/*.min.css' в src (то есть var cssMinifyLocation)

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

Вы должны игнорировать миниатюрные файлы как в часах, так и в задаче.

Ответ 3

Это то, что я сделал

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

Тогда

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

Конечный результат: добавлена уникальная отметка времени

Пример в index.html

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