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