Gulp.js and Variable File Names

Question

I've got a directory called css. In it are CSS files that contian nothing but @import statements to other CSS chunks. I want to munge the @import statements into one file and add .min.css to the file name.

Before:

css
-- foo.css
-- bar.css

After:

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

I'm using gulp-concat-css but it requires a string argument for the relative path of the generated file containing the concatenated css. What I want to do is pass in a variable with the filename of the current file being processed by gulp.src('css/*.css')

Here is my complete gulp.js file...

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/') );
});

vaultah · Accepted Answer · 2016-03-07 16:21:07Z

1

I'm not aware of any simple solutions to this.

However, I don't think you need to use gulp-concat-css, looks like a combination of gulp-rename and gulp-cssimport will be enough:

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/'));
});

Actually, you'd consider using gulp-sass. It's capable of processing imports and compressing CSS files (outputStyle: 'compressed').

edited Mar 7, 2016 at 16:21

answered Mar 7, 2016 at 15:38

vaultah

46.9k12 gold badges120 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kingkool68 Over a year ago

The only problem is gulp-concat-css will rebase relative URLs like background-image:url(image.jpg); I was using gulp-rename and gulp-cssimport before.

Collectives™ on Stack Overflow

Gulp.js and Variable File Names

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related