CSS 使用 gulp 缩小和重命名

问题描述

我有一个类似的变量

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

我希望 gulp 为我做的是 minify 文件，然后为我 rename.

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

但任务当前写为(针对一个文件)

But the tasks is currently written as (for one file)

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

如何重写以使其与上面定义的变量 files 一起使用?

How to rewrite so it work with my variable files defined above?

推荐答案

您应该能够使用 Glob 为您的 src 选择所需的任何文件，而不是在对象中定义它们，这应该会简化您的任务.此外，如果您希望将 css 文件缩小为单独的文件，则无需将它们连接起来.

You should be able to select any files you need for your src with a Glob rather than defining them in an object, which should simplify your task. Also, if you want the css files minified into separate files you shouldn't need to concat them.

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

});

这篇关于CSS 使用 gulp 缩小和重命名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！