Javascript 如何将CSS文件与Gulp连接起来？

我想像处理JS文件一样处理css文件，但我似乎错过了一些关于这个过程的东西

我的代码及其结果：

常量/依赖项：

const config = require('./src/config');
const isProduction = config.isProduction;
const gulp = require('gulp')
    , concat = require('gulp-concat')
    , minify = require('gulp-minify')
    , uglify = require('gulp-uglify')
    , concatCss = require('gulp-concat-css')
    , buffer = require('gulp-buffer')
    , rename = require('gulp-rename')
    , request = require('request')
    , source = require('vinyl-source-stream')
    , merge = require('merge2')
const index_dest = './public_html/';
const main_app_script = './dist/main.min.js';
const header_styles = './dist/head_styles.min.css';

当我尝试此方法时，它适用于JS文件：

gulp.task('merge_scripts', () => {
    if (isProduction) {
        const libraries = gulp.src([...underscore, ...angular, ...indexPageFiles]).pipe(concat('app_user_controllers.js', {newLine: '\r\n'}));
        const loki = request('https://cdnjs.cloudflare.com/ajax/libs/lokijs/1.3.16/lokijs.min.js').pipe(source('./public_html/dist/loki.js'));
        const app_user_controllers = gulp.src([...misc, ...appConfigFiles]).pipe(concat('libraries.js', {newLine: '\r\n'}));
        return merge(libraries, loki, app_user_controllers)
            .pipe(buffer())
            .pipe(concat('temp', {newLine: '\r\n'}))
            .pipe(minify())
            .pipe(uglify())
            .pipe(rename(main_app_script))
            .pipe(gulp.dest(index_dest));
    }
});

结果：我得到了一个正确的main.min.js，其中包含了我需要的所有js

当我尝试对CSS文件执行类似操作时，它不起作用：

gulp.task('merge_head_styles', () => {
    if (isProduction) {
        const head_before_fonts = gulp.src(basic.map(css => { return css.path })).pipe(source('temp1.css'));
        const fonts = request('https://fonts.googleapis.com/css?family=Source+Sans+Pro').pipe(source('temp2.css'));
        const head_after_fonts = gulp.src([...beyond, ...custom].map(css => { return css.path })).pipe(source('temp3.css'));
        return merge(head_before_fonts, fonts, head_after_fonts)
            .pipe(buffer())
            .pipe(concatCss('temp_head_styles'))
            .pipe(rename(header_styles))
            .pipe(gulp.dest(index_dest));
    }
});

结果：我得到一个head_styles.min.css文件，该文件仅包含字体链接中css的一部分：

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url("https://fonts.gstatic.com/s/sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlNzbP97U9sKh0jjxbPbfOKg.ttf") format('truetype');
}

而不是将所有css连接起来

现在我不想缩小/丑化我的css文件，只想把它们压缩成一个文件

我在代码中做错了什么？

用于从常规字符流生成流

例如，

request（）

返回一个字符流，因此需要

source（）

将其转换为

venyly

流

但是

gulp.src（）

已经返回了一个

乙烯基文件流，因此
source（）
在这里是无用的。您可能想改用
concat（）
（就像您在
merge\u脚本中所做的那样）

所以这两条线：

 const head_before_fonts = gulp.src(basic.map(css => { return css.path })).pipe(source('temp1.css'));
 const head_after_fonts = gulp.src([...beyond, ...custom].map(css => { return css.path })).pipe(source('temp3.css'));

应该是这样的：

 const head_before_fonts = gulp.src(basic.map(css => { return css.path })).pipe(concat('temp1.css'));
 const head_after_fonts = gulp.src([...beyond, ...custom].map(css => { return css.path })).pipe(concat('temp3.css'));

但不确定您是如何获得任何输出的，因为如果输入不是字符流，
乙烯基源流
会引发异常。
用于从常规字符流生成流

例如，
request（）
返回一个字符流，因此需要
source（）
将其转换为
venyly
流

但是
gulp.src（）
已经返回了一个
乙烯基文件流，因此
source（）
在这里是无用的。您可能想改用
concat（）
（就像您在
merge\u脚本中所做的那样）

所以这两条线：

 const head_before_fonts = gulp.src(basic.map(css => { return css.path })).pipe(source('temp1.css'));
 const head_after_fonts = gulp.src([...beyond, ...custom].map(css => { return css.path })).pipe(source('temp3.css'));

应该是这样的：

 const head_before_fonts = gulp.src(basic.map(css => { return css.path })).pipe(concat('temp1.css'));
 const head_after_fonts = gulp.src([...beyond, ...custom].map(css => { return css.path })).pipe(concat('temp3.css'));

但不确定您是如何获得任何输出的，因为
乙烯基源代码流
会在输入不是字符流时引发异常。
谢谢，我已经做了更改，仍然得到了结果。我还应该在代码中查找什么？不知道。如果您需要帮助，您必须创建一个.Minimal–它尽可能地小，除此之外我没有太多的代码。完成–我需要提供哪些其他信息/代码才能完成？创建一个新文件夹。在这个文件夹中，只添加你问题中的内容，不要添加其他内容。你能执行代码并重现问题吗？如果不是的话，你的问题仍然缺少内容。谢谢，我已经做出了改变，我仍然得到了结果。我还应该在代码中查找什么？不知道。如果您需要帮助，您必须创建一个.Minimal–它尽可能地小，除此之外我没有太多的代码。完成–我需要提供哪些其他信息/代码才能完成？创建一个新文件夹。在这个文件夹中，只添加你问题中的内容，不要添加其他内容。你能执行代码并重现问题吗？如果不是的话，你的问题仍然是缺少的东西。