jqury.pepとjquery-uiとの連携がうまくいかない

jquery.pepで動かせる要素をリサイズできる仕組みを作りたいと思っています。

質問１
うまくいきません。考え方に間違いがあるのでしょうか。ご指摘いただけるとありがたいです。
※ライブラリがローカル保存になっていて申し訳ない。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>jquery.pep base demo</title>
6
7    <!-- Load local jQuery.  -->
8    <script src="src/jquery.js"></script>
9	<script src="src/jquery-ui.js"></script>
10	<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css">
11	<script src="src/jquery.ui.touch-punch.js"></script>
12	<script src="src/jquery.pep.js"></script>
13
14    <script type="text/javascript">
15      $(document).ready(function(){
16		$('#pep').resizable();
17        $('.pep').pep({
18		start: function(ev, obj) {
19			if($(ev.target).hasClass('ui-resizable-handle')) {
20			obj.options.stop();
21			}
22		}
23		});
24      });
25	  
26    </script>
27	
28    <style type="text/css">
29      .pep{ width: 200px; height: 200px; background: blue; }
30    </style>
31  </head>
32
33  <body>
34    <div id="pep" class="pep"></div>
35
36
37  </body>
38
39</html>