Geek Answers Handbook

Creating a second javascript file with Yeoman

I am trying to use yoman in my project, and I ran into a problem while trying to create it using Grunt:

I have application.js, which is the main file used by the application using require.js. After starting the Grunt build, the js file is created in the dist folder, concatenated and minimized.

The problem is that I am trying to create a second javascript file (e.g. application2.js) that will be used on another page of the application. After starting Grunt, the file is created but empty. I tried using the same js as the one that works to eliminate some js or require.js problems, but this is the same.

The only thing I can understand is that somewhere in Grunt is configured to process only this file, and in fact, when I start, I see the following in the console:

Found a block: <!-- build:js scripts/application.js --> <script data-main="scripts/application" src="components/requirejs/require.js"></script> <!-- endbuild --> Updating config with the following assets: - dist/scripts/application.js Found a block: <!-- build:js scripts/application2.js --> <script data-main="scripts/application2" src="components/requirejs/require.js"></script> <!-- endbuild --> Updating config with the following assets: - dist/scripts/application2.js Configuration is now: cssmin: { dist: {} } concat: { 'dist/scripts/application.js': [ 'dist/scripts/application.js' ], 'dist/scripts/vendor/modernizr.js': [ 'app/components/modernizr/modernizr.js' ], 'dist/scripts/application2.js': [ 'dist/scripts/application2.js' ] } uglify: { 'dist/scripts/application.js': 'dist/scripts/application.js', 'dist/components/requirejs/require.js': 'app/components/requirejs/require.js', 'dist/scripts/vendor/modernizr.js': 'dist/scripts/vendor/modernizr.js', 'dist/scripts/application2.js': 'dist/scripts/application2.js' } requirejs: { dist: { options: { baseUrl: 'app/scripts', optimize: 'none', preserveLicenseComments: false, useStrict: true, wrap: true, uglify2: {}, name: 'application', out: 'dist/scripts/application.js', mainConfigFile: 'app/scripts/application.js' } } } Running "requirejs:dist" (requirejs) task >> RequireJS optimizer finished Uncompressed size: 1361156 bytes. Compressed size: 304370 bytes gzipped.

Concat and Uglify tasks relate to the second javascript file, but requirejs. I tried changing the "mainConfigFile" property to include both, but it keeps getting more ...

Any ideas?

+4
source share
1 answer

I first wonder why you are trying to define multiple application files on your yoman system? I think this is for multiple HTML pages? Or you have two:

 <script data-main="..." src="components/requirejs/require.js"></script>

in one HTML file?

As for the fix for this: mainConfigFile is generated using the "out" parameter, so setting it up here will not work.

The requirejs section requires a "dist" section for each file. They also need to provide a name and specify manually. Not sure if this is a bug or supposed behavior.

 requirejs: { dist1: { options: { name: 'application', out: 'dist/scripts/application.js', ...} }, dist2: { options: { name: 'application2', out: 'dist/scripts/application2.js', ...

You also need to add two separate HTML files to useminPrepare, but it looks like you have already done this OR you are linking application and application2 in one HTML file (you don’t know what the consequences of the two requirejs configurations in one html file will be).

  useminPrepare: { html: ['<%= yeoman.app %>/index.html','<%= yeoman.app %>/index2.html'], options: { dest: '<%= yeoman.dist %>' } },

For posterity, I also added two scripts to configure bower config, but I can’t be 100% sure that it even matters:

  bower: { all: { rjsConfig: ['<%= yeoman.app %>/scripts/application.js','<%= yeoman.app %>/scripts/application2.js'] } }

Here is my final configuration output: http://pastie.org/7321492

+5
source

More articles:


All Articles