Skip to content

Commit 0594bb7

Browse files
huang303513huang303513
committed
update
1 parent 64858f3 commit 0594bb7

File tree

26 files changed

+318
-0
lines changed

26 files changed

+318
-0
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ ajax相关学习参考韩顺平的视频学习、讲的非常详细。具体源
88
[Webpack傻瓜式指南（一）](https://zhuanlan.zhihu.com/p/20367175?f3fb8ead20=5ee5bdc2a3f7c3339c3869ca871070e7)</br>
99
[Webpack傻瓜式指南系列](https://github.com/vikingmute/webpack-for-fools)</br>
1010
[Webpack中文指南](http://wiki.jikexueyuan.com/project/webpack-handbook/)</br>
11+
[前端构建工具gulp入门教程](https://segmentfault.com/a/1190000000372547)</br>
1112

1213
##iOS原生代码与html5交互
1314
OC与JS交互Demos里面是这个相关的源码<br/>

‎WebPack学习/WebPack经典入门学习/WebPack.zip

-14.4 MB
Binary file not shown.

‎前端构建工具/WebPack学习/WebPack经典入门学习/WebPack/builds/bundle.js

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
/******/ (function(modules) { // webpackBootstrap
2+
/******/ // The module cache
3+
/******/ var installedModules = {};
4+
5+
/******/ // The require function
6+
/******/ function __webpack_require__(moduleId) {
7+
8+
/******/ // Check if module is in cache
9+
/******/ if(installedModules[moduleId])
10+
/******/ return installedModules[moduleId].exports;
11+
12+
/******/ // Create a new module (and put it into the cache)
13+
/******/ var module = installedModules[moduleId] = {
14+
/******/ exports: {},
15+
/******/ id: moduleId,
16+
/******/ loaded: false
17+
/******/ };
18+
19+
/******/ // Execute the module function
20+
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
21+
22+
/******/ // Flag the module as loaded
23+
/******/ module.loaded = true;
24+
25+
/******/ // Return the exports of the module
26+
/******/ return module.exports;
27+
/******/ }
28+
29+
30+
/******/ // expose the modules object (__webpack_modules__)
31+
/******/ __webpack_require__.m = modules;
32+
33+
/******/ // expose the module cache
34+
/******/ __webpack_require__.c = installedModules;
35+
36+
/******/ // __webpack_public_path__
37+
/******/ __webpack_require__.p = "";
38+
39+
/******/ // Load entry module and return exports
40+
/******/ return __webpack_require__(0);
41+
/******/ })
42+
/************************************************************************/
43+
/******/ ([
44+
/* 0 */
45+
/***/ function(module, exports, __webpack_require__) {
46+
47+
import './styles.scss';
48+
49+
if (document.querySelectorAll('a').length) {
50+
!/* require.ensure */(() => {
51+
const Button = __webpack_require__(1);
52+
const button = new Button('google.com');
53+
54+
button.render('a');
55+
}(__webpack_require__));
56+
}
57+
58+
if (document.querySelectorAll('h1').length) {
59+
!/* require.ensure */(() => {
60+
const Header = __webpack_require__(2);
61+
62+
new Header().render('h1');
63+
}(__webpack_require__));
64+
}
65+
66+
/***/ },
67+
/* 1 */
68+
/***/ function(module, exports) {
69+
70+
import $ from 'jquery';
71+
import template from './Button.html';
72+
import Mustache from 'mustache';
73+
import './Button.scss';
74+
75+
export default class Button {
76+
constructor(link) {
77+
this.link = link;
78+
}
79+
80+
onClick(event) {
81+
event.preventDefault();
82+
alert(this.link);
83+
}
84+
85+
render(node) {
86+
const text = $(node).text();
87+
88+
// Render our button
89+
$(node).html(Mustache.render(template, {
90+
text
91+
}));
92+
93+
// Attach our listeners
94+
$('.button').click(this.onClick.bind(this));
95+
}
96+
}
97+
98+
/***/ },
99+
/* 2 */
100+
/***/ function(module, exports) {
101+
102+
import $ from 'jquery';
103+
import Mustache from 'mustache';
104+
import template from './Header.html';
105+
import './Header.scss';
106+
107+
export default class Header {
108+
render(node) {
109+
const text = $(node).text();
110+
111+
$(node).html(Mustache.render(template, { text }));
112+
}
113+
}
114+
115+
/***/ }
116+
/******/ ]);

‎前端构建工具/WebPack学习/WebPack经典入门学习/WebPack/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" href="builds/bundle.css">
5+
</head>
6+
<body>
7+
<h1>My title</h1>
8+
<a>Click me</a>
9+
10+
<script src="builds/bundle.js"></script>
11+
</body>
12+
</html>

‎前端构建工具/WebPack学习/WebPack经典入门学习/WebPack/package.json

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "WebPack",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"keywords": [],
10+
"author": "",
11+
"license": "ISC",
12+
"dependencies": {
13+
"jquery": "^3.0.0",
14+
"mustache": "^2.2.1"
15+
},
16+
"devDependencies": {
17+
"babel-core": "^6.9.1",
18+
"babel-loader": "^6.2.4",
19+
"babel-preset-es2015": "^6.9.0",
20+
"css-loader": "^0.23.1",
21+
"html-loader": "^0.4.3",
22+
"node-sass": "^3.7.0",
23+
"sass-loader": "^3.2.0",
24+
"style-loader": "^0.13.1",
25+
"webpack": "^1.13.1"
26+
}
27+
}

‎前端构建工具/WebPack学习/WebPack经典入门学习/WebPack/src/components/Button.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<a class="button" href="{{link}}">{{text}}</a>

‎前端构建工具/WebPack学习/WebPack经典入门学习/WebPack/src/components/Button.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import $ from 'jquery';
2+
import template from './Button.html';
3+
import Mustache from 'mustache';
4+
import './Button.scss';
5+
6+
export default class Button {
7+
constructor(link) {
8+
this.link = link;
9+
}
10+
11+
onClick(event) {
12+
event.preventDefault();
13+
alert(this.link);
14+
}
15+
16+
render(node) {
17+
const text = $(node).text();
18+
19+
// Render our button
20+
$(node).html(
21+
Mustache.render(template, {
22+
text
23+
})
24+
);
25+
26+
// Attach our listeners
27+
$('.button').click(this.onClick.bind(this));
28+
}
29+
}

‎前端构建工具/WebPack学习/WebPack经典入门学习/WebPack/src/components/Button.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.button {
2+
background: tomato;
3+
color: white;
4+
}

‎前端构建工具/WebPack学习/WebPack经典入门学习/WebPack/src/components/Header.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<header class="header">{{text}}</header>

‎前端构建工具/WebPack学习/WebPack经典入门学习/WebPack/src/components/Header.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import $ from 'jquery';
2+
import Mustache from 'mustache';
3+
import template from './Header.html';
4+
import './Header.scss';
5+
6+
export default class Header {
7+
render(node) {
8+
const text = $(node).text();
9+
10+
$(node).html(
11+
Mustache.render(template, {text})
12+
);
13+
}
14+
}

‎前端构建工具/WebPack学习/WebPack经典入门学习/WebPack/src/components/Header.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.header {
2+
font-size: 2rem;
3+
}

‎前端构建工具/WebPack学习/WebPack经典入门学习/WebPack/src/index.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import './styles.scss';
2+
3+
if (document.querySelectorAll('a').length) {
4+
require.ensure([], () => {
5+
const Button = require('./Components/Button');
6+
const button = new Button('google.com');
7+
8+
button.render('a');
9+
}, 'button');
10+
}
11+
12+
if (document.querySelectorAll('h1').length) {
13+
require.ensure([], () => {
14+
const Header = require('./Components/Header');
15+
16+
new Header().render('h1');
17+
}, 'header');
18+
}
19+
20+

‎前端构建工具/WebPack学习/WebPack经典入门学习/WebPack/src/styles.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
body {
2+
font-family: sans-serif;
3+
background: darken(white, 0.2);
4+
background-image: url("../img/puppy.jpg");
5+
background-size: cover;
6+
}

‎前端构建工具/WebPack学习/WebPack经典入门学习/WebPack/webpack.config.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
module.exports = {
2+
entry: './src',
3+
output: {
4+
path: 'builds',
5+
filename: 'bundle.js',
6+
},
7+
module: {
8+
loaders: [{
9+
test: /\.js/,
10+
loader: 'babel',
11+
include: __dirname + '/src',
12+
}, {
13+
test: /\.scss/,
14+
loader: 'style!css!sass',
15+
// Or
16+
loaders: ['style', 'css', 'sass'],
17+
}, {
18+
test: /\.html/,
19+
loader: 'html',
20+
}],
21+
}
22+
};

‎WebPack学习/Webpack中文指南/bundle.js renamed to ‎前端构建工具/WebPack学习/Webpack中文指南/bundle.js

File renamed without changes.

‎WebPack学习/Webpack中文指南/entry.js renamed to ‎前端构建工具/WebPack学习/Webpack中文指南/entry.js

File renamed without changes.

‎WebPack学习/Webpack中文指南/index.html renamed to ‎前端构建工具/WebPack学习/Webpack中文指南/index.html

File renamed without changes.

‎WebPack学习/Webpack中文指南/module.js renamed to ‎前端构建工具/WebPack学习/Webpack中文指南/module.js

File renamed without changes.

‎WebPack学习/Webpack中文指南/moduleA.js renamed to ‎前端构建工具/WebPack学习/Webpack中文指南/moduleA.js

File renamed without changes.

‎WebPack学习/Webpack中文指南/moduleB.js renamed to ‎前端构建工具/WebPack学习/Webpack中文指南/moduleB.js

File renamed without changes.

‎WebPack学习/Webpack中文指南/package.json renamed to ‎前端构建工具/WebPack学习/Webpack中文指南/package.json

File renamed without changes.

‎WebPack学习/Webpack中文指南/style.css renamed to ‎前端构建工具/WebPack学习/Webpack中文指南/style.css

File renamed without changes.

‎WebPack学习/Webpack中文指南/webpack.config.js renamed to ‎前端构建工具/WebPack学习/Webpack中文指南/webpack.config.js

File renamed without changes.

‎WebPack学习/Webpack中文指南/使用命令列表.txt renamed to ‎前端构建工具/WebPack学习/Webpack中文指南/使用命令列表.txt

File renamed without changes.

‎前端构建工具/gulp学习/前端构建工具gulp入门教程/gulpfile.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// 引入 gulp
2+
var gulp = require('gulp');
3+
4+
// 引入组件
5+
var jshint = require('gulp-jshint');
6+
var sass = require('gulp-sass');
7+
var concat = require('gulp-concat');
8+
var uglify = require('gulp-uglify');
9+
var rename = require('gulp-rename');
10+
11+
// 检查脚本
12+
gulp.task('lint', function() {
13+
gulp.src('./js/*.js')
14+
.pipe(jshint())
15+
.pipe(jshint.reporter('default'));
16+
});
17+
18+
// 编译Sass
19+
gulp.task('sass', function() {
20+
gulp.src('./scss/*.scss')
21+
.pipe(sass())
22+
.pipe(gulp.dest('./css'));
23+
});
24+
25+
// 合并，压缩文件
26+
gulp.task('scripts', function() {
27+
gulp.src('./js/*.js')
28+
.pipe(concat('all.js'))
29+
.pipe(gulp.dest('./dist'))
30+
.pipe(rename('all.min.js'))
31+
.pipe(uglify())
32+
.pipe(gulp.dest('./dist'));
33+
});
34+
35+
// 默认任务
36+
gulp.task('default', function(){
37+
gulp.run('lint', 'sass', 'scripts');
38+
39+
// 监听文件变化
40+
gulp.watch('./js/*.js', function(){
41+
gulp.run('lint', 'sass', 'scripts');
42+
});
43+
});

‎前端构建工具/gulp学习/前端构建工具gulp入门教程/package.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "test",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"author": "",
10+
"license": "ISC",
11+
"devDependencies": {
12+
"gulp": "^3.9.1",
13+
"gulp-concat": "^2.6.0",
14+
"gulp-jshint": "^2.0.1",
15+
"gulp-rename": "^1.2.2",
16+
"gulp-sass": "^2.3.2",
17+
"gulp-uglify": "^2.0.0"
18+
}
19+
}

0 commit comments

Comments
 (0)