使用gulp concat for CSS如何将main.css连接到我的所有其他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"/>

Answer 1

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.