首先，不说废话，它的介绍和作者就不在多说了，网上一百度一大堆；

我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑，和实现的一个小demo(纯属为了实现，高手请绕道);

一、环境工具及安装

1、首先，务必先说明，本demo是基于nodeJs环境下开发的，因此要安装nodeJs（地址：https://nodejs.org/en/）；

2、接下来安装gulp： 在第一步成功的情况下，安装gulp构建工具，并且将其依赖到项目进来；同时需要安装browser-sync，gulp-seajs-combo ,run-sequence ,且也将它们依赖到项目进来；

成功后package.json有如下依赖：

...

"gulp": "^3.9.1",

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

...

3、到seaJs 官网下载个seaJs（地址：http://seajs.org/docs/#downloads），版本在2.1以上的都可以；下载后解压，将里面的dist文件拷贝到项目，并重命名为seajs;

到这里需要下载安装的东西就差不多了，项目的目录结构先贴出来给大家：

二、seajs的引入及配置说明；

1、html页面

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<title>引用seajs</title>

	<style type="text/css">

		html,body{

			position: relative;

			height: 100%;

		}

		#hello-seajs{

			position: absolute;

			width: 300px;

			height: 100px;

			left: 0;

			top: 0;

			bottom: 0;

			right: 0;

			margin: auto;

			font-size: 26px;

			line-height: 100px;

			text-align: center;

		}

	</style>

</head>

<body>

<div id="hello-seajs">Hello seaJs</div>

<input type="text" id="ipt">

</body>

	<script src="../sea-module/seajs/sea.js"></script>

	<script src="../config.js"></script>

	<script src="../static/js/main.js"></script>

</html>

首先，看到页面底部的3个js文件引入：

　　第一个，先引入sea.js这个没有什么好说的；

　　第二个，引入seajs的基础配置文件config.js；这里要说一下，我们在项目中经常会用到jquery库，因此，我也顺便引入了，当然，是因为这里有个坑，要跟大家说一下。

　　　　因为seajs是玉伯大人基于CMD规范开发出来的，因为其js代码则要遵循此规范；然而不幸的是网上下载的jquery并不支持CMD规范，（在后来1.7版本以后支持的是AMD规范），因此，网上各种大神也对jquery的引入也提供了好几种方法，这里，我是用的方法是，将jquery文件修改一下：

即将&&define.amd删除掉即可，然后后我还重命名为jquery.sea.js,表示seaJs可以用的jquery版本；

至于配置文件，具体的配置项官网讲的很详细,这里我只说下，我的demo里面的配置

seajs.config({

	base: "./sea-module/",

	alias: {

		"jquery": "jquery/jquery.sea.js"

	}

})

　　base，即为设置sea.js的基础路径;

　　alias,则是用来简化模块的别名，如"jquery": "jquery/jquery.sea.js" , 在别的模块引入的时候就可以直接写成require('jquery')了，当然这个过程seajs会去基础目录base下找；

　　第三个，引入入口文件；

这里也有一个坑，当时我一开始搜索到一篇文章的时候，是用另一种方式引入的；是在引入sea.js的时候再标签里面写了个data-main属性，如下：

　　　　<script src="sea/sea.js" data-config="./js/config" data-main="./js/main"></script>

大家切记，这货已经过时 ，seajs在2.1版本的更新: 去除对 data-config / data-main 的支持。 这两个是锦上添花的功能。保留着，看似能带来简洁性，但一定程度上掩盖了内部机制。不如让用户直接通过 seajs.use 去启动加载的好。

因此，不要在用这样的写法了。

我们直接在入口文件mian.js 里面seajs.use（），然后在页面引入即可，这里通过 use()方法 ,来在页面中加载模块，它会告诉页面先加载哪一个模块；

　　第四个，模块间的引用；

这里我写了2个js模块： application.js , util.js , 前者引入后者

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

define(function(require,exports,module){

     var util = {};

     var colorRange = ['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;

});

这里就不用多讲了，代码很清晰；

三、gulp的配置

gulpfile.js

//插件引入
var gulp = require('gulp');

var browserSync = require('browser-sync').create();

var combo = require('gulp-seajs-combo');

var runSequence = require('run-sequence');

//定义文件目录路径

var appDir = 'app';
var distDir = 'dist';

//js模块合并
gulp.task('js',function(){

    gulp.src('app/static/js/main.js')

        .pipe(combo({

            ignore: ['jquery']

        }))

        .pipe(gulp.dest('./dist/static/js'));

})

// 创建静态服务器

gulp.task('server', function () {

    browserSync.init({

        server: {

            baseDir: [distDir, appDir],

            index: 'html/test.html'

        }

    });

});

// 监听文件改变

gulp.task('watch' , function () {

    gulp.watch('app/static/js/application.js', ['js']);

});

//任务的工作流启动

//step1 --build 生产目录 dist/

gulp.task('build', function(cb){

    runSequence('js' , cb);

});

//step2 --开启服务器，实时监听
 gulp.task('default', function(cb){ runSequence('server' , 'watch' , cb); });

　　这里需要说明一下：

　　1、Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面（所谓的释放你的F5）,还能同时在PC、平板、手机等设备下进项调试，强烈推荐各位前端er使用；在本demo中，使用它创建了个静态服务器，http://localhost:3000;并且，监听appliction.js文件的变化，当我们修改appliction.js并保存的时候，就会被监听到其变化，重新执行js任务生成新的mian.js到dist目录下，最后浏览器自动刷新；就是这么爽！

　　2、gulp-seajs-combo，用来合并我们的js模块文件。想想，当我们js模块多的时候，页面请求的数量也就随之大大增加，这个是我们前端的一个忌讳，优化页面的时候，就要减少请求数；所以这里，提供了个插件，gulp-seajs-combo，他可以帮我们把所有模块合并到一个main.js模块上去；这样，页面最后只需要引入main.js文件即可，完美的解决了这个问题；

　　3、最后进入项目根目录，在命令行里输入'"gulp build"  (生成dist目录)，就生成生产环境；然后输入 "gulp" 开启服务器，自动打开页面test.html;

四、项目git地址

https://github.com/931863856/seajs

结束语：

本文是我这两天兴起，就抽空研究了下seaJs；虽然这只是个小demo，但是也真的踩了不少坑；其实前端现在潮流就是，自动化构建，模块化开发，所有才下了决心写个小demo，希望对大家有用；同时毕竟这是我的一个小小的研究，漏洞肯定是存在的，希望各位大神看到的时候，可以给小弟提醒或者指正下，感激不尽！谢谢大家~

新手 gulp+ seajs 小demo的更多相关文章

  1. 金融新手投标模块布局小Demo

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 11.Python使用Scrapy爬虫小Demo（新手入门）

    1.前提:已安装好scrapy,且已新建好项目,编写小Demo去获取美剧天堂的电影标题名 2.在项目中创建一个python文件 3.代码如下所示: import scrapy class movies ...

  3. React问答小demo

    在学习react初期,看了一些视频和资料,react基础知识差不多学完,跟着网上的一个教程,做了一个小型的问答demo. 需求看图说: 1.点击"添加"按钮,显示问题输入表单,再次 ...

  4. 学习react，动手实现一个小demo（仿知乎问答）

    学习react也有一周的时间,最近自己做了个仿知乎问答的小demo,项目源码在github上:https://github.com/yang302/reactQa 使用技术:bower+gulp+re ...

  5. Android项目页面跳转小Demo

    近期在做Android项目的开发,刚刚接触会有非常多新东西须要学习,从环境的搭建到语言的熟悉都是须要一步步完毕的,接下来就拿一个页面跳转的样例来和大家分享一下自己的心得体会. 採用的架构: Demo中 ...

  6. RPC框架学习+小Demo实例

    一.什么是RPC协议? 全称:远程过程调度协议 效果:使消费者向调用本地方法一样调用远程服务方法,对使用者透明 目前常用:Dubbo.Thirft.Sofa.... 功能: 建立远程通信(socket ...

  7. Nancy之基于Nancy.Hosting.Self的小Demo

    继昨天的Nancy之基于Nancy.Hosting.Aspnet的小Demo后, 今天来做个基于Nancy.Hosting.Self的小Demo. 关于Self Hosting Nancy,官方文档的 ...

  8. Nancy之基于Nancy.Owin的小Demo

    前面做了基于Nancy.Hosting.Aspnet和Nancy.Hosting.Self的小Demo 今天我们来做个基于Nancy.Owin的小Demo 开始之前我们来说说什么是Owin和Katan ...

  9. Nancy之基于Self Hosting的补充小Demo

    前面把Hosting Nancy with ASP.NET.Self Hosting Nancy和Hosting Nancy with OWIN 以demo的形式简单描述了一下. 这篇是为Self H ...

随机推荐

  1. Sublime 3 如何配置SVN插件

    在sublime里面安装svn的插件,就可以在sublime的操作界面里面进行相关svn操作,这样就不用再回到文件系统中,进行相关svn的操作. 1.在进入sublime界面后,点击顶部菜单“Pref ...

  2. 逍遥安卓连接androidstudio

    cmd 命令 D:\sdk\platform-tools>adb connect 127.0.0.1:21503

  3. 关于display：none 和visibility:hidden 的区别

    1.占据空间 :none 隐藏后不占据空间 visibility占据空间 2.回流与渲染:none产生回流与渲染 ? 可以通过oprea中的Profiler 工具测试. 关于回流的详细介绍:http: ...

  4. 配置Samba共享服务器

    安装samba: sudo apt-get install samba samba-common 由于是挂载另一个磁盘,并作为共享文件存放地: 列出磁盘名和ID air@air-device:~$ s ...

  5. JSONArray的应用

    从json数组中得到相应java数组,如果要获取java数组中的元素,只需要遍历该数组. /** * 从json数组中得到相应java数组 * JSONArray下的toArray()方法的使用 * ...

  6. ModPagespeed for Apache安装配置

    1.安装ModPagespeed #32位wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_i38 ...

  7. SQL 常用脚本

    SELECT o.name AS tableName,c.name AS colName,k.keyno AS sort FROM sysindexes i JOIN sysindexkeys k O ...

  8. vnc远程运行3D游戏

    使用的版本:VNC-5.2.3-Windows.exe   vnc官网 安装的过程中需要输入license key,以下给出一些enterprise license(最大权限的License): K5 ...

  9. Flashback Data Archive ( Oracle Total Recall ) introduced in 11g

    Flashback Data Archive feature is part of Oracle Total Recall technology. Flashback Data Archive fea ...

  10. Beginning Scala study note(9) Scala and Java Interoperability

    1. Translating Java Classes to Scala Classes Example 1: # a class declaration in Java public class B ...