Question

我一直在努力学习angularJS，特别是1.5使用组件。我的IDE是c9所以服务器使用port：process.env.PORT，当我开始时会在https://projectName-username.c9users.io显示项目（在angular-ui-router的末尾有'/＃！'）。这个ide似乎没有使用像gulp这样的东西来编译es6。所以我将教程中的大部分gulp代码粘贴到我自己的项目中，这样我就可以继续使用es6语法来构建我自己的项目。除了我试图链接bootstrap 4和我自己的css文件之外，一切都很好用。在项目内而不是cdn，我似乎无法使文件路径正确。当运行gulp文件时，它说从./build提供文件，所以我尝试从那里写路径，但它在资源上有404.我最接近的是没有错误抛出尝试<link rel="stylesheet" src="#!/src/bower_components/bootstrap/dist/css/bootstrap.min.css">但是检查网络它说它正在加载https://billardsWebsite-rawlejuglal.c9users.io/类型样式表，但实际上并没有。下面是我的文件结构，index.html文件，然后是gulpfile。如果有人可以告诉我如何构建我的链接以找到这些资源，我将不胜感激。

billardsWebsite
  -.c9
  -.git
  -build
    -index.html
    -main.js
  -node_modules
  -src
    -bower_components
      -boostrap
        -dist
          -css
            -bootstrap.min.css
    -js
    -css
      -styles.css
    -index.html
  -.bowerrc
  -.bower.json
  -gulpfile.js
  -package.json
  -Procfile

Index.html（src / index.html）

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <title ng-bind="pageTitle"></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="#!/src/bower_components/bootstrap/dist/css/bootstrap.min.css">
  </head>
  <body>
    <div ui-view></div>

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <script src="main.js"></script>
  </body>
</html>

gulpfile.js

var gulp          = require('gulp');
var notify        = require('gulp-notify');
var source        = require('vinyl-source-stream');
var browserify    = require('browserify');
var babelify      = require('babelify');
var ngAnnotate    = require('browserify-ngannotate');
var browserSync   = require('browser-sync').create();
var rename        = require('gulp-rename');
var templateCache = require('gulp-angular-templatecache');
var uglify        = require('gulp-uglify');
var merge         = require('merge-stream');

// Where our files are located
var jsFiles   = "src/js/**/*.js";
var viewFiles = "src/js/**/*.html";

var interceptErrors = function(error) {
  var args = Array.prototype.slice.call(arguments);

  // Send error to notification center with gulp-notify
  notify.onError({
    title: 'Compile Error',
    message: '<%= error.message %>'
  }).apply(this, args);

  // Keep gulp from hanging on this task
  this.emit('end');
};


gulp.task('browserify', ['views'], function() {
  return browserify('./src/js/app.js')
      .transform(babelify, {presets: ["es2015"]})
      .transform(ngAnnotate)
      .bundle()
      .on('error', interceptErrors)
      //Pass desired output filename to vinyl-source-stream
      .pipe(source('main.js'))
      // Start piping stream to tasks!
      .pipe(gulp.dest('./build/'));
});

gulp.task('html', function() {
  return gulp.src("src/index.html")
      .on('error', interceptErrors)
      .pipe(gulp.dest('./build/'));
});

gulp.task('views', function() {
  return gulp.src(viewFiles)
      .pipe(templateCache({
        standalone: true
      }))
      .on('error', interceptErrors)
      .pipe(rename("app.templates.js"))
      .pipe(gulp.dest('./src/js/config/'));
});

// This task is used for building production ready
// minified JS/CSS files into the dist/ folder
gulp.task('build', ['html', 'browserify'], function() {
  var html = gulp.src("build/index.html")
             .pipe(gulp.dest('./dist/'));

  var js = gulp.src("build/main.js")
           .pipe(uglify())
           .pipe(gulp.dest('./dist/'));

  return merge(html,js);
});

gulp.task('default', ['html', 'browserify'], function() {

  browserSync.init(['./build/**/**.**'], {
    server: "./build",
    port: process.env.PORT || '3000',
    notify: false,
    ui: {
      port: 3001
    }
  });

  gulp.watch("src/index.html", ['html']);
  gulp.watch(viewFiles, ['views']);
  gulp.watch(jsFiles, ['browserify']);
});

HTML href无法在项目中查找资源

0 个答案: