在HTML文件的一行中引用多个js文件

reference multiple js files in a single line in a html file

本文关键字：文件 引用 js 一行 HTML      更新时间：2023-09-26

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

是否有一个简单的方法来引用所有的js文件在一个HTML文件，而不是引用它一个接一个?

对于"easy"的某个值。不过，浏览器中没有任何内置功能可以做到这一点。

或者是否有一种工具可以将这些文件的内容复制到一个文件中并引用该文件?

有很多。cat是最简单的。

从您常用的构建工具中调用。

你可以在开发过程中使用require.js之类的东西来组合它们，并从构建工具中通过Node调用r.js来打包你的阶段和实时环境。

你可以试试Require.js。Require.js是唯一通过script-tag加载的javascript文件。当你结束开发时，你可以使用Require.js的r.js来将所有内容缩小并连接到一个文件中。

我一直使用这个工具来缩小我的JS文件:

在线Javascript压缩工具

你可以上传多个文件，它会为你将它们连接成一个。它生成的文件也比YUI压缩器和Google的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网站上，有一篇关于如何使用GruntJS的很好的文章，但这里有一个示例Gruntfile.js，它将:

  1. 检测所有JS文件(app.js在当前目录下，.js在ngmodules目录下)
  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']);
};

还有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文件。

相关文章：