CSS 使用 gulp 缩小和重命名答案

【问题标题】：CSS minify and rename with gulpCSS 使用 gulp 缩小和重命名
【发布时间】：2014-09-10 11:49:35
【问题描述】：

我有一个类似的变量

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 一起使用？

【问题讨论】：

您的意思是要迭代“文件”对象的属性吗？（PS：它是一个对象有什么原因吗？我可能已经预料到这是一个数组，基于它的名字..？）
仅供参考 gulp-minify-css 一直是 deprecated 支持 gulp-clean-css

标签： css gulp gulp-watch

【解决方案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() {

});

【讨论】：

当我这样做时，每次保存时都会使用 .min.min.css 创建新文件。为什么要这样做？
在 src 上，您始终可以使用“！”指定要忽略的文件。示例（您要排除 css 文件夹和子文件夹中的所有 *.min.css 文件：gulp.src(['css/**/*.css', '!css/**/*.min.css'])

【解决方案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']);
});

您必须忽略手表和任务中的缩小文件。

【讨论】：

【解决方案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>

【讨论】：