Javascript 将每个模块组装成一个.js文件

我希望尽可能减少客户端在浏览器中加载脚本的HTTP请求数。这将是一个相当普遍的问题，但我仍然希望能得到一些答案，因为javascript中的模块管理到目前为止一直是一个难题

现状 现在，在开发过程中，每个模块都是从主html模板中单独请求的，如下所示：

<script src="/libraries/jquery.js"></script>
<script src="/controllers/controllername.js"></script>
...

我的目标 我想在服务器上创建一个文件，将所有模块“连接”在一起。如果我可以这样做，而不必向已经存在的模块添加更多代码，那将是完美的。然后，我可以简单地在请求时将单个文件提供给客户机

这可能吗

---

此外，如果我确实构建了一个文件，我应该在其中包含开源库（jQuery、Angular.js等）还是从客户端的外部cdn请求它们？

如果我理解正确，您可以使用任务运行程序（例如）为您连接这些文件

看看这个插件

文档中的配置示例：

// Project configuration.
grunt.initConfig({
  concat: {
    dist: {
      src: ['src/intro.js', 'src/project.js', 'src/outro.js'],
      dest: 'dist/built.js',
    }
  }
});

否则，如您所述，“模块加载器”系统（如或）可能是一条出路

我想在服务器上创建一个文件，将所有模块“连接”在一起。如果我可以这样做，而不必向已经存在的模块添加更多代码，那将是完美的

当然可以。您可以使用咕噜声或咕噜声来实现这一点，更具体地说，或者

下面是一个GrunFile.js配置示例，用于连接js目录下的每个文件：

grunt.initConfig({
  concat: {
    dist: {
      files: {
        'dist/built.js': ['js/**/**.js'],
      },
    },
  },
});

此外，您还可以在连接后使用缩小所有内容

这两个库都支持，因此，如果bug进入生产环境，您可以轻松地进行调试

您还可以使用缩小HTML文件

---

还有一个非常有用的库叫做。Usemin让您使用HTML注释“控制”哪些文件被缩小（因此您不必手动添加它们）

缺点是您必须通过脚本标记将它们明确地包含在HTML中，因此没有通过javascript（例如RequireJS）进行异步加载

---

此外，如果我确实构建了一个文件，我应该在其中包含开源库（jQuery、Angular.js等），还是从客户端的外部cdn请求它们

这是有争议的。两者都有利弊。连接供应商可以确保，如果由于某种原因CDN不可用，您的页面将按预期工作。但是，所服务的文件更大，因此您会消耗更多带宽

---

根据我个人的经验，我倾向于包括对于页面运行来说绝对必要的供应商库，例如AngularJS。

从我所知，您要求做的是将js文件压缩到一个文件中，然后在main.html中，您会得到这个

<script src="/pathLocation/allMyJSFiles.js"></script>

然后，我有文件路径，我需要减少到一个文件

var onlyProductionJS = [
  'public/application.js',
  'public/directives/**/*.js',
  'public/controllers/**/*.js',
  'public/factories/**/*.js',
  'public/filters/**/*.js',
  'public/services/**/*.js',
  'public/routes.js'
];

我把这些信息用在下面的吞咽任务中

gulp.task('makeOneFileToRuleThemAll', function(){
  return gulp.src(onlyProductionJS)
    .pipe(concat('weHaveTheRing.js'))
    .pipe(gulp.dest('public/'));
});

然后在命令行中通过调用

gulp makeOneFileToRuleThemAll

此调用运行相关的gulp任务，该任务使用'gulp-concat'将所有文件合并到一个名为'weHaveTheRing.js'的新文件中，并在目标'public/'中创建该文件

然后只需将该新文件包含到您的main.html

<script src="/pathLocation/weHaveTheRing.js"></script>

然后我像这样启动我的服务器（您的可能会有所不同）

注意：您可以使用任何您想要的电影或节目参考资料！：）

现在只需编写代码，每次更改指定文件时，GULP将运行您的任务

如果你想说为你的测试跑步者跑因果报应

将以下内容添加到您的gulp文件中

var karma = require('karma').server;

gulp.task('karma', function(done){
  karma.start({
    configFile: __dirname + '/karma.conf.js'
  }, done);
});

然后将这个任务业力添加到我上面提到的手表中，如下所示

gulp.task('startTheWatchingEye', function(){
  gulp.watch(productionScripts, ['makeOneFileToRuleThemAll', 'karma']);
});

同时

您的特定设置可能需要更多的吞咽模块。通常，您会在全球范围内安装Gulp以及每个模块。然后在您的各种项目中使用它们。只需确保您的项目的package.json具有您在dev或其他应用程序中需要的gulp模块

关于是大口喝还是咕噜，有不同的文章。在咕噜声之后进行了吞咽，并添加了咕噜声所缺乏的一些补充。我不知道格伦特是否还缺少它们。我非常喜欢Gulp，并且发现它非常有用，有很多文档

---

祝你好运

你调查过了吗？听起来像你要找的。这很好。我可以直接从服务器脚本运行

gulpmakeonefiletorulethemall

吗？我不知道？我这样做的方式是，我有一块手表，当我启动服务器时，它会自动启动，也就是说，吞下startUpTheNoise。然后，它会监视我关心的所有文件，当我进行更改时，它会自动合并、缩小、丑化并创建新文件。我只使用需要编程的代码，gulp使我的脚本文件可以快速一次性交付。您的更新帮助很大，感谢您将我介绍给gulp:）当然。在你把所有东西都设置好之后，它实际上很容易使用；并且高度可配置。

gulp.task('startTheWatchingEye', function () {
  gulp.watch(productionScripts, ['makeOneFileToRuleThemAll']);
});

npm start
// in a different terminal window I then type
gulp startTheWatchfuleye

var karma = require('karma').server;

gulp.task('karma', function(done){
  karma.start({
    configFile: __dirname + '/karma.conf.js'
  }, done);
});

gulp.task('startTheWatchingEye', function(){
  gulp.watch(productionScripts, ['makeOneFileToRuleThemAll', 'karma']);
});