How do I use r.js to optimize javascript files only?

Question

I have a project that is using grunt and require.js. I would like to leave all of the javascript task(s) out of the Gruntfile, and use r.js for my javascript.

When I execute r.js -o path/to/app.build.js, the system goes through and begins to optimize the entire web project.

I only want r.js to look at my javascript file(s). Grunt can handle the sass & images.Here is what my directory structure looks like:

/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

When all is finished, I'd like to just optimize these file(s) and move them to my final file. In the docs I've found fileExclusionRegExp But I'm not sure that's what I'm looking for.

EDIT

Thank you @kryger! To clearify a few things after more testing I've found that r.js is staying with my resources directory. I am looking for a way to keep r.js out of the node_modules directory & out of the scss directory. I have a grunt task that will take care of the scss "stuff".

I am working with a CodeIgniter project so here is what my system looks like.

/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

Here is what my app.build.js looks like.

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

When I run r.js -o app.build.js, The system will go through every single directory in my resources folder.

I don't want my php files, or any of the grunt files its grabbing... I just want r.js to only touch the javascript files.

Here is a screen shot to show: screenshot

It's something I'm doing wrong I know...I just haven't been able to find/figure out what it is.

What do you mean by "begins to optimize the entire web project"? r.js doesn't even process SASS or images (it can only concatenate CSS files). Either way, r.js does whatever you told it to in your buildconfig file (app.build.js). You'd need to share its contents to get specific answers. — kryger
– kryger, Commented Jun 12, 2015 at 10:09

Damon · Accepted Answer · 2015-06-14 03:00:04Z

Well, like anything else - It was something I was doing. While I was working through (now what seems silly) I did find quite a few posts that were similar, so here's to hoping this will help someone else.

TL;DR:

I moved r.js into my javascript directory. That way it would only work it's magic within that directory.

Here is my updated project structure:

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

Here is my app.build.js file:

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

When the build is complete, my _dist directory looks like this:

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

Collectives™ on Stack Overflow

How do I use r.js to optimize javascript files only?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related