Gulp-Change giving TypeError | React Application

Question

I'm following a pretty basic tutorial for react to get acquainted with how it functions. So forgive me if I've missed something obvious. Part of the beginning of the tutorial was setting up gulp to handle sass files. So I set up my gulp file, setup my dependencies and tried to save my scss file, unfortunately I got an TypeError error and spent about an hour or so trying to overcome it on my own, but couldn't find anything concrete.

I'm running into an issue with gulp-change. I've gone line by line and ensure that was the line causing the TypeError issue. 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']);

Error Given

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-change 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 file I'm working with

body{
    font-size: 10px;
}

Folder Structure for scss/css

• goal-app (root)
  • src
    • Assets
      • css
      • scss
        • default.scss

Answer 1

If I understood your code correctly then the run parameter of gulpChange method is same thing you pass to changed method in .pipe(changed(SCSS_DEST)) line. That makes the run variable to be string.

String is not a function but it has length property and that's why if (run.length > 1) { line doesn't throw error and is even calculated as true.

The used package is gulp-change not gulp-changed as might think. The documentation of gulp-change says that you must pass function as a parameter.