使用gulp concat for css如何将main.css连接到我的所有其他css

Question

我有一个4 css文件。 main.css，first.css，last.css，middle.css。我正在使用gulp-clean-css来缩小所有这些文件。

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

这工作正常。它将每个css文件最小化，并保留原始名称放入build/css文件夹中。我的问题是，如何使用gulp-concat将main.css连接到其他3个css文件并保留原始文件名？在我开始使用gulp或缩小之前，我只需要输入@import“main.css”;在每个css页面的顶部。但现在我使用的两行代码是这样

<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

你的问题还是有点不清楚，也不清楚你已经尝试了什么（你甚至不包括完整的文件上方将更加清晰枚举当前使用的插件）以及原因。你问关于gulp-concat的问题，但是代码中没有任何东西引用该模块。如果我理解你的问题，然后有一些我所知道的两个选项：

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

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

的rev插件，你是利用上面的是将哈希键添加到目标css文件的那个。这是通常被认为是好事的缓存破坏措施。您可能会以不同的方式处理静态文件缓存，但可能不需要它。如果您确实想继续使用它，那么您可以添加一些构建步骤来更新包含这些引用的文件，以便每次更改其中一个文件时手动不必手动更新这些文件中的文件名css文件并运行一个新的版本。