Gulp-更改给出 TypeError |反应应用程序

Question

我正在学习一个非常基础的 React 教程，以熟悉它的功能。如果我遗漏了一些明显的东西，请原谅我。本教程开头的部分内容是设置 gulp 来处理 sass 文件。所以我设置了我的 gulp 文件，设置了我的依赖项并尝试保存我的 scss 文件，不幸的是我得到了一个 TypeError 错误并且花了大约一个小时左右试图克服它我自己的，但找不到任何具体的东西。

我运行遇到了 gulp-更改的问题。我逐行查看并确保那是导致 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
    - 秒css
      - default.scss

Answer 1

如果我正确理解了你的代码，那么 gulpChange 方法的运行参数是一样的您在 .pipe(changed(SCSS_DEST)) 行中传递给 changed 方法。这使得运行变量成为 string.

String 不是函数，但它的长度为属性，这就是为什么 if (run.length > 1) { 行不会抛出错误，甚至计算为 true。

使用的包是gulp-change 并不是想的gulp-changed。 gulp-change 的文档说你必须将函数作为参数传递。

Gulp-更改给出 TypeError |反应应用程序

Gulp-Change giving TypeError | React Application

javascript

sass

reactjs

gulp

gulp-changed