1

Browser Sync で Gulp を実行していますが、Chrome で次のエラーが発生します。

NonESPMessageInterface --- nonEspMessageInterface.js:8

TypeError: null のプロパティ 'insertBefore' を読み取れません --- angular.js:13708

オリジン #{e.origin} からのチェックリスト メッセージが無効でした: MessageEventbubbles: falsecancelBubble: falsecancelable: falsecomposed: falsecurrentTarget: Windowdata: ObjectdefaultPrevented: falseeventPhase: 0isTrusted: truelastEventId: ""origin: " http://localhost:3000 "path: Array (1)ports: Array(0)returnValue: truesource: WindowsrcElement: Windowtarget: WindowtimeStamp: 4354.4type: "message" proto : MessageEvent --- nonEspMessageInterface.js:53

私の gulp.js ファイルは次のようになります。

//required
var gulp         = require('gulp'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync  = require('browser-sync'),
        stream       = browserSync.stream,
    cleanCSS     = require('gulp-clean-css'),
    concat       = require('gulp-concat'),
    cssnano      = require('gulp-cssnano'),
    del          = require('del'),
    imagemin     = require('gulp-imagemin'),
    ngAnnotate   = require('gulp-ng-annotate'),
    order        = require('gulp-order'),
    plumber      = require('gulp-plumber'),
    print        = require('gulp-print'),
    rename       = require('gulp-rename'),
    sass         = require('gulp-sass'),
    sourcemaps   = require('gulp-sourcemaps'),
    uglify       = require('gulp-uglify');

var devDir  = 'main/app/';
var distDir = 'main/dist';

var path = {
    scriptsApp:     devDir + 'scripts/*.js',
    scriptsModules: devDir + 'scripts/*/*.js',
    sassApp:        devDir + 'styles/scss/*.scss',
    sassPartials:   devDir + 'styles/scss/**/*.scss',
    sassToCss:      devDir + 'styles/css',
    css:            devDir + 'styles/css/*.css',
    index:          'main/templates/*.html',
    html:           devDir + 'templates/**/*.html',
    htmlPress:      devDir + 'templates/**/**/*.html'
};

// sass tasks
gulp.task('sass', function() {
  return gulp.src([path.sassApp, path.sassPartials])
    .pipe(sourcemaps.init())
    .pipe(plumber())
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest(path.sassToCss))
    .pipe(stream({once:true}));

    // call css tasks
    done();
});

// css tasks
gulp.task('minify-css', ['sass'], function() {
  return gulp.src([path.css])
    .pipe(sourcemaps.init())
    .pipe(plumber())
    .pipe(autoprefixer('last 2 versions'))
    .pipe(cleanCSS({ compatibility: 'ie8' }))
    .pipe(rename('style.min.css'))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(distDir))
    .pipe(stream({once:true}));
});

// scripts tasks
gulp.task('scripts', function() {
  return gulp.src([path.scriptsApp, path.scriptsModules])
    .pipe(sourcemaps.init())
    .pipe(plumber())
    .pipe(order(['app.js', devDir + 'scripts/services/*.js']))
    .pipe(ngAnnotate())
    .pipe(uglify({mangle: false}))
    .pipe(concat('all.js'))
    .pipe(rename({suffix:'.min'}))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(distDir))
    .pipe(stream({once:true}));
});

// html tasks
gulp.task('html', function() {
  return gulp.src([path.index, path.html, path.htmlPress])
    .pipe(stream({once:true}));
});

// image tasks - compress images
gulp.task('images', function() {
  gulp.src('main/app/assets/img/**/*')
    .pipe(imagemin())
    .pipe(gulp.dest('main/app/assets/img/compressed'));
});

// browser-sync task
gulp.task('browser-sync', function() {
  browserSync({
    proxy: "localhost:8088"
  });
});


// clean task
gulp.task('clean', function() {
    return del(['main/dist/*', '!main/dist/ext', '!main/dist/assets']);
});

// watch task
gulp.task('watch', function() {
  gulp.watch([path.scriptsApp, path.scriptsModules], ['scripts']);
  gulp.watch([path.sassApp, path.sassPartials], ['sass']);
  gulp.watch([path.css], ['minify-css']);
  gulp.watch([path.index, path.html], ['html']);
});

// default task
gulp.task('default', ['clean'], function() {
  gulp.start('sass', 'minify-css', 'scripts', 'html', 'browser-sync', 'watch');
});

これが私のpackage.jsonの依存関係です：

"devDependencies": {
    "browser-sync": "^2.18.12",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-clean-css": "^2.0.13",
    "gulp-concat": "^2.6.1",
    "gulp-cssnano": "^2.1.2",
    "gulp-imagemin": "^3.1.1",
    "gulp-ng-annotate": "^2.0.0",
    "gulp-order": "^1.1.1",
    "gulp-plumber": "^1.1.0",
    "gulp-print": "^2.0.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.3.2",
    "gulp-sourcemaps": "^1.9.1",
    "gulp-uglify": "^2.0.0"
  },
  "dependencies": {
    "video.js": "^5.17.0",
    "vjs-video": "^0.1.10"
  }

最近、ノード v7.9.0 に更新しました。おそらくこれは私の設定と互換性がありませんか？また、Angular 1.5.7 を使用しています。

どんな助けでも大歓迎です！どうも。

4

1 に答える 1

0

このエラーは、Litmus Chrome 拡張機能が原因でした。拡張機能を削除すると、Browser Sync が機能します。

https://chrome.google.com/webstore/detail/litmus/makmhllelncgkglnpaipelogkekggpio?hl=en-US

于 2017-05-31T21:21:24.650 に答える