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

我不知道有什么简单的解决办法。

不过，我不认为您需要使用一刀切的css，看起来https://www.npmjs.com/package/gulp-rename和https://www.npmjs.com/package/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/'));
});

实际上，你会考虑用狼吞虎咽的方法。它能够处理导入和压缩CSS文件(outputStyle: 'compressed')。