未捕获的ReferenceError:捆绑js文件时未定义require

时间:2016-08-23 16:26:04

标签: gulp nuget angular-ui-bootstrap bower

当我正在使用gulp脚本缩小和捆绑一些js库时,我收到此错误(我正在复制John Pappa的Hot Towel Angular nuget包)。

site.min.js:81109未捕获的ReferenceError:未定义require

这是bower.json文件

{
   "name": "chainmanagerprovider",
   "private": true,
   "dependencies": {
       "jQuery": "^3.1.0",
       "jquery-validation": "^1.15.1",
       "jquery-validation-unobtrusive": "^3.2.6",
       "modernizr": "^3.3.1",
       "bootstrap": "^3.3.7",
       "respond": "respond-minmax#^1.4.2",
       "angular": "^1.5.8",
       "angular-animate": "^1.5.8",
       "angular-mocks": "^1.5.8",
       "angular-sanitize": "^1.5.8",
       "angular-ui-router": "^0.3.1",
       "moment": "^2.14.1",
       "spin": "^1.1.6",
       "toastr": "^2.1.3",
       "font-awesome": "font-awsome#^4.6.3",
       "jquery": "^3.1.0",
       "angular-route": "^1.5.8",
       "angular-bootstrap": "^2.1.2",
       "install": "^1.0.4",
       "spin.js": "spin-js#^2.0.1",
       "ui-bootstrap": "^2.1.2"
},
   "resolutions": {
        "jquery": "3.1.0"
 }
}

和我的gulpfile.js

var gulp = require('gulp'),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
debug = require("gulp-debug"),
uglify = require("gulp-uglify"),
filter = require("gulp-filter"),
mainBowerFiles = require('main-bower-files');
var flatten = require('gulp-flatten');
var paths = {};
paths.baseReleaseFolder = "Bundle";
paths.baseJSReleaseFile = "js/site.min.js";
paths.baseCSReleaseFile = "css/site.min.css";
paths.jsSource = mainBowerFiles()//this gets all your bower scripts in an array
.concat([
    "Scripts/spcontext.js",//generated by MY typescript compiler
    "!/Scripts", //this is an exclude
     "!**/*.min.js" //also an exclude
]);

gulp.task("min:js", function () {
    var jsFilter = filter('**/*.js', { restore: true });//extra file safty incase my glob is getting non js files somehow

    return gulp
        .src(paths.jsSource) //this is the 'glob' IE the file selector 
        .pipe(jsFilter) //enforce my filter from above (gulp-filter)
        .pipe(debug()) //useful to output what files are in use (gulp-debug)
        .pipe(uglify()) //min and ugilfy files on the way to next step (gulp-uglify)
        .pipe(concat(paths.baseReleaseFolder + "/" + paths.baseJSReleaseFile)) //this takes all the files in the glob and creates a single file out of them in app/site.min.js
        .pipe(gulp.dest(".")) //write the final site.min.js to its location
        .pipe(jsFilter.restore); //not sure but all filter examples do this.
});

gulp.task("min:css", function () {
    var cssFilter = filter('**/*.css', { restore: true });
    return gulp
        .src(['bower_components/**/*.css', 'Content/**/*.css', "!bower_components/**/*.min.css", '!Content/**/*.min.css'])
        .pipe(flatten())
        .pipe(debug())
        .pipe(cssmin())
        .pipe(concat(paths.baseReleaseFolder + "/" + paths.baseCSReleaseFile))
        .pipe(gulp.dest("."))
        .pipe(cssFilter.restore);
});

gulp.task("fontawesome", function () {
    return gulp
        .src('bower_components/font-awesome/fonts/*')
        .pipe(flatten())
        .pipe(debug())
        .pipe(gulp.dest("Bundle/fonts"))
});


gulp.task("bundle", ["min:css", "min:js", "fontawesome"]);

脚本按预期完成所有捆绑,文件就在那里。当我运行页面时,我在此行得到了上述错误

要求(” ./ DIST / UI的自举-TPLS');

我正在使用Angular bootstrap,似乎我需要一个额外的步骤来处理这个库。我已经阅读过浏览器,但是我很难理解我需要对脚本执行的操作。

0 个答案:

没有答案