尝试在 Chrome 中加载仪表板页面时避免使用 document.write()

2022-01-12 00:00:00 javascript html css angular gulp

所以我被困在这个问题上的时间比我愿意承认的要长，但作为一个 Angular 新手，我完全感到困惑.

So I have been stuck on this problem for longer than i'd care to admit but as a Angular newbie I am completely baffled.

所以我正在关注一些在线教程，以便将 Gulp 实施到我正在开发的应用程序中，每当我运行 Gulp 任务时，我都会在 Chrome 中收到错误消息:

So I am following some online tutorials in order to implement Gulp into an application I am working on and whenever I run the Gulp tasks I get an error in Chrome which states:

"[违规] 避免使用 document.write().(anonymous)@(index):13"

和:

///script>".replace("HOST",位置.主机名))；//]]>

我更加困惑，因为 index.html 在执行之前实际上并不包含 document.write 引用.此外，尽管在集成 Gulp 时主要遵循教程，但我似乎无法在屏幕上反映 CSS 背景更改，这可能与前面提到的错误有关吗?

I am even more confused as the index.html doesn't actually contain a document.write reference before execution. Also despite mostly following a tutorial when integrating Gulp I cannot seem to have the CSS background changes reflected on screen, could this be related to the previously mentioned error?

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>SmartSystemOverviewWeb</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="app/css/styles.css" rel="stylesheet">
</head>

<body>
<sso-dashboard>  
    Loading...    
  <i class="fa fa-spinner fa-spin"></i>
</sso-dashboard>

  <script type="text/typescript" src="app/vendor.ts"></script>
  <!-- <script src="app/app.component.js"></script> -->
</body>
</html>

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var tsc = require('gulp-typescript');
var tslint = require('gulp-tslint');
var tsProject = tsc.createProject('tsconfig.json');
var config = require('./gulp.config')();

var browserSync = require('browser-sync').create();
var superstatic = require('superstatic');
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var minifyCSS = require('gulp-minify-css');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var del = require('del');
var runSequence = require('run-sequence');

/*
-- TOP LEVEL FUNCTIONS --
gulp.task - Define tasks
gulp.src - point to files to use
gulp.dest - point to folder to output
gulp.watch - watch files + folders for changes
*/

// Logs Message
gulp.task('message', function(){
    return console.log('Gulp is running...');
});

gulp.task('ts-lint', function() {
    console.log('ts-lint task running...');
    return gulp.src(config.allTs)
        .pipe(tslint())
        .pipe(tslint({
            formatter: "verbose"
        }))
        // .pipe(tslint.report("verbose"))
})

gulp.task('compile-ts', function() {
    console.log('compile-ts task running...');
    var sourceTsFiles = [
        config.allTs,
        config.typings
    ];

    var tsResult = gulp
    .src(sourceTsFiles)
    .pipe(sourcemaps.init())
    .pipe(tsProject())

    return tsResult.js
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(config.tsOutputPath));
});

gulp.task('sass', function(){
    console.log('sass is running...');
    // return gulp.src('src/app/styles.scss')
    return gulp.src('src/app/**/*.scss')
      .pipe(sass()) // Using gulp-sass
      .pipe(gulp.dest('src/app/css'))
      .pipe(browserSync.reload({
        stream: true
      }))
    });

gulp.task('browserSync', function() {
    console.log('browserSync is running...');
    
    browserSync.init({
        // port: 4200,
        // file: ['index.html', '**/*.js'],
        // injectChanges: true,
        // logFileChanges: true,
        // logLevel: 'verbose',
        // notify: true,
        // reloadDelay: 0,
      server: {
        baseDir: 'src',
        middleware: superstatic({debug: false})
      },
    })
})

gulp.task('watch', ['browserSync', 'sass'], function(){
    gulp.watch('src/app/**/*.scss', ['sass']); 
    gulp.watch('src/app/component/**/*.scss', ['sass']); 
    // Reloads the browser whenever HTML or JS files change
    gulp.watch('src/app/**/*.html', browserSync.reload);
    gulp.watch('src/app/component/**/*.html', browserSync.reload);
    gulp.watch('src/app/**/*.js', browserSync.reload);
    gulp.watch('src/app/component/**/*.js', browserSync.reload);    
    gulp.watch('src/*.html', browserSync.reload);    
})

gulp.task('useref', function() {
	var assets = useref.assets();

	return gulp.src('app/*.html')
		.pipe(assets)
		.pipe(gulpIf('*.css', minifyCSS()))
		.pipe(gulpIf('*.js', uglify()))
		.pipe(assets.restore())
		.pipe(useref())
		.pipe(gulp.dest('dist'))
});

gulp.task('images', function() {
	return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
	.pipe(cache(imagemin( {
		interlaced: true
	})))
	.pipe(gulp.dest('dist/images'))
});

gulp.task('fonts', function() {
	return gulp.src('app/fonts/**/*')
	.pipe(gulp.dest('dist/fonts'))
});

// Cleaning
gulp.task('clean', function(callback) {
	del('dist');
	return cache.clearAll(callback);
})


gulp.task('clean:dist', function(callback) {
	del(['dist/**/*', '!dist/images', '!dist/images/**/*'], callback)
});

// Build Sequences
gulp.task('build', function (callback) {
	runSequence('clean:dist',
		['sass', 'useref', 'images', 'fonts'],
		callback
		)
})

gulp.task('default', function (callback) {
	runSequence(['message', 'ts-lint', 'sass', 'browserSync', 'watch'],
		callback
		)
})

styles.css

.testing {
  width: 71.42857%; }

.head {
  background: red; }

.body {
  background: #177794; }

.html {
  background: green; }

任何解决这些问题的提示或建议将不胜感激！

Any tips or advice to solve these issues would be greatly appreciated!

提前致谢！

推荐答案

违规消息是由browserSync引起的，它将在文档中添加以下行.

The violation message is caused by browserSync that will add the following line to the document.

<script id="__bs_script__">//<![CDATA[
    document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.23.3'></script>".replace("HOST", location.hostname));
//]]></script>

这几乎可以忽略，因为它只会在通过 browserSync 查看应用时影响应用，而不是最终应用.

This can be pretty much ignored as it will only affect the app when it's viewed through browserSync and not the final app.

相关文章