Using gulp concat for css how do I concat main.css to all of my other css

Question

I have a 4 css files. A main.css, first.css, last.css, middle.css. I am using gulp-clean-css to minify all of these files like this.

gulp.task('pack-css', ['clean-css'], function () {
    return gulp.src(['assets/css/*.css'])
        .pipe(cleanCss())
        .pipe(rev())
        .pipe(gulp.dest('build/css'))
        .pipe(rev.manifest('build/rev-manifest.json', {
            merge: true
        }))
        .pipe(gulp.dest(''));
});

This works fine. It minimizes each css file and puts into the build/css folder keeping the original name. My question is, how do I use gulp-concat to only concat the main.css to the other 3 css files and keep the original file name? Before I started using gulp, or minifying, I would just put a @import "main.css"; at the top of each css page. But now I am using 2 lines of code like this

<link rel="stylesheet" href="build/css/main-08c0322a8a.css" type="text/css"/>
    <link rel="stylesheet" href="build/css/first-498ed67d44.css" type="text/css"/>

It is very unclear what you are trying to ask. ['assets/css/*.css'] should select all css files in that directory and operate on them. Do you want two css files in the end or only one? Do you not like the hash in the file name? If so, that is being done by the rev plugin, so you should remove the lines that are related to that. Or are you asking something completely different? — peinearydevelopment
– peinearydevelopment, Commented May 3, 2017 at 20:35
I want combine main.css and first.css. and combine main.css and last.css. and combine main.css and middle.css. so i have a total of 3 minified css files. first.min.css, last.min.css and middle.min.css. so i don't have to use <link rel="stylesheet" href="build/css/main-08c0322a8a.css" type="text/css"/> — moe
– moe, Commented May 3, 2017 at 22:10

peinearydevelopment · Accepted Answer · 2017-05-04 12:57:44Z

Your question is still a little unclear and it isn't clear what you have tried(you didn't even include the full file above which would more clearly enumerate the plugins you are currently using) and why. You ask the question regarding gulp-concat, but there is nothing in your code referencing that module. If I'm understanding your question, then there are two options that I'm aware of:

OPTION 1:

var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');

gulp.task('minify-css', ['minify-first', 'minify-second', 'minify-third']);

gulp.task('minify-first', function() {
  return gulp.src(['./assets/css/main.css', './assets/css/first.css'])
    .pipe(cleanCSS())
    .pipe(concat('first.min.css'))
    .pipe(gulp.dest('./build/css/'));
});

gulp.task('minify-second', function() {
  return gulp.src(['./assets/css/main.css', './assets/css/second.css'])
    .pipe(cleanCSS())
    .pipe(concat('second.min.css'))
    .pipe(gulp.dest('./build/css/'));
});

gulp.task('minify-third', function() {
  return gulp.src(['./assets/css/main.css', './assets/css/third.css'])
    .pipe(cleanCSS())
    .pipe(concat('third.min.css'))
    .pipe(gulp.dest('./build/css/'));
});

OPTION 2:

gulp.task('minify-css', ['minify-first', 'minify-second', 'minify-third']);
gulp.task('minify-first', minifyCss('first'));
gulp.task('minify-second', minifyCss('second'));
gulp.task('minify-third', minifyCss('third'));
function minifyCss(srcFileName) {
    return function () {
        return gulp.src(['./assets/css/main.css', `./assets/css/${srcFileName}.css`])
                .pipe(cleanCSS())
                .pipe(concat(`${srcFileName}.min.css`))
                .pipe(gulp.dest('./build/css/'));
    };
}

The rev plugin that you are utilizing above is the one that is adding the hash key to the destination css file. This is done as a cache-busting measure which is generally regarded as a good thing. You might be dealing with static file caching in a different manner though and might not need it. If you do want to continue using it, there are definitely build steps you could add to update the files containing those references so that you wouldn't manually have to update the file names in those files every time you make a change to one of your css files and run a new build.

Collectives™ on Stack Overflow

Using gulp concat for css how do I concat main.css to all of my other css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related