当我正在使用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,似乎我需要一个额外的步骤来处理这个库。我已经阅读过浏览器,但是我很难理解我需要对脚本执行的操作。