在html文件的单行中引用多个js文件

Question

是否有一种简单的方法可以引用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调用最小化。

Answer 1

有没有简单的方法来引用HTML文件中的所有js文件，而不是逐个引用它？

对于 “轻松” 一些价值。没有内置于浏览器，但会做到这一点。

或者有没有工具将那些文件的内容复制到一个文件中并引用该文件？

有很多。 cat是最简单的一个。

从通常的构建工具中调用它。

您可以使用类似require.js的东西在开发过程中在运行时将它们组合起来，并且可以通过来自构建工具的节点通过Node调用r.js，以打包您的舞台和实况环境。

Answer 2

你可以试着和你的JavaScript文件或插件组合成一个：

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

你必须做手工，但。 另一种选择是编写一个服务器端脚本来组合和缩小所有JavaScript文件。

Answer 3

我使用这个工具所有的时间来缩小我的JS文件：

Online Javascript Compression Tool

您可以上传多个文件，将它们连接成一个给你。它也产生比YUI压缩器小的文件大小，大多数时候也是Google的JS编译器。

Answer 4

你可以给Require.js一展身手。 Require.js是通过脚本标签加载的唯一JavaScript文件。当你退出开发时，你可以使用Require.js的r.js来缩小并将所有内容连接成一个文件。

Answer 5

我不知道为什么这还没有提到，但我确实认为这个线程有点过时。由于我在搜索过程中偶然发现了这个问题，所以我想我会在这里为其他新手JS人员找一个关于GruntJS的快速报告。

本质上，正确配置的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将：

1. Lint所有的JS文件（当前目录中的app.js和ngmodules目录中的所有.js文件）。
2. 将文件连接并保存到dist/package-name.js。
3. 缩小连接文件并将其保存到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']); 

}; 

Answer 6

还有咕嘟咕嘟（http://gulpjs.com/），其可以与各种插件一起使用。下面是串接一个例子* .js文件在一个单一的文件（main.js）文件，然后重命名生成的文件，最后minifies它：

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'));