当前位置: 代码迷 >> JavaScript >> Gulp错误-TypeError:无法调用未定义的方法“ match”
  详细解决方案

Gulp错误-TypeError:无法调用未定义的方法“ match”

热度:55   发布时间:2023-06-05 09:43:06.0

我正在尝试将Gulp与BrowserSync一起用于在MAMP上运行的网站-通过localhost:8888代理。

但是,运行gulp时,出现以下错误:

[17:38:48] Starting 'browser-sync'...
[17:38:48] 'browser-sync' errored after 14 ms
[17:38:48] TypeError: Cannot call method 'match' of undefined
    at Object.opts.callbacks.proxy (/Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/lib/cli/cli-options.js:123:21)
    at /Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/lib/cli/cli-options.js:276:54
    at /Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:1165:46
    at /Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:1915:16
    at ValueNode.iterate (/Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:2282:12)
    at BitmapIndexedNode.iterate.HashArrayMapNode.iterate (/Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:2275:24)
    at HashArrayMapNode.BitmapIndexedNode.iterate.HashArrayMapNode.iterate (/Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:2275:24)
    at src_Map__Map.__iterate (/Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:1913:32)
    at KeyedIterable.mappedSequence.__iterateUncached (/Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:1164:23)
    at seqIterate (/Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:593:16)
    at KeyedIterable.Seq.__iterate (/Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:261:14)
    at KeyedIterable.mixin.forEach (/Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:4327:19)
    at /Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:1771:16
    at src_Map__Map.withMutations (/Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:1891:7)
    at new src_Map__Map (/Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:1768:20)
    at reify (/Applications/MAMP/htdocs/garcialau/wp-content/themes/garcialau/node_modules/browser-sync/node_modules/immutable/dist/immutable.js:1704:37)
michaels-mbp:garcialau ParanoidAndroid$

我的Gulpfile.js

(function() {

    'use strict';

    var gulp = require('gulp'),
        plumber = require('gulp-plumber'),
        rename = require('gulp-rename'),
        autoprefixer = require('gulp-autoprefixer'),
        babel = require('gulp-babel'),
        concat = require('gulp-concat'),
        jshint = require('gulp-jshint'),
        uglify = require('gulp-uglify'),
        imagemin = require('gulp-imagemin'),
        cache = require('gulp-cache'),
        sass = require('gulp-sass'),
        browserSync = require('browser-sync').create();
        //neat = require('node-neat').includePaths;

    gulp.task('browser-sync', function() {
        browserSync.init({
            proxy: {
                host: 'localhost',
                port: 8888
            }
        });
    });

    gulp.task('bs-reload', function () {
        browserSync.reload();
    });

    gulp.task('images', function(){
        gulp.src('src/images/**/*')
        .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
        .pipe(gulp.dest('dist/images/'));
    });

    gulp.task('styles', function(){
        gulp.src(['src/css/**/*.scss'])
        .pipe(plumber({
            errorHandler: function (error) {
                console.log(error.message);
                this.emit('end');
        }}))
        .pipe(sass())
        .pipe(autoprefixer('last 2 versions'))
        .pipe(gulp.dest('dist/css/'))
        .pipe(browserSync.reload({stream:true}));
    });

    gulp.task('scripts', function(){
        return gulp.src('src/js/**/*.js')
        .pipe(plumber({
            errorHandler: function (error) {
            console.log(error.message);
            this.emit('end');
        }}))
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(concat('main.js'))
        .pipe(babel())
        .pipe(gulp.dest('dist/js/'))
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js/'))
        .pipe(browserSync.reload({stream:true}));
    });

    gulp.task('default', ['browser-sync'], function(){
        gulp.watch('src/css/**/*.scss', ['styles']);
        gulp.watch('src/js/**/*.js', ['scripts']);
        gulp.watch('*.html', ['bs-reload']);
    });

})();

我的Package.json

{
    "name": "Quench",
    "version": "1.0.0",
    "description": "A Gulp file and project generator.",
    "main": "gulpfile.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "Quench",
    "license": "ISC",
    "devDependencies": {
        "browser-sync": "2.6.5",
        "gulp-autoprefixer": "2.1.0",
        "gulp-babel": "5.1.0",
        "gulp-cache": "0.2.8",
        "gulp-concat": "2.5.2",
        "gulp-jshint": "1.10.0",
        "gulp-imagemin": "2.2.1",
        "gulp-plumber": "1.0.0",
        "gulp-rename": "1.2.2",
        "gulp-sass": "1.3.3",
        "gulp-uglify": "1.2.0",
        "gulp": "~3.9.0",
        "node-neat": "~1.7.2"
    }
}

任何帮助将不胜感激! 我对npm,Grunt和BrowserSync不太熟悉。

谢谢!

建议,浏览器同步在您的代理配置对象中需要target属性。

建议您应指定target属性,而不是单独的hostport属性,因此...

proxy: {
    target: "localhost:8888",
}

...或者实际上只是:

proxy: "localhost:8888"
  相关解决方案