CODEWITHSUNDEEP
cssgulp
kingkool68
kingkool68

Reputation: 284

Gulp.js and Variable File Names

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

Upvotes: 1

Views: 1073

Answers (1)

vaultah
vaultah

Reputation: 46603

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').

Upvotes: 1

Related Questions