浏览器同步 - 无法加载 js 或 css 文件答案

【问题标题】：browser-sync - not able to load js or css files浏览器同步 - 无法加载 js 或 css 文件
【发布时间】：2016-06-04 22:23:12
【问题描述】：

我正在尝试通过浏览器同步服务我的应用程序。当我的 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 / 我的 js 文件 /css 文件）加载资源失败：服务器响应状态为 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>

请帮帮我。

【问题讨论】：

那么文件试图从开发工具网络中加载的路径是什么？
这是对其中一个文件的网络调用。请求 URL：localhost:3002/bower_components/angular-animate/… 请求方法：GET 状态码：404 未找到远程地址：[::1]:3002

标签： angularjs gulp browser-sync

【解决方案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);
});

【讨论】：