javascript 在 html 文件的一行中引用多个 js 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15951645/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
reference multiple js files in a single line in a html file
提问by tempid
Is there an easy way to reference all js files in an HTML file rather than referencing it one by one?
有没有一种简单的方法来引用一个 HTML 文件中的所有 js 文件而不是一个一个地引用它？
Instead of this -
而不是这个——
<script type="text/javascript" src="js/controllers/mainCtrl.js"></script>
<script type="text/javascript" src="js/controllers/browseCtrl.js"></script>
...
I'm looking for something like this -
我正在寻找这样的东西 -
<script type="text/javascript" src="js/controllers/*.js"></script>
Or is there a tool out there that copies the contents of these files into one file and reference that one file instead? This will be minimize the HTTP calls.
或者是否有一种工具可以将这些文件的内容复制到一个文件中并引用该文件？这将最大限度地减少 HTTP 调用。
回答by Quentin
Is there an easy way to reference all js files in an HTML file rather than referencing it one by one?
有没有一种简单的方法来引用一个 HTML 文件中的所有 js 文件而不是一个一个地引用它？
For some value of "easy". There is nothing built in to browsers that will do it though.
对于一些“简单”的价值。浏览器中没有任何内置的东西可以做到这一点。
Or is there a tool out there that copies the contents of these files into one file and reference that one file instead?
或者是否有一种工具可以将这些文件的内容复制到一个文件中并引用该文件？
There are many. catis the simplest one.
有许多。cat是最简单的。
Call it from your usual build tool.
从您常用的构建工具中调用它。
You can use something like require.jsto combine them at runtime during development, and call r.jsvia Node from your build tool for packaging for your staging and live environments.
您可以在开发期间使用require.js 之类的东西在运行时组合它们，并r.js从您的构建工具中通过 Node调用以打包您的临时和实时环境。
回答by GijsjanB
You can give Require.jsa go. Require.js is the only JavaScript-file that is loaded through the script-tag. When you go out of development you can use Require.js's r.js to minify and concat everything into one file.
你可以试试 Require.js。Require.js 是唯一通过脚本标签加载的 JavaScript 文件。当您停止开发时，您可以使用 Require.js 的 r.js 将所有内容缩小并合并到一个文件中。
回答by Grant Hulegaard
I am not sure why this hasn't been mentioned yet, but I do suppose this thread is a bit dated. Since I stumbled on this during my search to solve this very problem, I thought I would put a quick write-up about GruntJShere for other newbie JS guys to find.
我不确定为什么还没有提到这一点，但我确实认为这个线程有点过时了。由于我在寻找解决这个问题的过程中偶然发现了这一点，我想我会在这里快速写一篇关于GruntJS 的文章，供其他 JS 新手找到。
Essentially, a properly configured Gruntfile.js will be able to perform a variety of tasks around JS including, but not limited to: concatenating files, minifying files, code linting, and much much more.
本质上，正确配置的 Gruntfile.js 将能够围绕 JS 执行各种任务，包括但不限于：连接文件、缩小文件、代码检查等等。
You can install grunton Ubuntu with:
您可以grunt在 Ubuntu 上安装：
$ 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
On the GruntJS site, there is a pretty good write-up for how to use GruntJS, but here is an example Gruntfile.js that will:
在GruntJS 站点上，有一篇关于如何使用 GruntJS 的非常好的文章，但这里有一个示例 Gruntfile.js，它将：
- Lint all the JS files (
app.jsin the current directory and all.jsfiles in thengmodulesdirectory). - Concatenate and save the files to
dist/package-name.js. - Minify the concatenated file and save it to
dist/package-name.min.js.
- Lint 所有 JS 文件（
app.js在当前目录和目录中的所有.js文件ngmodules）。 - 将文件连接并保存到
dist/package-name.js. - 缩小连接的文件并将其保存到
dist/package-name.min.js.
Gruntfile.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']);
};
回答by rocha
There is also Gulp (http://gulpjs.com/), which can be used with various plugins. Here's an example that concatenates *.js files in one single file (main.js), then renames the resulting file and finally minifies it:
还有 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'));
回答by PlantTheIdea
I use this tool all the time to minify my JS files:
我一直使用这个工具来缩小我的 JS 文件：
Online Javascript Compression Tool
You can upload multiple files and it will concatenate them into one for you. It also produces smaller filesizes than YUI compressor, and Google's JS compiler most of the time too.
您可以上传多个文件，它会为您将它们连接成一个。它还比 YUI 压缩器生成更小的文件大小，而且大多数时候也是 Google 的 JS 编译器。
回答by Stefan
You can try and combine your javascript files or plugins into one:
您可以尝试将您的 javascript 文件或插件合二为一：
<script type="text/javascript" src="js/controllers/plugins.js"></script>
You'll have to do it manually though. Another option would be to write a server-side script to combine and minify all your javascript files.
不过，您必须手动执行此操作。另一种选择是编写一个服务器端脚本来组合和缩小所有 javascript 文件。
