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

我在这里只是来写写我这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. 文件描述符、文件表项指针、inode节点的关系

    内核使用3种数据结构表示打开的文件,他们之间的关系决定了在文件共享方面一个进程对另一个进程的影响. (1) 每个进程在进程表中都有一个纪录项,纪录项中包含一张打开文件描述符表,每个文件描述符各占一项, ...

  2. 模拟搭建Web项目的真实运行环境（四）

    本篇介绍如何部署mongodb环境,主要分为三个部分: 第一部分 介绍如何在ubuntu下安装mongodb, 第二部分 介绍如何在windows下安装使用MongoChef客户端, 第三部分 介绍在 ...

  3. WordPress一键部署网站

    每个人心里都有一个建站梦,所以今天作为我第一篇文章,就给大家圆了这场梦. 今天我来详细的一步一步带领大家利用WordPress程序来建立自己的小站以及解决直接域名访问(本地安装wordpress请阅读 ...

  4. 素数的平方阶群必为Abel群

    定理  设$p$为素数,则$p^2$阶群$G$必为Abel群.

  5. 手把手教你玩转nginx负载均衡（二）----安装虚拟机操作系统

    引言 在上一篇,我们组装好了虚拟机的硬件部分,那么现在我们就要把操作系统装上了,既然是服务器,那么安装linux操作系统是个比较好的选择,如果你喜欢的话,安装windows也是没有任何问题的 我这里选 ...

  6. 使用Selector改变TextView的字体颜色textColor的方法

    先上Selector文件,名字为singer_fragment_top_text_style.xml, <?xml version="1.0" encoding=" ...

  7. Drools 查询学习

    Drools 查询学习查询以 query 关键字开始,以 end 关键字结束,在 package 当中一个查询要有唯一的名称,查询的内容就是查询的条件部分,条件部分内容的写法与规则的 LHS 部分写法 ...

  8. 微信开发笔记：获取用户openid，以及用户头像昵称等信息

    微信开发的时候有一个很便利的途径来进行一个用户的一步注册登录,就是使用用户的微信信息来直接进行登陆,可以省去很多不必要的麻烦.那具体这些信息是如何来获取的呢? 首先呢,我们需要对微信进行一个授权,让微 ...

  9. 解决EditText和ScrollView滑动冲突问题

    该类需要调用 OnTouchListener接口 黄色部分是需要更改部分,改为自己的edittext@Override public boolean onTouch(View view, Motion ...

  10. xml_TO_object

    一般对于开发人员拿到的xml文件都是配置文件,所以对于我们来说,最主要要做的事情是将xml的内容封装成对象. 下面展示代码 package javaDom4j; import java.util.Ar ...