Question

我正在尝试通过浏览器同步来提供我的应用。当我的index.html加载。我看不到任何js / css文件被加载。

我使用vs代码作为IDE。

下面是我的文件夹结构。

 - SampleApp 
    app
      index.html
    bower_components
    node_modules
    gulpfile.js

以下是我的gulp文件。

var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var inject = require('gulp-inject');
var bowerFiles = require('main-bower-files');


gulp.task('index', function () {
  var target = gulp.src('./app/index.html');
  // It's not necessary to read the files (will speed up things), we're only after their paths: 
  var sources = gulp.src(['./app/**/*.js', './app/**/*.css'], {read: false});

  return target.pipe(inject(sources))
    .pipe(inject(gulp.src(bowerFiles(), {read: false}), {name: 'bower'}))
    .pipe(gulp.dest('./app'));
});


gulp.task('serve', function () {

     browserSync.init({
        server: {
            baseDir: "app"
        }
    })



    gulp.watch(['*.html', 'app/styles/**/*.css', 'app/**/*.js','app/**/*.html'], { cwd: 'app' }, reload);
});

当我运行gulp服务时。我可以看到我的网站正在运行但无法加载任何文件。（bower_components / my js files / css files）无法加载资源：服务器响应状态为404（未找到）。下面是我的index.html脚本。

 <script src="/bower_components/angular/angular.js"></script>
       <script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
       <script src="/bower_components/angular-animate/angular-animate.js"></script>
       <script src="/bower_components/angular-aria/angular-aria.js"></script>
       <script src="/bower_components/angular-messages/angular-messages.js"></script>
       <script src="/bower_components/angular-material/angular-material.js"></script>

请帮助我。

Answer 1

最后在下面的链接找到解决方案。 https://github.com/BrowserSync/browser-sync/issues/125 始终baseDir应该是我们文件夹结构的最高点，或者定义要遍历到文件夹的路由。

以下是最终的工作gulpfile.js ..

var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var inject = require('gulp-inject');
var bowerFiles = require('main-bower-files');
var middleware = require('proxy');


gulp.task('index', function () {
  var target = gulp.src('./index.html');   
  var sources = gulp.src(['./app/**/*.js', './app/**/*.css'], {read: false});

  return target.pipe(inject(sources))
    .pipe(inject(gulp.src(bowerFiles(), {read: false}), {name: 'bower'}))
    .pipe(gulp.dest('./'));
});



gulp.task("watch", function () {

    browserSync.init({
        server: {
            baseDir:'./'
        }
    });

     gulp.watch(['app/**/*.html', 'app/styles/**/*.css', 'app/**/*.js','app/**/*.html'], { cwd: './' }, reload);
});

browser-sync - 无法加载js或css文件

1 个答案: