Лучшее управление файлами шаблонов Javascript и HTML: редактируйте столько файлов, но используйте их как один файл

Question

Фон

Иметь проект, который включает в себя более 100 файлов шаблонов Javascript и HTML. Использование загрузчика сценариев (yepnope), который загружает файлы непосредственно из нашей среды разработки, чтобы в процессе разработки небольшое изменение можно было сохранить в файл и сразу же увидеть после обновления браузера.

Эта проблема

Сначала это прекрасно работало, но теперь, когда проект стал больше, браузер загружает все файлы слишком долго. Для нашей производственной среды мы можем объединить все файлы вместе, но среда разработки также должна быть быстрой, чтобы ускорить процесс разработки и уменьшить разочарование разработчиков.

Вопрос

Ищите какое-то решение, которое позволит нам сохранить нашу текущую файловую организацию, но, вероятно, доставлять файлы в браузер как один большой файл. Я не уверен, как это будет работать. Будет ли такое решение обновлять какой-либо производный файл каждый раз, когда оно обнаруживает изменение в исходном файле, или хранить все в одном большом файле, но позволяет перемещаться по файлу в IDE, как если бы это была структура каталога?

В настоящее время мы используем PyCharm.

Спасибо!

Answer 1

Вы должны объединить свои файлы JavaScript наверняка. Обслуживание большого количества файлов - действительно плохая вещь. Сейчас я использую Grunt. Это бегунок задач nodejs. У нас есть две среды

• development / local - в локальной среде Grunt объединяет файлы, но не уменьшает их. Он также добавляет информативный комментарий над каждым файлом, поэтому, если вы видите какую-то ошибку в DevTools, вам нужно немного прокрутить, чтобы увидеть точный файл
• производство - окончательный файл сокращен, а комментарии удалены.

Используя этот подход, мы по-прежнему разделяем все на разные файлы, но обслуживаем только один файл. На самом деле мы используем Grunt не только для javascript, но и для html-шаблонов, CSS, для генерации манифеста кеша и основного файла index.html. Вот как выглядит наш файл 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']);

}

Answer 2

Во-первых, это Карты исходного кода JavaScript, которые позволяют вам доставлять один большой файл с информацией о том, как они объединяются. Если браузер поддерживает исходные карты, он отобразит свернутый и объединенный файл, как если бы он не был свернут и объединен. Для достижения этого он загружает исходные исходные файлы, используя информацию исходной карты. Из того, что я видел, исходные файлы загружаются только тогда, когда они необходимы (отображаются в виде сценария).

Еще одна вещь, которую вы могли бы сделать, это использовать expire заголовки, например, один день, и префикс ваших утверждений с номером сборки. Если код перестраивается после изменения кода, генерируется новый номер сборки. Таким образом, только после внесения изменений код js перезагружается, в противном случае он читается из кэша браузера. Таким образом, только начальная загрузка после изменения будет медленнее, но тогда для тестирования страница снова будет работать гладко.