如何使用 r.js 仅优化 javascript 文件？答案

【问题标题】：How do I use r.js to optimize javascript files only?如何使用 r.js 仅优化 javascript 文件？
【发布时间】：2015-06-12 02:57:21
【问题描述】：

我有一个使用 grunt 和 require.js 的项目。我想将所有 javascript 任务从 Gruntfile 中删除，并将 r.js 用于我的 javascript。

当我执行r.js -o path/to/app.build.js时，系统通过并开始优化整个web项目。

我只想让 r.js 查看我的 javascript 文件。 Grunt 可以处理 sass 和图像。这是我的目录结构：

/src/
    resources/
        js/
            vendor/
                require.js
                jquery.min.js
            plugins/
                pluginA.js
                pluginB.js
            modules/
                moduleA.js
                moduleB.js
                moduleC.js
            config.js
            main.js

当一切都完成后，我只想优化这些文件并将它们移动到我的最终文件中。在文档中我找到了fileExclusionRegExp 但我不确定这就是我要找的。p>

编辑

谢谢@kryger！为了在更多测试后澄清一些事情，我发现 r.js 保留在我的 resources 目录中。我正在寻找一种将 r.js out 保留在 node_modules 目录和 out scss 目录的方法。我有一个繁重的任务来处理 scss “东西”。

我正在使用 CodeIgniter 项目，所以这是我的系统的样子。

/trunk/
    application/
    logs/
    src/ <-- all of my "source" files (un-compressed scss and js)
        node_modules/
            ....
        resources/ 
            img/
                imgA.jpg
                imgB.jpg
            js/
                _build/
                    r.js
                    app.build.js
                vendor/
                    require.js
                    jquery.min.js
                plugins/
                    pluginA.js
                    pluginB.js
                modules/
                   moduleA.js
                   moduleB.js
                   moduleC.js
                config.js
                application.js
            scss/
                application/
                    fileA.scss
                    fileB.scss
                vendor/
                    bootstrap/
                        bootstrap.scss
                        ...
                site.scss
           Gruntfile.js
           package.json
    system/
    web/ <-- This is the site root directory
        _dist/
            resources/
                css/
                    optimized.css
                fonts/
                    vendor/
                        fontA.ttf
                js/
                    optimized.js

这是我的app.build.js 的样子。

({
    'appDir': '../',
    'baseUrl': 'resources/js',
    'dir': '../../web/resources/js',
    'mainConfigFile': '../resources/js/config.js',
    'name': 'application'
})

当我运行r.js -o app.build.js 时，系统将遍历我的resources 文件夹中的每个目录。

我不希望我的 php 文件或任何 grunt 文件被它抓取...我只希望 r.js 只接触 javascript 文件。

这是一个屏幕截图：

这是我做错了我知道...我只是无法找到/弄清楚它是什么。

【问题讨论】：

你说的“开始优化整个web项目”是什么意思？ r.js 甚至不处理 SASS 或图像（它只能连接 CSS 文件）。无论哪种方式，r.js 都会执行您在 buildconfig 文件 (app.build.js) 中告诉它的任何操作。您需要分享其内容才能获得具体答案。

标签： optimization gruntjs requirejs r.js

【解决方案1】：

嗯，就像其他任何事情一样 - 这是我正在做的事情。虽然我正在努力（现在看起来很愚蠢），但我确实发现了很多相似的帖子，所以希望这对其他人有帮助。

TL;DR：

我将r.js 移动到我的javascript 目录中。这样它就只能在那个目录中发挥它的魔力。

这是我更新的项目结构：

/trunk/
    _src/
        assets/
            js/
                _build/
                    app.build.js
                    r.js
                modules/
                plugins/
                vendor/
                application.js
                app.config.js
            scss/
            ....

这是我的app.build.js 文件：

({
    'appDir': '../',
    'baseUrl': './',
    'dir': '../../../../web/_dist',
    'mainConfigFile': '../config.js',
    'modules': [
        {
            name: 'application'
        }
    ],
    'fileExclusionRegExp': /^(?:_build|(?:r|app.build)\.js)$/
})

构建完成后，我的_dist 目录如下所示：

....
js/
    modules/
    plugins/
    vendor/
    application.js
    build.txt
    app.config.js

【讨论】：