4

1 つずつ参照するのではなく、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>

または、これらのファイルの内容を 1 つのファイルにコピーし、代わりにその 1 つのファイルを参照するツールはありますか? これにより、HTTP 呼び出しが最小限に抑えられます。

4

6 に答える 6

4

1 つずつ参照するのではなく、HTML ファイル内のすべての js ファイルを参照する簡単な方法はありますか?

「簡単」のいくつかの値。ただし、それを行うブラウザには何も組み込まれていません。

または、これらのファイルの内容を 1 つのファイルにコピーし、代わりにその 1 つのファイルを参照するツールはありますか?

沢山あります。cat最も単純なものです。

通常のビルド ツールから呼び出します。

require.jsのようなものを使用して、開発中の実行時にそれらを結合し、ビルド ツールから Node 経由で呼び出しr.jsて、ステージング環境とライブ環境のパッケージ化を行うことができます。

于 2013-04-11T14:41:38.450 に答える
1

これがまだ言及されていない理由はわかりませんが、このスレッドは少し古くなっていると思います。この問題を解決するために検索中にこれに出くわしたので、他の初心者の JS 関係者が見つけられるように、 GruntJSに関する簡単な記事をここに載せると思いました。

基本的に、適切に構成された Gruntfile.js は、JS に関するさまざまなタスクを実行できます。これには、ファイルの連結、ファイルの縮小、コード linting などがありますが、これらに限定されません。

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. すべての 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 ファイルを 1 つのファイル (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 に答える
1

私は常にこのツールを使用して、JS ファイルを縮小しています。

オンライン Javascript 圧縮ツール

複数のファイルをアップロードすると、それらが 1 つに連結されます。また、ほとんどの場合、YUI コンプレッサーや Google の JS コンパイラーよりもファイルサイズが小さくなります。

于 2013-04-11T14:42:31.237 に答える
0

JavaScript ファイルまたはプラグインを 1 つにまとめることができます。

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

ただし、手動で行う必要があります。もう 1 つのオプションは、サーバー側のスクリプトを記述して、すべての JavaScript ファイルを結合および縮小することです。

于 2013-04-11T14:39:58.943 に答える