確実にJavaScriptファイルを連結する必要があります。多くのファイルを提供することは、本当に悪いことです。私が今使っているのはGruntです。これは nodejs タスク ランナーです。2つの環境があります
- development/local - ローカル環境で Grunt はファイルを連結しますが、縮小しません。また、すべてのファイルの上に有益なコメントが追加されるため、DevTools でエラーが表示された場合は、正確なファイルを表示するために少しスクロールする必要があります
- production - 最終ファイルが縮小され、コメントが削除されます。
このアプローチを使用すると、すべてが異なるファイルに分割されますが、1 つのファイルのみが提供されます。実際には、JavaScript だけでなく、html テンプレート、CSS、キャッシュ マニフェストとメインの index.html ファイルの生成にも Grunt を使用しています。package.json ファイルは次のようになります。
{
"name": "project",
"version": "0.0.1",
"description": "project",
"repository": {},
"devDependencies": {
"grunt": "0.4.1",
"grunt-contrib-concat": "0.3.0",
"grunt-contrib-watch": "0.4.4"
}
}
そして、Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
// contcatenation
concat: {
// javascript
js: {
src: ['src/**/*.js'],
dest: 'bin/scripts.js',
options: {
process: function(src, filepath) {
// do something here
return "\n/* " + filepath + " */\n" + src;
}
}
},
// CSS
css: {
src: ['src/**/*.css'],
dest: 'bin/styles.css',
options: {
process: function(src, filepath) {
return src;
}
}
},
// HTML templates
html: {
src: ['src/**/*.html', '!src/index.html'],
dest: 'tmp/templates.html',
options: {
process: function(src, filepath) {
return src;
}
}
}
},
// custom task for generating index.html (it's a single page app)
'generate-index': {
index: {
src: '<%= concat.html.dest %>',
dest: 'bin/index.html',
template: 'src/index.html'
}
},
// custom task for generating cache manifest file
'generate-manifest': {
manifest: {
dest: 'bin/cache.manifest'
}
},
// watching all the files and performa the specific tasks
watch: {
js: {
files: ['<%= concat.js.src[0] %>'],
tasks: ['concat:js', 'generate-manifest']
},
css: {
files: ['<%= concat.css.src[0] %>'],
tasks: ['concat:css', 'generate-manifest']
},
html: {
files: ['<%= concat.html.src[0] %>'],
tasks: ['concat:html', 'generate-index', 'generate-manifest']
},
img: {
files: ['bin/img/**/*.png', 'bin/img/**/*.jpg', 'bin/img/**/*.gif'],
tasks: ['generate-manifest']
}
}
});
// loading modules
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadTasks('tasks');
// grunt.registerTask('default', ['concat', 'less']);
grunt.registerTask('default', ['concat', 'generate-index', 'generate-manifest', 'watch']);
}