Better Javascript and html template file management: edit as many files as possible, but use them as one file

Question

Background

You have a project that includes over 100 Javascript and HTML template files. Using a script loader (yepnope), which downloads files directly from our development environment, so that during the development process a small change can be saved to a file and immediately visible after updating the browser.

Problem

It worked fine at first, but now that the project is bigger, the browser needs too much time to download all the files. For our production environment, we can combine all the files together, but the development environment should also be fast in order to speed up the development process and reduce developer frustration.

Question

You are looking for some solution that allows us to save the current file organization, but maybe deliver the files to the browser as one large file. I'm not sure how this will work. Will such a solution update any derived file every time it detects a change in the source file or saves everything in one large file, but does the file allow it to move inside the IDE as if it were a directory structure?

We are currently using PyCharm.

Many thanks!

Answer 1

You must concatenate your javascript files. Serving many files is really very bad. Now I am using Grunt . This is the nodejs nodal task. We have two environments

• development / local - in a local environment, Grunt combines files, but does not reduce them. It also adds an informative comment on each file, so if you see some error in DevTools, you need to scroll a bit to see the exact file
• production - the final file is minimized and comments are deleted.

Using this approach, we still have everything separated in different files, but only serve one file. We actually use Grunt not only for javascript, but also for html templates, CSS, creating a cache manifest and the main index.html file. This is what our package.json file looks like:

{ "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" } } 

And our 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 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']); } 

Answer 2

One thing JavaScript Source Maps allows you to deliver one large file with information about how they are combined. If the browser supports source maps, it will display a thumbnail and combination file, as if it had not been minimized and merged. To do this, it loads the source source files using the source map information. From what I saw, the source files are downloaded only when they are required (displayed in the script).

Another thing is that you can use expire headers, for example. one day and prefix your claims with the build number. If the code is rebuilt when the code changes, a new build number is generated. Thus, only when changes are made, the js code is reloaded, otherwise it is read from the browser cache. Thus, only the initial loading after the change will be slower, but then to check the page will again be smooth.