Smalltalk › Amber Smalltalk

How to create a single deployment file with r.js or grunt?

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

12 messages Options

laci

How to create a single deployment file with r.js or grunt?

Can anybody share a build.js file, which can be processed by r.js to generate single deployment file.

My understanding is that build.js for r.js should be something along these lines:
({
baseUrl: "amber",
name: "main",
out: "amber_build/main-built.js",
removeCombined: true
})

where main.js is something like that:
(require.config is taken from amber.js followed by invoking 'amber/deploy')

var config = {
waitSeconds: 0,
paths: {
'amber': 'support',
'amber_vm': 'support',
'amber_css': 'css',
'amber_lib': 'bower_components',
'amber_core': 'js',
'amber_core/_source': 'st',
'amber_helios/html': '.',
'jquery': 'bower_components/jquery/jquery.min',
'jquery-ui': 'bower_components/jquery-ui/ui/minified/jquery-ui.min'
},
map: {
'*': {
'css': 'amber_lib/require-css/css'
}
},
shim: {
'jquery-ui': {
deps: [ 'jquery' ]
},
'amber_lib/bootstrap/js/bootstrap': {
deps: [ 'jquery', 'css!amber_lib/bootstrap/css/bootstrap' ]
},
'amber_lib/codemirror/lib/codemirror': {
deps: [ 'css!amber_lib/codemirror/lib/codemirror' ]
},
'amber_lib/jquery-tabby/jquery.textarea': {
deps: [ 'jquery' ]
},
'amber_core/IDE': {
deps: [ 'amber_lib/codemirror/mode/smalltalk/smalltalk' ]
},
'amber_lib/codemirror/mode/smalltalk/smalltalk': {
deps: [ '../../lib/codemirror' ]
},
'amber_lib/codemirror/addon/hint/show-hint': {
deps: [ '../../lib/codemirror' ]
},
'ensure-console': {
exports: 'console'
}
}
};
requirejs.config(config);

require(['amber/deploy'], function (smalltalk) {
smalltalk.initialize({ 'transport.defaultAmdNamespace': 'portal_utilities' });
} );

laci

Re: How to create a single deployment file with r.js or grunt?

Including in build.js file the path, map and shim which are declared for require.config fixes the problem.

Now I have a single file including all required module.
How do I kickstart amber?

Hannes Hirzel

Re: How to create a single deployment file with r.js or grunt?

May I ask you to include the whole build.js file? How did the call to
r.js look like?

I assume

http://stackoverflow.com/questions/9911809/amber-smalltalk-creating-a-single-js-file-for-deployment

does no longer give a valid answer?

--Hannes

On 3/23/14, laci <[hidden email]> wrote:

> Including in build.js file the path, map and shim which are declared for
> require.config fixes the problem.
>
> Now I have a single file including all required module.
> How do I kickstart amber?
>
>
>
> --
> View this message in context:
> http://forum.world.st/How-to-create-a-single-deployment-file-with-r-js-or-grunt-tp4750392p4750404.html
> Sent from the Amber Smalltalk mailing list archive at Nabble.com.
>
> --
> You received this message because you are subscribed to the Google Groups
> "amber-lang" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [hidden email].
> For more options, visit https://groups.google.com/d/optout.
>

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

laci

Re: How to create a single deployment file with r.js or grunt?

Before require.js was used by amber I have used the approach described in the stackoverflow link.
It worked fine.

My build.js file looks like that - see below:
The content of amber-devel.js file is in my initial message.
As you can see the config is copied here.

({
paths: {
'amber': 'support',
'amber_vm': 'support',
'amber_css': 'css',
'amber_lib': 'bower_components',
'amber_core': 'js',
'amber_core/_source': 'st',
'amber_helios/html': '.',
'jquery': 'bower_components/jquery/jquery.min',
'jquery-ui': 'bower_components/jquery-ui/ui/minified/jquery-ui.min'
},
map: {
'*': {
'css': 'amber_lib/require-css/css'
}
},
shim: {
'jquery-ui': {
deps: [ 'jquery' ]
},
'amber_lib/bootstrap/js/bootstrap': {
deps: [ 'jquery', 'css!amber_lib/bootstrap/css/bootstrap' ]
},
'amber_lib/codemirror/lib/codemirror': {
deps: [ 'css!amber_lib/codemirror/lib/codemirror' ]
},
'amber_lib/jquery-tabby/jquery.textarea': {
deps: [ 'jquery' ]
},
'amber_core/IDE': {
deps: [ 'amber_lib/codemirror/mode/smalltalk/smalltalk' ]
},
'amber_lib/codemirror/mode/smalltalk/smalltalk': {
deps: [ '../../lib/codemirror' ]
},
'amber_lib/codemirror/addon/hint/show-hint': {
deps: [ '../../lib/codemirror' ]
},
'ensure-console': {
exports: 'console'
}
},
baseUrl: ".",
name: "amber-devel",
out: "amber-devel-build.js",
removeCombined: true
})

Hannes Hirzel

Re: How to create a single deployment file with r.js or grunt?

Hello again

Which version of Amber are you using?
Did you manage to get it working with the single deployment file?

--Hannes

On 3/24/14, laci <[hidden email]> wrote:

> Before require.js was used by amber I have used the approach described in
> the
> stackoverflow link.
> It worked fine.
>
> My build.js file looks like that - see below:
> The content of amber-devel.js file is in my initial message.
> As you can see the config is copied here.
>
> ({
> paths: {
> 'amber': 'support',
> 'amber_vm': 'support',
> 'amber_css': 'css',
> 'amber_lib': 'bower_components',
> 'amber_core': 'js',
> 'amber_core/_source': 'st',
> 'amber_helios/html': '.',
> 'jquery': 'bower_components/jquery/jquery.min',
> 'jquery-ui': 'bower_components/jquery-ui/ui/minified/jquery-ui.min'
> },
> map: {
> '*': {
> 'css': 'amber_lib/require-css/css'
> }
> },
> shim: {
> 'jquery-ui': {
> deps: [ 'jquery' ]
> },
> 'amber_lib/bootstrap/js/bootstrap': {
> deps: [ 'jquery', 'css!amber_lib/bootstrap/css/bootstrap' ]
> },
> 'amber_lib/codemirror/lib/codemirror': {
> deps: [ 'css!amber_lib/codemirror/lib/codemirror' ]
> },
> 'amber_lib/jquery-tabby/jquery.textarea': {
> deps: [ 'jquery' ]
> },
> 'amber_core/IDE': {
> deps: [ 'amber_lib/codemirror/mode/smalltalk/smalltalk' ]
> },
> 'amber_lib/codemirror/mode/smalltalk/smalltalk': {
> deps: [ '../../lib/codemirror' ]
> },
> 'amber_lib/codemirror/addon/hint/show-hint': {
> deps: [ '../../lib/codemirror' ]
> },
> 'ensure-console': {
> exports: 'console'
> }
> },
> baseUrl: ".",
> name: "amber-devel",
> out: "amber-devel-build.js",
> removeCombined: true
> })
>
>
>
> --
> View this message in context:
> http://forum.world.st/How-to-create-a-single-deployment-file-with-r-js-or-grunt-tp4750392p4750480.html
> Sent from the Amber Smalltalk mailing list archive at Nabble.com.
>
> --
> You received this message because you are subscribed to the Google Groups
> "amber-lang" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [hidden email].
> For more options, visit https://groups.google.com/d/optout.
>

Hannes Hirzel

Re: How to create a single deployment file with r.js or grunt?

To answer my question: NO, as the other thread 'Issues with Amber' indicates.

As for the question in the subject line

How to create a single deployment file with r.js or grunt?

I think both r.js and grunt are needed.

HH

On 4/5/14, H. Hirzel <[hidden email]> wrote:

> Hello again
>
> Which version of Amber are you using?
> Did you manage to get it working with the single deployment file?
>
> --Hannes
>
> On 3/24/14, laci <[hidden email]> wrote:
>> Before require.js was used by amber I have used the approach described in
>> the
>> stackoverflow link.
>> It worked fine.
>>
>> My build.js file looks like that - see below:
>> The content of amber-devel.js file is in my initial message.
>> As you can see the config is copied here.
>>
>> ({
>> paths: {
>> 'amber': 'support',
>> 'amber_vm': 'support',
>> 'amber_css': 'css',
>> 'amber_lib': 'bower_components',
>> 'amber_core': 'js',
>> 'amber_core/_source': 'st',
>> 'amber_helios/html': '.',
>> 'jquery': 'bower_components/jquery/jquery.min',
>> 'jquery-ui': 'bower_components/jquery-ui/ui/minified/jquery-ui.min'
>> },
>> map: {
>> '*': {
>> 'css': 'amber_lib/require-css/css'
>> }
>> },
>> shim: {
>> 'jquery-ui': {
>> deps: [ 'jquery' ]
>> },
>> 'amber_lib/bootstrap/js/bootstrap': {
>> deps: [ 'jquery', 'css!amber_lib/bootstrap/css/bootstrap' ]
>> },
>> 'amber_lib/codemirror/lib/codemirror': {
>> deps: [ 'css!amber_lib/codemirror/lib/codemirror' ]
>> },
>> 'amber_lib/jquery-tabby/jquery.textarea': {
>> deps: [ 'jquery' ]
>> },
>> 'amber_core/IDE': {
>> deps: [ 'amber_lib/codemirror/mode/smalltalk/smalltalk' ]
>> },
>> 'amber_lib/codemirror/mode/smalltalk/smalltalk': {
>> deps: [ '../../lib/codemirror' ]
>> },
>> 'amber_lib/codemirror/addon/hint/show-hint': {
>> deps: [ '../../lib/codemirror' ]
>> },
>> 'ensure-console': {
>> exports: 'console'
>> }
>> },
>> baseUrl: ".",
>> name: "amber-devel",
>> out: "amber-devel-build.js",
>> removeCombined: true
>> })
>>
>>
>>
>> --
>> View this message in context:
>> http://forum.world.st/How-to-create-a-single-deployment-file-with-r-js-or-grunt-tp4750392p4750480.html
>> Sent from the Amber Smalltalk mailing list archive at Nabble.com.
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "amber-lang" group.
>> To unsubscribe from this group and stop receiving emails from it, send an
>> email to [hidden email].
>> For more options, visit https://groups.google.com/d/optout.
>>
>

laci

Re: How to create a single deployment file with r.js or grunt?

This post was updated on .

I am using amber version: 0.13.0-pre.

I am using grunt to copy the amber files from the location where the amber ZIP file was extracted into my working directory. I am copying only the files required for development and deployment. I grab this list using Fiddler.

Following I am using r.js to create the single amber core file.
The build.js file is available at the top of this thread.

I wonder if anybody was successful with this.
I could create the file, but not sure how to invoke.

It would be great if somebody could share with me such file and it would be part of amber ZIP file.

Hannes Hirzel

Re: How to create a single deployment file with r.js or grunt?

On 4/5/14, laci <[hidden email]> wrote:
> I am using amber version: 0.13.0-pre.
>
> I am using grunt to copy the amber files from the location where the amber
> ZIP file was extracted into my working directory. I am copying only the
> files required for development and deployment. I grab this list using
> Fiddler.
>
> Following I am using r.js to create the single amber core file.

How do you call r.js?

> The build.js file is available at the top of this thread.
>
> I wonder if anybody was successful with this.

> I could create the file, but not sure how to invoke.
Great!

> It would be great if somebody could share with me such file.

You mean how to call it in the HTML file which uses all-in-one.js?

> It would be great if such file would be part of amber ZIP file.

Yes, indeed.

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

laci

Re: How to create a single deployment file with r.js or grunt?

I have located your example "amber-optimizer1c".
I get the picture now.
I'll submit my findings or questions a little bit later.

Hannes Hirzel

Re: How to create a single deployment file with r.js or grunt?

Thank you for doing investigations ...

I used a batch file to create the combined js file at that time

https://github.com/hhzl/amber/blob/optimizer1c/requirejs-optimizer.bat

I think that approach is still good as of now as I do not care if it
is done by grunt or not. The result is what counts...

On 4/5/14, laci <[hidden email]> wrote:

> I have located your example "amber-optimizer1c".
> I get the picture now.
> I'll submit my findings or questions a little bit later.
>
>
>
> --
> View this message in context:
> http://forum.world.st/How-to-create-a-single-deployment-file-with-r-js-or-grunt-tp4750392p4752913.html
> Sent from the Amber Smalltalk mailing list archive at Nabble.com.
>
> --
> You received this message because you are subscribed to the Google Groups
> "amber-lang" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [hidden email].
> For more options, visit https://groups.google.com/d/optout.
>

laci

Re: How to create a single deployment file with r.js or grunt?

Using your example I have the following configuration files:

amber/bin
requirejs-optimizer-deploy.bat
requirejs-optimizer-deploy.js
requirejs-optimizer-devel.bat
requirejs-optimizer-devel.js
amber/support
amber_deploy.js
amber_devel.js

Content of requirejs-optimizer-deploy.bat:
r.js.cmd -o requirejs-optimizer-deploy.js

Content of requirejs-optimizer-deploy.js:
({
baseUrl: ".",
paths: {
'amber': '../support',
'amber_vm': '../support',
'amber_css': '../css',
'amber_lib': '../bower_components',
'amber_core': '../js',
'amber_core/_source': '../st',
'jquery': '../bower_components/jquery/jquery.min',
'jquery-ui': '../bower_components/jquery-ui/ui/minified/jquery-ui.min'
},
name: "amber/amber_deploy",
out: "../support/amber-core-deploy.js"
})

Content of amber_deploy.js:
amber.js is extended with the following code

require(
["amber/deploy"],
function (smalltalk) {
document.smalltalk = smalltalk;
smalltalk.initialize({ 'transport.defaultAmdNamespace': 'portal_utilities' });

return smalltalk;
}
);

Similarly the files for development version are created.
Executing "r.js.cmd -o requirejs-optimizer-devel.js" gave an error though.

Tracing dependencies for: amber/amber_devel
Error: ENOENT, no such file or directory 'C:\TFS-Projects\Ricoh Apollo\Main\Project\Sources\Shared\Apollo Shared Library\Javascript\amber\bin\css.js'
In module tree:
amber/amber_devel
amber/devel
amber/codemirror

It looks the css.js in bin instead of codemirror.
Once that is fixed we are done.

It would be great if these scripts and the single amber core files were included in the downloadable ZIP.

laci

Re: How to create a single deployment file with r.js or grunt?

I have problem with creating and using single file for development.
You can reproduce using the following info.

Content of requirejs-optimizer-devel.bat:
r.js.cmd -o requirejs-optimizer-devel.js

Content of requirejs-optimizer-devel.js:
({
//baseUrl: ".",
paths: {
'amber': '../support',
'amber_vm': '../support',
'amber_css': '../css',
'amber_lib': '../bower_components',
'amber_core': '../js',
'amber_core/_source': '../st',
'jquery': '../bower_components/jquery/jquery.min',
'jquery-ui': '../bower_components/jquery-ui/ui/minified/jquery-ui.min'
},
name: "amber/amber_devel",
out: "../support/amber-core-devel.js"
})

Content of amber_devel.js:
amber.js is extended with the following code

require(
["amber/devel"],
function (smalltalk) {
document.smalltalk = smalltalk;
smalltalk.initialize({ 'transport.defaultAmdNamespace': 'portal_utilities' });

return smalltalk;
}
);

At executing the batch command I have received error, which said:

Tracing dependencies for: amber/amber_devel
Error: ENOENT, no such file or directory 'C:\TFS-Projects\Ricoh Apollo\Main\Project\Sources\Shared\Apollo Shared Library\Javascript\amber\bin\css.js'
In module tree:
amber/amber_devel
amber/devel
amber/codemirror

After commening out css references in devel.js and codemirror.js the batch - r.js - was successful.

Content of devel.js:
define([
'./helpers', // pre-fetch, dep of ./deploy
'./deploy', // pre-fetch, dep of ./lang
'./lang',
'jquery-ui',
'amber_lib/jquery-tabby/jquery.textarea',
'./codemirror',
//'css!amber_css/amber',
'amber_core/IDE',
'amber_core/Examples',
'amber_core/Benchfib'
], function (smalltalk) { return smalltalk; });

Content of codemirror.js:
define([
'amber_lib/codemirror/lib/codemirror',
'amber_lib/codemirror/mode/smalltalk/smalltalk',
'amber_lib/codemirror/addon/hint/show-hint'
]);

At using the file I am receiving the following error:
Error: Mismatched anonymous define() module: undefined http://requirejs.org/docs/errors.html#mismatch

Any suggestion?
Eventually the important thing is having single file for deployment.
Still I am curious how to resolve that.