Generating new JS file from Modernizr.load

[chris-pearce]

On some projects I load in all my JS files using Modernizr.load e.g.

<script>
Modernizr.load([
    //  Test for matchMedia
    {
        test:   window.matchMedia,
        nope:   'https://github.com/paulirish/matchMedia.js/blob/master/matchMedia.js'
    },
    // Load Cloudflare CDN's jQuery, with a local fallback incase it's unavailable
    {
        load: '//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js',
        complete: function () {
            if (!window.jQuery) {
                Modernizr.load('<?php echo $root; ?>/js/vendor/lib.jquery-1.9.0.min.js');
            }
        }
    },
    // Everything else
    <!-- scripts concatenated and minified via build script -->
    '<?php echo $root; ?>/js/plugins.js',
    '<?php echo $root; ?>/js/main.js'
    <!-- end scripts -->
]);
</script>

The scripts I need concatenating and minified I wrap with the necassary comments:

<!-- scripts concatenated and minified via build script -->
<!-- end scripts -->

Which generates a new concatenated and minified JS file but doesn't reference it in the HTML, just remains:

'<?php echo $root; ?>/js/plugins.js',
'<?php echo $root; ?>/js/main.js'

Is there a quick way to update the `build.xml' to get this working or even better to add this in as a new feature? I believe something similar is done for requirejs' but I haven't looked into that?

[roblarsen]

Since you're using php to map to your server root, you need to look at this:

https://github.com/h5bp/ant-build-script/wiki/How-to-bypass-the-automatic-script-concatenation

And then you need to ensure that the comments are correct for the version of the build script you're using (what version are you running?)

legacy version (pre 1.0)

    <!-- scripts concatenated and minified via build script -->
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>
    <!-- end scripts -->

1.0 and greater

  <!-- //-beg- concat_js -->
  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>
  <!-- //-end- concat_js -->

Does that cover your issue?

[chris-pearce]

Since you're using php to map to your server root, you need to look at this:

I already applied this as soon as you fixed it (I was one of the persons who flagged it as an issue) so that's been working fine.

I get this when I type ant version within the build dir:

c:\wamp\www\Cheetah\build>ant version
Buildfile: c:\wamp\www\Cheetah\build\build.xml

BUILD FAILED
Target "version" does not exist in the project "Boilerplate Build".

Total time: 0 seconds

But it says version="1.0" in the createproject.sh file. I don't know if I'm running that ant version test properly?

I don't use Git I download everything via the Download this repository as a zip file, I downloaded it 3 days ago so I could use this new feature: https://github.com/h5bp/ant-build-script/pull/134 which works fine but the new comments don't only the old comments.

[roblarsen]

The new image task is in both the master branch and in the 1.0 branch that's why that works even if you're in the master branch. The pull request came in on master, so I just pulled it in there and then merged it into 1.0. If you downloaded the zip and ant version doesn't work then you're working with master which means you're running the legacy version and need the old comments.

createproject.sh has nothing to do with anything I'm talking about.

If you're using the alternative task, then I'm not sure what's going on.

[chris-pearce]

OK understood so how do I get the files I need to enable the new comments (basically the latest version) if I'm not using Git because as you say downloading the zip is the legacy version?

[roblarsen]

I'm not entirely sure. You can try to switch to the 1.0 branch when you;re browsing the code and then hit the zip file button.

I'm going to be merging the 1.0 branch into master over the next couple of days, so if the above doesn't work you can wait for that.

[chris-pearce]

I just tried to download the zip from the 1.0 branch but the folder was damaged and it took forever to download. I'll just wait until you merge it into master. Cheers.

[roblarsen]

1.0 is merged into master. You should be able to download it now, etc.

[chris-pearce]

Cheers. I tried loading in my scripts with the latest ver (definitely using ver 1.0) via Modernizr.load technique with the new comments:

<script>
Modernizr.load([
//  Test for matchMedia
{
    test:   window.matchMedia,
    nope:   'https://github.com/paulirish/matchMedia.js/blob/master/matchMedia.js'
},
// Load Cloudflare CDN's jQuery, with a local fallback incase it's unavailable
{
    load: '//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js',
    complete: function () {
        if (!window.jQuery) {
            Modernizr.load('<?php echo $root; ?>/js/vendor/lib.jquery-1.9.0.min.js');
        }
    }
},
// Everything else
<!-- //-beg- concat_js -->
'<?php echo $root; ?>/js/plugins.js',
'<?php echo $root; ?>/js/main.js'
<!-- //-end- concat_js -->
]);
</script>

It behaves the same as the old version i.e. it generates a new JS file but doesn't update the HTML with the new concatenated file.

[roblarsen]

my eyes now adjust to what I'm seeing. You'll need to monkey with the replace here

https://github.com/h5bp/ant-build-script/blob/master/build.xml#L665-L670

Specifically what it matches and what it replaces.

It's very specifically looking for script tags. You can make it look for that pattern just as easy (And since it's just yours you can make it very specific), it's just going to need to be custom.