如何使用r.js优化javascript文件?

时间:2015-06-12 02:57:21

标签: optimization gruntjs requirejs r.js

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

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

我只想让r.js查看我的javascript文件。 Grunt可以处理sass& images.Here是我的目录结构:

/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但我不确定这是我正在寻找的内容。

修改

谢谢@kryger! 为了在经过更多测试后清除一些内容,我发现r.js仍在我的resources目录中。我正在寻找一种方法来保持node_modules目录中的r.js out scss目录的 out 。我有一个笨拙的任务,将照顾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文件。

这是一个显示屏幕截图: screenshot

这是我做错的事情我知道......我还没有找到/弄清楚它是什么。

1 个答案:

答案 0 :(得分:2)

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

<强> 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