4

有没有一种简单的方法来引用 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 调用。

4

6 回答 6

4

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

对于一些“容易”的价值。浏览器没有内置任何东西可以做到这一点。

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

有许多。cat是最简单的。

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

您可以在开发期间使用require.jsr.js之类的东西在运行时将它们组合起来，并从您的构建工具中通过 Node调用以打包您的登台和实时环境。

于 2013-04-11T14:41:38.450 回答
2

你可以试试 Require.js。Require.js 是唯一通过脚本标签加载的 JavaScript 文件。当您退出开发时，您可以使用 Require.js 的 r.js 将所有内容压缩并合并到一个文件中。

于 2013-04-11T14:52:45.663 回答
1

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

在线 Javascript 压缩工具

您可以上传多个文件，它会为您将它们连接成一个。它还产生比 YUI 压缩器更小的文件大小，而且大多数时候谷歌的 JS 编译器也是如此。

于 2013-04-11T14:42:31.237 回答
1

我不确定为什么还没有提到这一点，但我确实认为这个线程有点过时了。因为我在寻找解决这个问题的过程中偶然发现了这个问题，所以我想我会在这里快速写一篇关于GruntJS的文章，以供其他 JS 新手查找。

本质上，正确配置的 Gruntfile.js 将能够围绕 JS 执行各种任务，包括但不限于：连接文件、缩小文件、代码检查等等。

您可以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

在GruntJS 网站上，有一篇关于如何使用 GruntJS 的很好的文章，但这里有一个示例 Gruntfile.js，它将：

  1. lint 所有 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']);

};
于 2015-05-28T19:24:54.003 回答
1

还有 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'));
于 2015-12-01T09:04:54.870 回答
0

您可以尝试将您的 javascript 文件或插件合并为一个：

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

不过，您必须手动完成。另一种选择是编写一个服务器端脚本来组合和缩小所有的 javascript 文件。

于 2013-04-11T14:39:58.943 回答