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或minifying之前，我只想放一个@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文件并运行新版本。

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

1 个答案: