新手 gulp+ seajs 小demo

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

我在这里只是来写写我这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,希望对大家有用;同时毕竟这是我的一个小小的研究,漏洞肯定是存在的,希望各位大神看到的时候,可以给小弟提醒或者指正下,感激不尽!谢谢大家~

时间: 2024-07-31 14:30:43

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

gulp 的入门小Demo

首先需要npm安装所需的模块,我的小demo安装了以下模块 整个项目结构如下 接下来上代码 var gulp = require('gulp'), imagemin = require('gulp-imagemin'), minifycss = require('gulp-minify-css'), uglify = require('gulp-uglify'), rename = require('gulp-rename'), concat = require('gulp-concat'),

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>布局小Demo</title> </head> <style> *{margin: 0;padding: 0; font-size: 12px; color: #646464;} .clear{ clear: both;} dl,ul

React问答小demo

在学习react初期,看了一些视频和资料,react基础知识差不多学完,跟着网上的一个教程,做了一个小型的问答demo. 需求看图说: 1.点击"添加"按钮,显示问题输入表单,再次点击,隐藏表单.同时,点击"取消"按钮,隐藏表单. 2.输入问题标题和内容后,点击"确认"按钮,将问题显示在下方(按照投票数从高到低). 3.每个问题有加票和减票功能,在点击的同时,将问题按照投票数从高到低排序. 实现过程: 一.开发环境和工具 1.npm init (

Android项目页面跳转小Demo

近期在做Android项目的开发,刚刚接触会有非常多新东西须要学习,从环境的搭建到语言的熟悉都是须要一步步完毕的,接下来就拿一个页面跳转的样例来和大家分享一下自己的心得体会. 採用的架构: Demo中採用的是src/res/Manifest File架构.因为自己是新手.就依照这个传统的架构来做了. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDUwODgyNg==/font/5a6L5L2T/fontsize/400/fill/I0JBQ

Scrapy爬虫小demo总结

一. Scrapy入坑. a)       Scrapy的安装. 这个没什么可讲的,网上一大把. 注意的问题,可能我下载的是32位的python,出现了pywin32没法用的情况,这个直接pip install pypiwin32 就好. b)       安装验证. scrapy genspider baidu www.baidu.com 建立一个爬百度的爬虫. scrapy crawl baidu 成功爬取数据. c)        Scrapy项目创建: 首先进入要创建项目的目录:cd x

Nancy之基于Self Hosting的补充小Demo

前面把Hosting Nancy with ASP.NET.Self Hosting Nancy和Hosting Nancy with OWIN 以demo的形式简单描述了一下. 这篇是为Self Hosting Nancy.和Owin 下面的Self Hosting作个补充. 首先是Self Hosting Nancy的补充: 这里主要是介绍一下Topshelf 官网:http://topshelf-project.com/ GitHub地址:https://github.com/Topshe

用backbone实现的一个MVC的小demo

一.Apache配置 本实例需要使用php支持.要现在Apache中配置虚拟目录,在Apache下的httpd-vhosts.conf文件中添加如下代码 <VirtualHost *:80> DocumentRoot "D:/htdocs/backbone_demo" ServerName www.backbonedemo.cn </VirtualHost> 在windows的hosts文件中添加配置,hosts文件的位置在c:\windows\system32

结对项目小DEMO

这次小DEMO主要实现下面两个功能: 实现两个页面的相互跳转 通过多线程实现网络发送请求 本人负责界面与说明文档编写,搭档负责java代码的具体实现. xml代码: 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_

Nancy之基于Nancy.Owin的小Demo

前面做了基于Nancy.Hosting.Aspnet和Nancy.Hosting.Self的小Demo 今天我们来做个基于Nancy.Owin的小Demo 开始之前我们来说说什么是Owin和Katana 什么是Owin呢? 官网地址:http://owin.org OWIN在.NET Web Servers与Web Application之间定义了一套标准接口,OWIN的目标是用于解耦Web Server和Web Application. 什么是Katana呢? 官网地址:http://kata