0

我正在编写一个backbone.js 应用程序。我有多个 js、css 和 html 模板文件。我还有一个脚本可以将它们压缩成一个文件，这样下载起来会更快。在开发过程中我应该如何工作：

  1. 向文件系统添加一个侦听器，并在每次更改后编译文件，以便我可以在浏览器中看到它。这意味着在我看到我所做的事情之前需要 1-2 秒的开销，这对于 html 微调来说很烦人。

  2. 在开发过程中以某种方式使用多个文件进行浏览，并且只在投入生产之前进行处理。这意味着我需要为 dev 和 prod 提供单独的 index.html。

你怎么看？

4

5 回答 5

1

使用开发来处理组合和缩小的文件将是一场噩梦。两个并行的索引文件也会很痛苦。

您正在寻找构建自动化。编写一个构建脚本，为您的项目准备部署。在您的情况下，这将是处理所有文件，然后修改您的索引文件以仅引用组合文件。其他任务可以包括更新连接字符串、通过 FTP 上传等。

一个简单的 bash 脚本就可以了，但您也可以使用Ant、Phing或任何其他构建脚本。关键是可重复性。您应该能够使用一个简单的命令来执行此操作。

编辑：如果您要使用 Ant，请查看Exec/ ReplaceRegexptasks。

于 2012-10-05T15:29:32.263 回答
1

问题是您正在使用文件观察程序进行更新。“Last Modified”字段使文件系统观察程序变得不必要。

当用户发出请求时，请执行以下操作：

  • 缩小所有内容后，保存结果的缓存版本。
  • 每次加载时，检查任何文件的“上次修改”字段是否比缓存更新。如果是，则重新缩小所有内容，将其缓存，并返回新缓存的版本。否则，只返回缓存的版本。简单，仅在您需要时运行。

发展很快。生产速度更快。两者都使用相同的代码。

于 2012-10-05T16:18:17.700 回答
1

我使用Minify来合并和缩小我的 JS，在我的主干应用程序的 index.html 中，我只有一个这样的代码块：

   if (APP._dev === true) {
        // So on development, we load all the files individually
        $.when(
                // Utilities
                $.getScript(APP._rootDir + 'app/js/util.js'),

                // Models
                $.getScript(APP._rootDir + 'app/js/models/Timer.js'),
                $.getScript(APP._rootDir + 'app/js/models/Section.js'),

                // Collections
                $.getScript(APP._rootDir + 'app/js/collections/Timers.js'),
                $.getScript(APP._rootDir + 'app/js/collections/Sections.js'),

                // Views
                $.getScript(APP._rootDir + 'app/js/views/TitleView.js'),
                $.getScript(APP._rootDir + 'app/js/views/BackgroundAudioView.js'),

                // Router
                $.getScript(APP._rootDir + 'app/js/routers/APPRouter.js'),

                // Load in our templates file and add each template to a
                // proerty visible in our application scope
                $.get(APP._rootDir + 'app/js/templates/all.html',function(result){
                    var tmp = $('<div></div>').html(result);
                    $('script.template', tmp).each(function(){
                        APP._templates[this.id] = $(this).html();
                    });
                },'html'),

                // Here we create a new deferred object which we will bind
                // to JQuery's ready() event.
                $.Deferred(function (deferred) {

                    // DOM Ready. Invokes our APP.init() function.
                    $(deferred.resolve); // init
                })
        ).done(
                APP.init
        ).fail(
                function () { /* fail how you would like */ }
        );
    } else {
        $.when(
                // And on prod, we load a combined & minified JS file instead
                $.getScript(APP._rootDir + 'min/?g=js'),

                // Load in our templates file and add each template to a
                // proerty visible in our application scope
                $.get(APP._rootDir + 'app/js/templates/all.html',function(result){
                    var tmp = $('<div></div>').html(result);
                    $('script.template', tmp).each(function(){
                        APP._templates[this.id] = $(this).html();
                    });
                },'html'),

                // Here we create a new deferred object which we will bind
                // to JQuery's ready() event.
                $.Deferred(function (deferred) {

                    // DOM Ready. Invokes our APP.init() function.
                    $(deferred.resolve); // init
                })
        ).done(
                APP.init
        ).fail(
                function () { /* fail how you would like */ }
        );
    }

然后，在我的 Minify/min/目录中的 groupsConfig 中，我定义我的构建数组以匹配 jQuery 的延迟对象加载顺序：

return array(
    'js' => array(
        '//' . $rootDir . '/util.js',

        '//' . $rootDir . '/models/Timer.js',
        '//' . $rootDir . '/models/Section.js',

        '//' . $rootDir . '/collections/Timers.js',
        '//' . $rootDir . '/collections/Sections.js',

        '//' . $rootDir . '/views/TitleView.js',
        '//' . $rootDir . '/views/BackgroundAudioView.js',

        '//' . $rootDir . '/routers/APPRouter.js'
    ),
    'css' => array(),
);

它可能不像它可能的那样 DRY，但它可以工作，您可以根据需要对其进行调整。

于 2012-10-05T15:30:27.240 回答
1

我通常有一个 html 页面，其中包含与我拥有的文件一样多的标签，以进行开发阶段。

当它必须投入生产时，它可以被碾碎。

对于下一个项目，我建议使用 requireJS，它在开发过程中以正确的顺序加载文件，并且 r.js 可以将每个脚本加入一个文件中以进行生产。

于 2012-10-05T15:31:30.547 回答
0

我正在使用 require.js 并尝试使用 r.js 压缩所有文件，但我发现的问题是它们可以压缩 .js .css 文件，但不能压缩 .html 文件。我现在有 50 个模板，第一次加载需要 10 秒。

于 2012-10-05T16:31:00.270 回答