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

Question

我有 4 个 css 文件。主.css，第一.css，最后.css，中间.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文件，并放入构建/css文件夹，保持原始名称。我的问题是，如何使用 gulp-concat 仅将主文件.css连接到其他 3 个 css 文件并保留原始文件名？在我开始使用gulp或缩小之前，我只会放一个@import"main.css";在每个 CSS 页面的顶部。但是现在我使用了 2 行这样的代码

<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 文件并运行新版本时手动更新这些文件中的文件名。