Question

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

向文件系统添加一个监听器，每次更改后都会编译文件，以便我可以在浏览器中看到它。这意味着在我看到我做了什么之前需要1-2秒的开销，这对于html微调很烦人。
以某种方式在开发过程中使用多个文件进行浏览，并且在进入生产之前仅进行压缩。这意味着我需要为dev和prod创建一个单独的index.html。

你有什么看法？

Answer 1

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

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

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

编辑：如果你要使用Ant，请查看Exec / ReplaceRegexp个任务。

Answer 2

我使用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(),
);

它可能不像它可能的那么干，但它可以工作，你可以根据自己的需要进行调整。

Answer 3

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

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

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

Answer 4

问题是您正在使用文件观察程序来执行更新。 “上次修改”字段使文件系统观察者不必要。

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

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

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

Answer 5

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

在开发过程中处理多个js文件

5 个答案: