Css Gulp.js和变量文件名

我有一个名为

css

的目录。其中包含CSS文件，除了将

@import

语句导入到其他CSS块之外，没有其他内容。我想将

@import

语句合并到一个文件中，并将

.min.css

添加到文件名中

之前：

css
-- foo.css
-- bar.css

之后：

css
-- foo.css
-- foo.min.css
-- bar.css
-- bar.min.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/') );
});

---

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

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

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”

）。

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

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

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”

）。

唯一的问题是

gulp concat CSS

将重新设置相对url的基础，如背景图像：url（image.jpg）；我以前使用过

gulp-rename

和

gulp-cssimport

。唯一的问题是

gulp-concat-css

会重新设置相对url的基础，比如背景图片：url（image.jpg）；我以前使用过

gulp rename

和

gulp cssimport

。