Gulp以角度

Question

我试图在我的角度应用程序中缩小我的js。

我有一个gulpfile.js：

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var templates = require('gulp-angular-templatecache');
var minifyHTML = require('gulp-minify-html');

// Minify and templateCache your Angular Templates
// Add a 'templates' module dependency to your app:
// var app = angular.module('appname', [ ... , 'templates']);

gulp.task('templates', function () {
  gulp.src([
      './**/*.html',
      '!./node_modules/**'
    ])
    .pipe(minifyHTML({
      quotes: true
    }))
    .pipe(templates('templates.js'))
    .pipe(gulp.dest('tmp'));
});

// Concat and uglify all your JavaScript

gulp.task('default', ['templates'], function() {
  gulp.src([
      './**/*.js',
      '!./node_modules/**',
      '!./gulpfile.js',
      '!./dist/all.js'
    ])
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

当我执行此操作时，我得到一个all.js文件，我在index.html中替换了所有这些：

<!-- JS files integration -->
        <script type="text/javascript" src="js/lib/angular/angular.min.js"></script>

      <script type="text/javascript" src="js/lib/angular-ui-router/release/angular-ui-router.js"></script>
        <script type="text/javascript" src="js/lib/angular-animate/angular-animate.min.js"></script>
        <script type="text/javascript" src="js/lib/angular-aria/angular-aria.min.js"></script>
        <script type="text/javascript" src="js/lib/angular-material/angular-material.min.js"></script>
    <script type="text/javascript" src="js/lib/angular-facebook/lib/angular-facebook.js"></script>
        <script type="text/javascript" src="js/lib/angular-messages/angular-messages.min.js"></script>
        <script type="text/javascript" src="js/lib/angular-sanitize/angular-sanitize.min.js"></script>
        <script type="text/javascript" src="js/lib/jquery/dist/jquery.min.js"></script>
        <script type="text/javascript" src="js/lib/bootstrap/js/bootstrap.min.js"></script>

        <script type="text/javascript" src="js/controllers/bootstrap.js"></script>
        <script type="text/javascript" src="js/controllers/AppController.js"></script>
        <script type="text/javascript" src="js/controllers/MainController.js"></script>
        <script type="text/javascript" src="js/controllers/NavController.js"></script>
        <script type="text/javascript" src="js/controllers/UserController.js"></script>

        <script type="text/javascript" src="js/factories/bootstrap.js"></script>
        <script type="text/javascript" src="js/factories/AuthInterceptorFactory.js"></script>
    <script type="text/javascript" src="js/factories/EncodedFormInterceptorFactory.js"></script>
    <script type="text/javascript" src="js/factories/TransformRequestInterceptorFactory.js"></script>
        <script type="text/javascript" src="js/factories/AuthFactory.js"></script>
        <script type="text/javascript" src="js/factories/UserFactory.js"></script>
        <script type="text/javascript" src="js/factories/ChallengeFactory.js"></script>

    <script type="text/javascript" src="js/directives/bootstrap.js"></script>
    <script type="text/javascript" src="js/directives/CheckEqualPasswordDirective.js"></script>
    <script type="text/javascript" src="js/directives/ChooseChallengeModalDirective.js"></script>
    <script type="text/javascript" src="js/directives/CompleteChallengeModalDirective.js"></script>
        <script type="text/javascript" src="js/directives/RatingDirective.js"></script>

        <script type="text/javascript" src="js/lib/angular-socialshare/src/js/angular-socialshare.js"></script>
        <script type="text/javascript" src="js/lib/angular-loading-bar/build/loading-bar.min.js"></script>
        <script type="text/javascript" src="js/lib/angular-svg-round-progressbar/build/roundProgress.min.js"></script>
        <script type="text/javascript" src="js/lib/angular-translate/angular-translate.js"></script>
        <script type="text/javascript" src="js/lib/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
      <script type="text/javascript" src="js/lib/oclazyload/dist/ocLazyLoad.js"></script>

    <script type="text/javascript" src="js/services/bootstrap.js"></script>
    <script type="text/javascript" src="js/services/ChallengesService.js"></script>
    <script type="text/javascript" src="js/services/CurrentChallengeService.js"></script>
    <script type="text/javascript" src="js/services/RatingService.js"></script>
    <script type="text/javascript" src="js/services/SuggestionsService.js"></script>
    <script type="text/javascript" src="js/services/UserService.js"></script>

     <script type="text/javascript" src="js/app.js"></script>

有了这个：

<script type="text/javascript" src="js/all.js"></script>

当我尝试加载我的应用时，我收到此错误：

  

all.js：11 Uncaught TypeError：require不是函数

我该怎么办？

我把它缩小了：

var express=require("express"),
app=express(),
mongoose=require("mongoose"),bodyParser=require("body-parser"),
methodOverride=require("method-override"),port=process.env.PORT||8080;

是否都会造成问题（之后可能更多）。它位于server.js中，我也使用节点，但我只能在he​​roku上部署它（我使用外部api，所以在这个应用程序中我没有任何模特或任何东西）

Answer 1

您需要保持脚本文件的顺序。 Concat使用来自gulp.src的订单。您刚刚指定了/**/*.js，因此您的文件系统将负责订单，而这不是您所需要的。 关于gulp-concat website

有更多解释