新手 gulp+ seajs 小demo

時間 2019-12-04

標籤新手 gulp seajs demo 欄目 JavaScript 简体版

原文原文鏈接

首先，不說廢話，它的介紹和做者就不在多說了，網上一百度一大堆；javascript

我在這裏只是來寫寫我這2天抽空對seajs的瞭解並爬過的坑，和實現的一個小demo(純屬爲了實現，高手請繞道);css

1、環境工具及安裝html

一、首先，務必先說明，本demo是基於nodeJs環境下開發的，所以要安裝nodeJs（地址：https://nodejs.org/en/）；前端

二、接下來安裝gulp：在第一步成功的狀況下，安裝gulp構建工具，而且將其依賴到項目進來；同時須要安裝browser-sync，gulp-seajs-combo ,run-sequence ,且也將它們依賴到項目進來；java

成功後package.json有以下依賴：node

...jquery

"gulp": "^3.9.1",git

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

...json

三、到seaJs 官網下載個seaJs（地址：http://seajs.org/docs/#downloads），版本在2.1以上的均可以；下載後解壓，將裏面的dist文件拷貝到項目，並重命名爲seajs;

到這裏須要下載安裝的東西就差很少了，項目的目錄結構先貼出來給你們：

2、seajs的引入及配置說明；

一、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屬性，以下：

你們切記，這貨已通過時，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;
});

這裏就不用多講了，代碼很清晰；

3、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); });

　　這裏須要說明一下：

　　一、Browsersync能讓瀏覽器實時、快速響應您的文件更改（html、js、css、sass、less等）並自動刷新頁面（所謂的釋放你的F5）,還能同時在PC、平板、手機等設備下進項調試，強烈推薦各位前端er使用；在本demo中，使用它建立了個靜態服務器，http://localhost:3000;而且，監聽appliction.js文件的變化，當咱們修改appliction.js並保存的時候，就會被監聽到其變化，從新執行js任務生成新的mian.js到dist目錄下，最後瀏覽器自動刷新；就是這麼爽！

　　二、gulp-seajs-combo，用來合併咱們的js模塊文件。想一想，當咱們js模塊多的時候，頁面請求的數量也就隨之大大增長，這個是咱們前端的一個忌諱，優化頁面的時候，就要減小請求數；因此這裏，提供了個插件，gulp-seajs-combo，他能夠幫咱們把全部模塊合併到一個main.js模塊上去；這樣，頁面最後只須要引入main.js文件便可，完美的解決了這個問題；

　　三、最後進入項目根目錄，在命令行裏輸入'"gulp build" (生成dist目錄)，就生成生產環境；而後輸入 "gulp" 開啓服務器，自動打開頁面test.html;

4、項目git地址

https://github.com/931863856/seajs

結束語：

本文是我這兩天興起，就抽空研究了下seaJs；雖然這只是個小demo，可是也真的踩了很多坑；其實前端如今潮流就是，自動化構建，模塊化開發，全部才下了決心寫個小demo，但願對你們有用；同時畢竟這是個人一個小小的研究，漏洞確定是存在的，但願各位大神看到的時候，能夠給小弟提醒或者指正下，感激涕零！謝謝你們~

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。