javascript - gulpfile 只编译最后一个文件
问题描述
我有使用 LESS 文件的网站。我gulpfile.js
的看起来像这样:
var gulp = require("gulp");
var fs = require("fs");
var less = require("gulp-less");
var watchLess = require('gulp-watch-less2');
var embedTemplates = require('gulp-angular-embed-templates');
var concat = require('gulp-concat');
var rename = require("gulp-rename");
var csso = require('gulp-csso');
var gutil = require('gulp-util');
var terser = require('gulp-terser');
var filesExist = require('files-exist');
function buildLess(arr, outputDir, outputName) {
return gulp.src(filesExist(arr))
.pipe(less().on('error', gutil.log))
.pipe(rename(outputName + '.css'))
.pipe(gulp.dest(outputDir))
.on('error', gutil.log);
}
gulp.task('homepage', [], function () {
return buildLess([
"./css/homepage/reset.less",
"./node_modules/components-font-awesome/css/font-awesome.min.css",
"./node_modules/bootstrap/dist/css/bootstrap.css",
"./css/bootstrap-callouts.less",
"./css/homepage/global.less",
"./css/fullpage-footer.less",
"./node_modules/fullpage.js/dist/jquery.fullpage.min.css",
"./css/Header.less",
"./node_modules/angular-material/angular-material.css", // Only this exists on output file.
], './wwwroot/css/', 'homepage');
});
gulp.task('default', [
'homepage'
], function () { });
因此,所有这些 css\less 文件都应转换为 path 上的一个大 css 文件wwwroot/css/homepage.css
。检查此文件后,我发现只有最后一个文件实际上在输出文件中。
几个有趣的点:
- 如果我更改列表中的最后一个文件,则文件的输出将相应更改。
- 所有文件都肯定存在(使用 验证
filesExist(lst)
)。 - 没有错误被打印到屏幕上。
我的 npm 版本:
"devDependencies": {
"gulp": "3.9.1",
"gulp-less": "3.5.0",
"gulp-watch-less": "^1.0.1",
"gulp-watch-less2": "^2.0.4",
"gulp-angular-embed-templates": "^2.3.0",
"gulp-concat": "2.6.1",
"gulp-rename": "1.4.0",
"gulp-csso": "3.0.1",
"gulp-terser": "1.1.7",
"files-exist": "1.1.0"
}
我做错了什么?
解决方案
呃......刚刚发现问题 - 忘记连接输出。
这是正确的代码:
function buildLess(arr, outputDir, outputName) {
return gulp.src(filesExist(arr))
.pipe(less().on('error', gutil.log))
.pipe(concat(outputName + '.css'))
.pipe(gulp.dest(outputDir))
.on('error', gutil.log)
.pipe(config.production ? csso() : gutil.noop())
.pipe(config.production ? rename(outputName + '.min.css') : gutil.noop())
.pipe(config.production ? gulp.dest(outputDir) : gutil.noop());
}
推荐阅读
- php - SQLi - 什么是最安全的?
- python - VSC 不导入已安装的 python 库
- drake - 关于德雷克当前逆运动学代码的问题
- react-admin - 根据列值隐藏Datagrid中的行
- mysql - MySql 用like 选择并根据找到的子字符串的数量给出权重
- jquery - Zurb Foundation 6:手风琴菜单打开时触发事件?
- reactjs - 导入后备组件时 React Suspense 不起作用
- mysql - MySQL 中按月发送的首次电子邮件计数
- python - Python 类型提示 - 可以将字符串分配给 List[int]?
- scala - Spark Submit 命令正在返回缺少的应用程序资源