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

377 views Asked by At

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.

1

There are 1 answers

0
Damon On BEST ANSWER

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