CSS縮小並用gulp重命名

Question

我有一個像變量

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 ？

Answer 1

您應該能夠使用Glob選擇src所需的任何文件，而不是在對象中定義它們，這樣可以簡化您的任務。 此外，如果您希望將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() {

});

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

注意src中的'!css/build/*.min.css' （即var cssMinifyLocation）

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

您必須忽略手表和任務中的縮小文件。

Answer 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>