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

Question

Is there an easy way to reference all js files in an HTML file rather than referencing it one by one?

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.

Answer 1

Is there an easy way to reference all js files in an HTML file rather than referencing it one by one?

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. cat is the simplest one.

Call it from your usual build tool.

You can use something like require.js to combine them at runtime during development, and call r.js via Node from your build tool for packaging for your staging and live environments.

Answer 2

You can give Require.js a 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.

Answer 3

I use this tool all the time to minify my JS files:

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.

Answer 4

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 GruntJS here for other newbie JS guys to find.

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.

You can install grunt on Ubuntu with:

$ 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:

1. Lint all the JS files ( app.js in the current directory and all .js files in the ngmodules directory).
2. Concatenate and save the files to dist/package-name.js .
3. Minify the concatenated file and save it to 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 5

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:

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

Answer 6

You can try and combine your javascript files or plugins into one:

<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.