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'）。

Gulp.js和变量文件名

1 个答案: