使用 Grunt 构建 Durandal（R.js + 文本）答案

【问题标题】：Building Durandal with Grunt (R.js + Text)使用 Grunt 构建 Durandal（R.js + 文本）
【发布时间】：2014-01-15 18:00:45
【问题描述】：

我想使用 Grunt 来构建一个 Durandal 项目，因为 Weyland 仍然完全没有文档记录，并且不像 Grunt 那样标准。

为此，grunt 任务需要在优化期间拉入所有 js 和 html 文件，但我无法让 RequireJS 通过文本模块内联 html 文件。

看起来 weyland 复制了文本文件 manually，但我无法弄清楚它在做什么来获取 requirejs（或杏仁，在这种情况下），以实际使用它们。我见过this question，但它要求在define 调用中引用文本模块，这在Durandal 中没有。

我的 gruntfile for require 使用这个配置

requirejs: {
            build: {
                options: {                  
                    name: '../lib/require/almond-custom', //to deploy with require.js, use the build's name here instead
                    insertRequire: ['main'], //needed for almond, not require
                    baseUrl: 'src/client/app',
                    out: 'build/main-built.js',
                    mainConfigFile: 'src/client/app/main.js', //needed for almond, not require
                    wrap: true, //needed for almond, not require
                    paths: {
                        'text': '../lib/require/text',
                        'durandal':'../lib/durandal/js',
                        'plugins' : '../lib/durandal/js/plugins',
                        'transitions' : '../lib/durandal/js/transitions',
                        'knockout': '../lib/knockout-2.3.0',
                        'bootstrap': '../lib/bootstrap.min',
                        'jquery': '../lib/jquery-1.9.1',
                        'Q' : '../lib/q.min'
                    },
                    inlineText: true,
                    optimize: 'none',
                    stubModules: ['text']               
                }
            }
        }

【问题讨论】：

为什么需要优化html文件？
不是优化它们，而是捆绑它们。 RequireJS 的文本模块对文本进行异步调用，在 Durandal 的情况下，它是 HTML 文件，它用作部分。 R.js 的目的是将您的 JS 捆绑在一个文件中，并且为 Durandal 捆绑“require”-d html 是有意义的。支持此操作，但在 Duranda 的情况下，请求是动态的。我不知道如何进行动态捆绑，或者是否有可能。

标签： requirejs gruntjs durandal requirejs-text grunt-contrib-requirejs

【解决方案1】：

您可能想试试https://npmjs.org/package/grunt-durandal。我将其用作基于 grunt 的构建过程的一部分。示例见https://github.com/RainerAtSpirit/HTMLStarterKitPro。

durandal: {
    main: {
        src: ['app/**/*.*', 'lib/durandal/**/*.js'],
            options: {
            name: '../lib/require/almond-custom',
                baseUrl: requireConfig.baseUrl,
                mainPath: 'app/main',
                paths: mixIn({}, requireConfig.paths, { 'almond': '../lib/require/almond-custom.js' }),
                exclude: [],
                optimize: 'none',
                out: 'build/app/main.js'
        }
    }
},

【讨论】：

这看起来很棒！文档需要让您知道name 是您覆盖杏仁路径的方式，但这是一个可靠的开始。谢谢雷纳！
这就是文档将grunt build 任务称为实验性的原因:)。
optimize 属性有什么作用，它还有哪些其他值？我似乎找不到任何关于它的信息。
选项被传递给r.js 文档可以在github.com/jrburke/r.js/blob/master/build/example.build.js 找到。我从不让 r.js 优化输出，为此有一个单独的 uglify 任务。
@RainerAtSpirit r.js 优化的最佳方法是什么？使用 HTMLStarterKitPro 构建时，我从 Almond 获得 TypeError: req.toUrl is not a function，而不是在最终构建目录中进行动态加载。

【解决方案2】：

作为 Grunt 的一个可能替代方案，我建议查看 Mimosa。它不像 Grunt 那样广泛使用，但有很好的文档记录，并且需要的配置少得多，如果你从 durandal 骨架开始，一切都已为你配置好，包括内联 html。

Durandal 也推荐它并告诉你如何开始使用它：http://durandaljs.com/pages/get-started/

您可以运行make start 开始开发，运行make dist 将所有内容打包发布。

【讨论】：