Gulp 在 angular 中缩小

Question

我正在尝试在我的 angular 应用程序中缩小我的 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 is not a function

我该怎么办？

我缩小了范围：

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

都在引起问题（之后可能更多）。它在 server.js 中，我也在使用节点，但只是为了我可以将它部署在 heroku 上（我使用的是外部 api，所以在这个应用程序中我没有任何模型或任何东西）

Answer 1

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

有更多解释

Gulp 在 angular 中缩小

Gulp minifying in angular

javascript

angularjs

node.js

gulp

minify