Novice gulp+ Seajs Small Demo

First of all, do not say nonsense, its introduction and the author does not say more, online 100 degrees a lot;

I'm just here to write about my 2 days of seajs understanding and climb over the pit, and the realization of a small demo (purely to achieve, master please detour);

first, Environmental tools and installation

1, first, must first explain, this demo is based on Nodejs environment development, so to install Nodejs (address: https://nodejs.org/en/);

2, Next install gulp: in the case of success in the first step, install the Gulp build tool, and rely on the project to come in, but also need to install browser-sync,gulp-seajs-combo, run-sequence, and they rely on the project to come in;

After success Package.json has the following dependencies:

...

"gulp": "^3.9.1",

"browser-sync": "^2.16.0",
"gulp-seajs-combo": "^1.2.3",
"run-sequence": "^1.2.2"

...

3, to SEAJS official website to download a seajs (address: http://seajs.org/docs/#downloads), version in 2.1 or more can be downloaded after the decompression, the dist file inside the project, and renamed to seajs;

Here to download the installation of the thing is almost there, the project directory structure first posted to Everyone:

second, the introduction of SEAJS and configuration instructions;

1. HTML page

<! DOCTYPE Html>
first, See the 3 JS files at the bottom of the page introduced:
The first one, first introduced sea.js this nothing to say;
The second, the introduction of Seajs's basic configuration file config.js; Here's to say, we often use the jquery library in the project, so I've also introduced it, of course, because There's a pit here to talk to you About.
Because Seajs was developed by Yuber based on the cmd specification, The JS code follows this specification, but unfortunately, the online download of jquery does not support the CMD Specification. (the AMD Spec was supported later in the 1.7 release), so there are several ways to introduce jquery into the web, and here's how I'm going to modify the jquery file:
will be &&DEFINE.AMD deleted, and then I renamed to jquery.sea.js, indicating that SEAJS can use the jquery version;
As for the configuration file, the specific configuration of the official website is very detailed, here I only say, my demo inside the configuration
Seajs.config ({base: "./sea-module/", alias: {"jquery": "jquery/jquery.sea.js"}})       
base, which is the base path for setting sea.js;
alias, which is used to simplify the alias of the module, such as "jquery": "jquery/jquery.sea.js", when other modules introduced can be directly written require (' jquery '), of course, This process seajs will go to the base directory base to find ；
third, the introduction of entry documents;
There is also a pit, when I first searched for an article, was introduced in another way, is in the introduction of sea.js when the tag is written in a data-main attribute, as Follows:
　　　　<script src="sea/sea.js" data-config="./js/config" data-main= "./js/main"></script>            
remember, This shipment is obsolete, Seajs in the 2.1 update: remove support for Data-config/data-main. These two are the icing on the Cake. retained, seemingly to bring simplicity, but to a certain extent masked the internal mechanism. Rather let the user directly by seajs.use going to start loading Well.
therefore, do not use such a notation.
We directly in the portal file Mian.js inside Seajs.use (), and then in the page introduction, here through the use () method, to load the module in the page, it will tell the page which module to load first;
fourth, a reference between modules;
Here I wrote 2 js modules: application.js, util.js, The former introduced the latter
Application.js
Define (function (require,exports,module) {   var util = require ('./util '); var $ = require (' jquery '); function changebg () {$ (' #hello-seajs '). css ({' backgroundcolor ': util.randomcolor ()});} CHANGEBG () window.setinterval (function () {changebg ();},1500);});
Util.js
Definefunction(require,exports,module) {varUtil = {}; varColorrange = [' 0 ', ' 1 ', ' 2 ', ' 3 ', ' 4 ', ' 5 ', ' 6 ', ' 7 ', ' 8 ', ' 9 ', ' A ', ' B ', ' C ', ' D ', ' E ', ' F ']; Util.randomcolor=function(){          return' # ' +Colorrange[math.floor (math.random ()* 16)] +Colorrange[math.floor (math.random ()* 16)] +Colorrange[math.floor (math.random ()* 16)] +Colorrange[math.floor (math.random ()* 16)] +Colorrange[math.floor (math.random ()* 16)] +Colorrange[math.floor (math.random ()* 16)];        }; Module.exports=util;});
There is no need to talk more, the code is very clear;
third, the configuration of Gulp
Gulpfile.js
Plug-in Introduction
var gulp = require (' gulp '); var browsersync = require (' browser-sync '). Create (); var combo = require (' Gulp-seajs-combo '); var runsequence = require (' run-sequence '); Define file directory path var appdir = ' app ';
var distdir = ' Dist ';//js module merge
Gulp.task (' js ', function () {    gulp.src (' app/static/js/main.js ')        . pipe (combo ({            ignore: [' jquery ']        } )        . pipe (gulp.dest ('./dist/static/js '));}) Create a static server Gulp.task (' server ', function () {    browsersync.init {        server: {            baseDir: [distdir, appdir],            Index: ' html/test.html '});    /listen file change gulp.task (' watch ', function () {    gulp.watch (' app/static/js/application.js ', [' js ']);}); /task Workflow Starts//step1--build Production directory Dist/gulp.task (' build ', function (cb) {    runsequence (' js ', cb);}); /step2--open server, Real-time Monitoring
Gulp.task (' default ', function (cb) {runsequence (' server ', ' watch ', cb);});
Here's what you need to explain:
1, Browsersync can let the browser in real-time, fast response to your file changes (html, js, css, sass, less, etc.) and automatically refresh the page (so-called release your F5), but also in the pc, tablet, mobile phone and other equipment input debugging, It is highly recommended that front-end ER is used; in this demo, you use it to create a static server, http://localhost:3000; Monitor Appliction.js file changes, When we modify the Appliction.js and save the time, will be monitored to its changes, re-execute the JS task to generate a new mian.js to the Dist directory, the last browser automatically refresh;
2, gulp-seajs-combo, used to merge our JS module files. think, when we JS module more time, The number of page requests will be greatly increased, this is our front-end of a taboo, optimize the page, it is necessary to reduce the number of requests; so here, provide a plugin, gulp-seajs-combo, He can help us to merge all the modules into a main.js module, so that the end of the page only need to introduce the Main.js file, the perfect solution to this problem;
3, finally enter the project root directory, the command line input ' Gulp build ' (generate dist directory), the production environment, and then enter "gulp" to open the server, automatically opened the page test.html;
Iv. Project git address
Https://github.com/931863856/seajs
Conclusion:
This is my two days to rise, the time to study the next seajs, although this is only a small demo, but also really stepped on a lot of pits, in fact, the front-end is now the trend is, automatic construction, modular development, all just under the determination to write a small demo, hope to be useful to everyone; Loopholes are sure to exist, I hope you see the big God when you can give the younger brother to remind or correct, thank you! Thank you, Everyone.
 Novice gulp+ Seajs Small demo