Gulp Solution Requirejs

Read Catalogue

• First, Amendment 1:
• Ii. Amendment 2:
• Third, Revision 3:

Read Catalogue

• Gulp resolving front-end cache issues for REQUIREJS projects (ii)
• Objective
• 2, modify the Require.js
• 3. Modify Gulp-rev and Gulp-rev-collector
• 4. Testing
• 5. Summary

Back to the table of contents preface

In this section, we primarily address several of the issues mentioned at the end of the previous section, "Using Gulp to solve the front-end caching of REQUIREJSS projects" (i):

1. 1. When the JS file introduced by Require-config.js is modified, it is not updated to
   2. Each time the Gulp run finished will generate a new file, the development environment is done to clear the Dist directory processing, but for the general corporate server, published to the production environment, it is not possible to publish every time the dist to do empty processing, the file will only accumulate more

Sneak peek, poke link Download demo : http://pan.baidu.com/s/1skDm2Up

Back to table 2, modify Require.js

To replace the file name in the first section, if you want to be able to replace it in Require-config.js, you should add a suffix to the path file corresponding to the Requirejs parameter path, such as:

2.1. Switch the project root directory to src

Run html/index.html (note in order to debug convenient, at this time we use JS uncompressed version of the Require), when the console error:

Requirejs has been automatically added to each module by default suffix, see the official note, you will find this sentence: "Requirejs default assumes that all dependent resources are JS script, so there is no need to add the module ID". js "suffix, Requirejs will automatically append the suffix "when parsing the module ID to path."

What to do, we must step over this, MO, follow me, in the wrong place breakpoint debugging:

You will see that the value of node.src is the value Requirejs dynamically inserted, and first insert the code in the Red box section:

var Srcarr = Node.src.split ('. js '); Srcarr[1] {    node.src=srcarr[0]+ '. js ' +srcarr[1]}else{    node.src=srcarr[0]+ '. js '}

Probably means that if there are two ". js", take one; we end up with a similar ". js?v=1.001" format, so use srcarr[1] to save the parameters.

After modifying, and then refreshing the page, there appears the "good! Successfully loading Index.js"indicates that the first problem is resolved successfully.

2.2. Switch the project root directory to dist

Run the Five Gulp commands described in the previous section, run html/index.html, and look at the console to see that the JS introduced by Requirejs is now also modified by the Rev-manifest.json based on the reference:

So far, the 1th problem left over from the previous section has been solved successfully.

Back to Catalog 3, modify Gulp-rev and Gulp-rev-collector

So far, gulp has solved the cache by generating a new file every time, and what we end up needing is to update it by adding parameters, and we need to modify the point file.

Back to Top Revision 1:

Open itnode_modules\gulp-rev\index.js，将第144行 manifest[originalFile] = revisionedFile;
更新为: manifest[originalFile] = originalFile + ‘?v=‘ + file.revHash;

Back to top modification 2:

Open itnodemodules\gulp-rev\nodemodules\rev-path\index.js，将10行 return filename + ‘-‘ + hash + ext;
更新为: return filename + ext;

Back to top modification 3:

Open node_modules\gulp-rev-collector\index.js, will be 31 lines if (!_.isstring (Json[key]) | | path.basename (Json[key]). Replace (new RegExp (Opts.revsuffix), ')!== path.basename (key)) {
Updated to:if ( !_.isString(json[key]) || path.basename(json[key]).split(‘?‘)[0] !== path.basename(key) ) {

Back to catalog 4, test

five commands to run a gulp

Take a look at one of the Rev-manifest.json:

Look at the dist/html/index.html:

look again at the page:

At this point, the 2nd problem solved smoothly. All that remains is to compress the modified require.js into the min version .

Back to table 5, summary

In general, the way we solve caching problems is to update the resource files by modifying the parameters.

The core of these two sections is as follows:

1. Generate Rev-manifest.json that need to be replaced by gulp
2. Modify the Require.js source code to support Requirejs introduced by the file can also take parameters
3. Modify Gulp-rev and Gulp-rev-collector so that references are updated as parameters, not every time a new file is updated

Gulp Solution Requirejs