javascript - Gulp-Change 给 TypeError | 反应应用
问题描述
我正在关注一个非常基本的教程,以了解它的功能。所以,如果我错过了一些明显的东西,请原谅我。本教程开头的部分内容是设置 gulp 来处理 sass 文件。所以我设置了我的 gulp 文件,设置了我的依赖项并尝试保存我的 scss 文件,不幸的是我遇到了一个TypeError
错误并花了大约一个小时左右试图自己克服它,但找不到任何具体的东西。
我遇到了 gulp-change 的问题。我已经逐行检查并确保这是导致TypeError
问题的行。
gulpfile.js
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var changed = require('gulp-change');
/////////////////
// - SCSS / CSS
/////////////////
var SCSS_SRC = './src/Assets/scss/**/*.scss';
var SCSS_DEST = './src/Assets/css';
gulp.task('compile_scss', function(){
gulp.src(SCSS_SRC)
.pipe(sass().on('error', sass.logError))
.pipe(minifyCSS())
.pipe(rename({ suffix: '.min' }))
////////////line creating the error//////////////
.pipe(changed(SCSS_DEST))
.pipe(gulp.dest(SCSS_DEST));
});
//detect changes in SCSS
gulp.task('watch_scss', function(){
gulp.watch(SCSS_SRC, ['compile_scss']);
});
//run tasks
gulp.task('default', ['watch_scss']);
给定错误
internal/streams/legacy.js:59
throw er; // Unhandled stream error in pipe.
TypeError: run.call is not a function
at R:\Documents\Projects\React Goal App\goal-app\node_modules\gulp-change\index.js:31:14
at wrappedMapper (R:\Documents\Projects\React Goal App\goal-app\node_modules\map-stream\index.js:84:19)
at Stream.stream.write (R:\Documents\Projects\React Goal App\goal-app\node_modules\map-stream\index.js:96:21)
at Transform.ondata (_stream_readable.js:639:20)
at emitOne (events.js:116:13)
at Transform.emit (events.js:211:7)
at addChunk (_stream_readable.js:263:12)
at readableAddChunk (_stream_readable.js:250:11)
at Transform.Readable.push (_stream_readable.js:208:10)
at Transform.push (_stream_transform.js:147:32)
gulp 更改 index.js
var eventStream = require('event-stream');
module.exports = gulpChange;
function gulpChange(run) {
return eventStream.map(function(file, done) {
if (file.isNull()) {
return done(null, file);
}
if (file.isStream()) {
return done(new PluginError('gulp-change', 'Streaming not supported.'));
}
var content = file.contents.toString();
var ctx = {
file: file,
fname: file.history[file.history.length - 1].substr(file.base.length),
originalContent: content
};
function next(err, content) {
if (err) {
return done(err);
}
if (content) {
file.contents = new Buffer(content);
}
done(null, file);
}
if (run.length > 1) {
////////////////line 31 where run is indicated as not a function/////////////
run.call(ctx, content, next);
} else {
next(null, run.call(ctx, content))
}
});
}
我正在使用的 default.scss 文件
body{
font-size: 10px;
}
scss/css 的文件夹结构
- 目标应用程序(根)
- 源代码
- 资产
- css
- scss
- 默认.scss
- 资产
- 源代码
解决方案
如果我正确理解了您的代码,则gulpChange方法的运行参数与您传递给更改方法的内容相同。这使得run变量为string。.pipe(changed(SCSS_DEST))
String 不是一个函数,但它具有 length 属性,这就是为什么if (run.length > 1) {
line 不会抛出错误,甚至被计算为true。
使用的包是 gulp-change 而不是 gulp-changed 可能想象的那样。gulp-change 的文档说您必须将函数作为参数传递。
推荐阅读
- python - 如果我在 Python 中打破 r.iter_lines() 的循环,stream=True 会让我成为一个缓慢的懒猴攻击者吗?
- python - 如何使用 while + for 循环计算 Big O
- python - 在python中指定文件的路径
- php - 基于 WooCommerce 中的用户角色或自定义数据的额外购物车费用
- reactjs - 在服务器上构建 create-react-app 时防止停机
- python - 如何计算文本中词频的最佳 zipf 分布
- pandas - Pandas:如果不是 NaN 则打印(列)
- formatting - Freemarker 格式 BigDecimal 到德语区域设置无法正常工作
- haskell - 堆栈“计划构建失败。”
- python - 使用 python 生成示例(鸢尾花)数据集