Question

我对编码很新，但已经成功使用了Gulp几次，所以我不确定我做错了什么。在尝试自己解决这个问题时，我删除了node_modules并重新安装，将我的CDN更新到最新版本，（暂时）禁用js和css的任何缩小，并且双重检查我的文件路径被正确引用。此外，在使用Gulp之前，所有脚本的文件路径都在index.html中进行了硬编码，并且工作正常。

目前Gulp似乎在我的IDE（atom）中进行编译，但是当我使用nodemon并转到localhost时，我的网站被破坏了。错误检查员给我的是：

GET http://localhost:5000/bundle.css localhost/:23
GET http://localhost:5000/bundle.js angular.js:38
Uncaught Error: [$injector:modulerr]

Here's what my file structure looks like

这是我的代码：

//index.html

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./bundle.css" media="screen" title="no title">
    <title></title>
  </head>

  <body>
    <ui-view></ui-view>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
    <script src="./bundle.js"></script>

  </body>

</html>

//gulpfile.js
var gulp = require('gulp');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var annotate = require('gulp-ng-annotate');

var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var cssmin = require('gulp-cssmin');
var htmlmin = require('gulp-htmlmin');
var watch = require('gulp-watch');

var paths = {
    jsSource: ['./public/js/**/*.js'],
    sassSource: ['./public/styles/**/*.scss'],
    indexSource: ['./public/index.html'],
    routesSource: ['./public/routes/**/*.html']
};

gulp.task('sass', function () {
 return gulp.src(paths.sassSource)
   .pipe(sass())
   .pipe(concat('bundle.css'))
   .pipe(gulp.dest('./dist'));
});

gulp.task('js', function() {
    return gulp.src(paths.jsSource)
        .pipe(concat('bundle.js'))
        // .pipe(annotate())
        // .pipe(uglify())
        // .pipe(rename({extname: ".min.js"}))
        .pipe(gulp.dest('./dist'))
});

gulp.task('routes', function() {
    gulp.src(paths.routesSource)
      .pipe(htmlmin({collapseWhitespace: true}))
      .pipe(gulp.dest('./dist/routes'))
})

gulp.task('index', function() {
    gulp.src(paths.indexSource)
      .pipe(htmlmin({collapseWhitespace: true}))
      .pipe(gulp.dest('./dist'))
})

gulp.task('watch', function() {
    gulp.watch(paths.jsSource, ['js']);
    gulp.watch(paths.sassSource, ['sass']);
    gulp.watch(paths.indexSource, ['index']);
    gulp.watch(paths.routesSource, ['routes']);
});

gulp.task('default', ['js', 'sass', 'watch', 'index'
]);

另外，我被要求举例说明控制器和服务的脱落。

//homeCtrl
angular.module('app')
  .controller('homeCtrl', function ($scope, $state, mainService, homeService, user) {

  $scope.user = user;

  $scope.addpo = function (ponum) {
    homeService.addpo(ponum).then(function (response) {
      alert("PO added successfully");
      $state.reload('home');
    })
  };
//homeService
angular.module('app')
.service('homeService', function ($http) {
  this.addpo = function (ponumber) {
    return $http ({
      method: 'POST',
      url: '/api/checkin',
      data: {  
        ponumber: ponumber, 
        checkpoint_id: 1 
      }
    }).then(function (response) {
      return response.data;
    });
 };

});

Gulp在我的IDE中编译，但在使用nodemon

0 个答案: