有没有一种简单的方法来引用HTML文件中的所有js文件而不是一个一个地引用它？
而不是这个 -
<script type="text/javascript" src="js/controllers/mainCtrl.js"></script>
<script type="text/javascript" src="js/controllers/browseCtrl.js"></script>
...
我正在寻找这样的东西-
<script type="text/javascript" src="js/controllers/*.js"></script>
或者是否有一种工具可以将这些文件的内容复制到一个文件中并引用该文件？这将最小化 HTTP 调用。
【问题讨论】：
标签： javascript
有没有一种简单的方法来引用HTML文件中的所有js文件而不是一个一个地引用它？
为了一些“容易”的价值。不过，浏览器没有内置任何东西可以做到这一点。
或者是否有一种工具可以将这些文件的内容复制到一个文件中并引用该文件？
有很多。 cat 是最简单的。
从您常用的构建工具中调用它。
您可以在开发期间使用require.js 之类的东西在运行时将它们组合起来，并通过您的构建工具中的Node 调用r.js 来打包您的登台和实时环境。
【讨论】：
cat 的链接吗？我在网上找不到。我刚开始学习 require.js 并听说过 r.js。我会试一试。谢谢！
你可以试试Require.js。 Require.js 是唯一通过脚本标签加载的 JavaScript 文件。当您退出开发时，您可以使用 Require.js 的 r.js 将所有内容压缩并合并到一个文件中。
【讨论】：
我一直使用这个工具来缩小我的 JS 文件：
Online Javascript Compression Tool
您可以上传多个文件，它会为您将它们连接成一个。它还产生比 YUI 压缩器更小的文件大小，而且大多数时候谷歌的 JS 编译器也是如此。
【讨论】：
我不确定为什么还没有提到这一点，但我认为这个线程有点过时了。因为我在寻找解决这个问题的过程中偶然发现了这个问题，所以我想我会在这里快速写一篇关于 GruntJS 的文章，供其他 JS 新手查找。
基本上，正确配置的 Gruntfile.js 将能够围绕 JS 执行各种任务，包括但不限于：连接文件、缩小文件、代码检查等等。
您可以在 Ubuntu 上安装 grunt：
$ sudo apt-get install nodejs
$ sudo npm -g install grunt-cli
$ cd /path/to/my/project
--- Assumming you have a package.json file already in place ---
$ npm install grunt --save-dev
--- Install grunt plugins you wish to use ---
$ npm install grunt-contrib-concat --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-watch --save-dev
在GruntJS site 上，有一篇关于如何使用 GruntJS 的很好的文章，但这里有一个 Gruntfile.js 示例：
app.js 和ngmodules 目录中的所有.js 文件）。dist/package-name.js。dist/package-name.min.js。Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['app.js', 'ngmodules/**/*.js'],
dest: 'dist/<%= pkg.name %>.js'
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
},
jshint: {
files: ['Gruntfile.js', 'app.js', 'ngmodules/**/*.js'],
options: {
// options here to override JSHint defaults
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
};
【讨论】：
还有 Gulp (http://gulpjs.com/)，可以和各种插件一起使用。这是一个示例，它将 *.js 文件连接到一个文件 (main.js) 中，然后重命名生成的文件并最终将其缩小：
var gulp = require('gulp'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat');
gulp.task('scripts', function(){
return gulp.src('./src/js/*.js')
.pipe(concat('main.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('./src/js/*.js'));
【讨论】：
您可以尝试将您的 javascript 文件或插件合并为一个：
<script type="text/javascript" src="js/controllers/plugins.js"></script>
不过，您必须手动完成。 另一种选择是编写一个服务器端脚本来合并和缩小所有的 javascript 文件。
【讨论】：