使用gulp进行CSS文件压缩和重命名

Question

我有一个变量，像这样

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

我希望gulp可以帮我完成文件的压缩和重命名。

但目前为止，这个任务只为一个文件编写：

What I want the gulp to do for me is to minify the files and then rename for me.

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

如何重写代码以使其与我上面定义的变量files一起工作？

- Howard

---

你的意思是要迭代你的“files”对象的属性吗？（另外，它为什么是一个对象呢？根据它的名称，我原本以为它应该是一个数组..？） - ne1410s

只是提醒一下，gulp-minify-css已经被弃用，建议使用gulp-clean-css。 - scniro

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

});

- Doodlebot

---

当我这样做时，每次保存它都会创建带有“.min.min.css”扩展名的新文件。为什么会这样？ - Megaroeny

在 "src" 中，您可以始终使用 "!" 来指定要忽略的文件。例如（您希望在 css 文件夹及其子文件夹中排除所有 *.min.css 文件）：gulp.src(['css/**/*.css', '!css/**/*.min.css']) - intellion

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']);
});

在观察和任务中都需要忽略已压缩的文件。

- bbuie

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>

- Tom Stickel