我想像处理 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文件,只想将它们连接到一个文件。
我的代码做错了什么?
最佳答案
vinyl-source-stream
用于生成 vinyl
file来自常规字符流的流。
例如,request()
返回一个字符流,因此您需要 source()
将其转换为 vinyl
流。
但是 gulp.src()
已经返回 vinyl
文件流,因此 source()
在这里毫无用处。您可能想改用 concat()
(正如您在 merge_scripts
任务中所做的那样)。
所以这两行:
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'));
但不确定如何获得任何输出,因为如果输入不是字符流,vinyl-source-stream
会引发异常。
关于javascript - 如何使用 Gulp 连接 CSS 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42507587/