Gulp.js 和变量文件名

Question

我有一个名为css 的目录。其中的 CSS 文件只包含 @import 语句到其他 CSS 块。我想将@import 语句合并到一个文件中，并将.min.css 添加到文件名中。

之前：

css
-- foo.css
-- bar.css

之后：

css
-- foo.css
-- foo.min.css
-- bar.css
-- bar.min.css

我正在使用gulp-concat-css，但它需要一个字符串参数作为包含连接css的生成文件的相对路径。我想要做的是传入一个变量，其中包含gulp.src('css/*.css')正在处理的当前文件的文件名

这是我完整的gulp.js 文件...

var gulp = require('gulp');
var del = require('del');
var concatCSS = require('gulp-concat-css');
var cssnano = require('gulp-cssnano');

gulp.task('clean:min-css', function () {
    // Delete all *.min.css files in the CSS directory so we don't get duplicates
    return del([
        'css/*.min.css'
    ]);
});

gulp.task('default', ['clean:min-css'], function() {
    gulp.src('css/*.css')
        // Munge contents of @import statements into one file
        .pipe( concatCSS( currentFileName + '.min.css' ) )

        // minify CSS
        .pipe( cssnano() )

        // Save out the new file
        .pipe( gulp.dest('css/') );
});

Answer 1

我不知道有任何简单的解决方案。

但是，我认为您不需要使用 gulp-concat-css，看起来 gulp-rename 和 gulp-cssimport 的组合就足够了：

var rename = require('gulp-rename'),
    cssimport = require('gulp-cssimport');
// ...
gulp.task('default', ['clean:min-css'], function() {
    return gulp.src('css/*.css')
           .pipe(cssimport({})) // process imports
           .pipe(cssnano()) // minify CSS
           .pipe(rename({ extname: '.min.css' })) // change extension
           .pipe(gulp.dest('css/'));
});

实际上，您会考虑使用 gulp-sass。它能够处理导入和压缩 CSS 文件 (outputStyle: 'compressed')。