Question

我正在使用浏览器同步运行Gulp并在Chrome中收到以下错误：

NonESPMessageInterface --- nonEspMessageInterface.js：8

TypeError：无法读取属性＆＃39; insertBefore＆＃39; of null --- angular.js：13708

清单消息无效，来自origin＃{e.origin}：MessageEventbubbles：falsecancelBubble：falsecancelable：falsecomposed：falsecurrentTarget：Windowdata：ObjectdefaultPrevented：falseeventPhase：0isTrusted：truelastEventId：＆＃34;＆＃34; origin：＆＃34 ; http://localhost:3000＆＃34; path：Array（1）ports：Array（0）returnValue：truesource：WindowsrcElement：Windowtarget：WindowtimeStamp：4354.4type：＆＃34; message＆＃34; proto ：MessageEvent --- nonEspMessageInterface.js：53

我的gulp.js文件如下所示：

＆＃13;

//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');
});

＆＃13;

这是我的package.json依赖项：

＆＃13;

"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"
  }

＆＃13;

我最近更新到了节点v7.9.0。也许这与我的配置不兼容？另外，我使用的是Angular 1.5.7。

任何帮助将不胜感激！ THX。

Answer 1

此错误是由Litmus Chrome扩展引起的。删除扩展程序和浏览器同步功能。

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

Gulp + Browser Sync失败

1 个答案: