About merging compressed SEAJS modules with Gulp

Now a lot of people are using SEAJS to develop projects, SEAJS easy to use, easy to operate. But in the late to do the merger and compression when it was a huge hole, but there must be someone to fill the pit. So it took nearly one weeks to fill out the pit, and now I will share some of pits's experience with you. on the Internet to search the relevant information, have to say that the online information a lot of pits (are copied others ...) ), said many are tears. The following summarizes the found SEAJS merger compression of several ways, let the pit of the people as soon as possible to take off the pits.

The first type:

On Seajs's official website there is a Seajs-combo plugin that he comes with. It looks good, and minify almost. This method is relatively simple and rough: Download a JS file reference to the page, it can be used.

The second type:

With Gulp Merge compression Seajs module, this kind of force is relatively high (such as can not install forcing that and salted fish what difference ~).

Using Gulp to merge compressed Seajs, there are many related modules on the Internet. Many modules have been tried, but the real fit is not much. Let's first talk about merging this piece: Gulp-seajs-combo and Gulp-seajs-combine, the two easy-to-learn modules. Let's talk about what the file structure is for all two of these modules.

Gulp-seajs-combo:

Gulp Application--

File structure--main part a.js, call file B.js\c.js\d.js (D.js is load on demand):

If the page calls A.js before the merge is not merged, it can be used normally. But can the a.js under the combined dist/js be used normally? Let's take a look at the merged a.js file:

Good, file: A.js\b.js\c.js has been merged into the same file and automatically named it by path. However, the page does not work properly when it calls the A.js file. This is because the modules are in the same file, and Seajs doesn't know which module to run. If we add seajs.use ("a") to the back of this file, we can use it normally. (This approach is very lame, but it is a method.) OK, here should be someone will say, that we in A.js file add a seajs.use ("a"); This is a good idea, we can test it:

Gulp Jscombo found an error: The error content is a.js file cannot be found, because the package itself is a a.js file, in the A.js file in the reference to the A.js file is certainly not found.

So what is the result of running? The A.js file is duplicated, although there is seajs.use (' a ') on the page, but the B.js\c.js file is not merged, usually we will say: However, there is no egg!

So what should be the right way to use it? A portal file is required to tell it what module the file is first running on, but the portal cannot be written in its own module. So there is main.js this entry file.
Modify the next gulp configuration to point the path of the package merge to Main.js

Main.js said so.

Run under Gulp Jscombo look at the results

Perfect! At this point the page reference combo in the main.js can be used normally. See here I wonder if you have learned to merge your seajs with Gulp-seajs-combo?
Gulp-seajs-combo requires the entry file to be detached from the main file,在一些已经成型的项目上There are more than n JS files, online packaging and offline development version of the path to the corresponding should match into the directory path switch is good to switch test. For example, a site:

If we are adding a root portal file and want to change the JS name referenced by the original page, isn't that a big increase in your labor? This labor is not glorious, but in self-mutilation ~ (feelings I this is to die ah ...) ）。 What about that?
At this time Gulp-seajs-combine on the debut of the Shiny.

  < Span class= "KWD" >< Span class= "PLN" >< Span class= "pun" >< Span class= "pun" >< Span class= "pun" >gulp-seajs-combine       

gulp应用——

File structure--main part a.js, call file B.js\c.js\d.js (D.js is load on demand):

I suppose you've noticed that, yes. is to write the entry in its own file. So let's run a little bit. What about the results of jscombine compression? Let's see.

hahaha, tremble. At this point we just need to set the path below the line to the SRC folder, the path on the line for the Dist folder can be reached online and offline synchronization, just switch the configuration path can be back to test.

When you see this, you should know how to merge your SEAJS projects.

To compress this piece, you can use gulp-uglify This module can be used with (Gulp-seajs-combo or gulp-seajs-combine):

So the final result of merging compression is this:

Use Gulp-uglify to remember to exclude confusing keyword, otherwise will seajs ' require ', ' exports ', ' module ' also to confuse, this will let the file error can not run OH.

About merging compressed SEAJS modules with Gulp