对 css 使用 gulp concat 我如何将 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 页的顶部。但是现在我正在使用这样的 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 个文件和运行个新版本。

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

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

javascript

css

gulp

gulp-concat