将 gulp concat 用于 css 我如何将 main.css 连接到我的所有其他 css答案

【问题标题】：Using gulp concat for css how do I concat main.css to all of my other css将 gulp concat 用于 css 我如何将 main.css 连接到我的所有其他 css
【发布时间】：2017-05-03 19:58:19
【问题描述】：

我有 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"/>

【问题讨论】：

目前还不清楚您要问什么。 ['assets/css/*.css'] 应该选择该目录中的所有 css 文件并对其进行操作。你到底想要两个css文件还是只有一个？你不喜欢文件名中的哈希吗？如果是这样，那是由 rev 插件完成的，所以你应该删除与之相关的行。或者你问的是完全不同的东西？
我想结合 main.css 和 first.css。并结合 main.css 和 last.css。并结合 main.css 和 middle.css。所以我总共有 3 个缩小的 css 文件。 first.min.css、last.min.css 和 middle.min.css。所以我不必使用<link rel="stylesheet" href="build/css/main-08c0322a8a.css" type="text/css"/>

标签： javascript css gulp gulp-concat

【解决方案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 文件并运行新的构建。

【讨论】：