DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update scaffolding

This commit is contained in:
dntzhang 2017-05-18 09:09:18 +08:00
parent e9af2f7120
commit a85386e3a6
9 changed files with 88 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
scaffolding/README.md
View File

@ -1,16 +1,15 @@
## Omi脚手架
## Omi Gulp脚手架
使用 Gulp + Webpack + Babel + BrowserSync 搭建 的脚手架。
本项目使用 Gulp + Webpack + Babel + BrowserSync 搭建的脚手架。
你可以修改你的目录名，也可通过npm init去修改你的项目信息。
如果想要使用 webpack + hot reload 请使用 omi-cli 初始化项目。
## 安装开发依赖包
## 安装
``` js
npm install
```
## 开发
``` js

5
scaffolding/gitignore Normal file
View File

@ -0,0 +1,5 @@
/dist
/dev
/node_modules
/.idea
/rev

9
scaffolding/package.json
View File

@ -10,15 +10,14 @@
"omi": "latest"
},
"devDependencies": {
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-core":"^6.24.1",
"babel-loader":"^6.4.1",
"babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
"babel-plugin-transform-es3-property-literals": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-stage-0": "^6.22.0",
"browser-sync": "^2.18.6",
"cdn-replace-loader": "^0.4.0",
"css-loader": "^0.27.3",
"cdn-replace-loader": "^0.4.1",
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-csso": "^2.0.0",
@ -30,9 +29,7 @@
"html-webpack-plugin": "^2.26.0",
"node-sass": "^4.5.0",
"run-sequence": "^1.2.2",
"sass-loader": "^6.0.3",
"string-loader": "0.0.1",
"style-loader": "^0.13.2",
"webpack": "^2.2.1",
"webpack-stream": "^3.2.0"
},

4
scaffolding/src/component/footer/index.html
View File

@ -1,3 +1,3 @@
<div class="footer">
I am footer
<div class="footer">
I am footer
</div>

27
scaffolding/src/component/header/index.css Normal file
View File

@ -0,0 +1,27 @@
.head {
height: 45px;
line-height: 45px;
border-bottom: 1px solid #eee;
width: 100%;
background-color: #303030;
z-index: 100;
text-align: left;
}
ul,li{
display: inline-block;
}
.logo_box{
width:100px;
display: inline-block;
text-align:center;
line-height: 60px;
}
.menu a,.logo_box a{
display: inline-block;
height:45px;
color:#ddd;
}

7
scaffolding/src/component/header/index.js
View File

@ -1,9 +1,6 @@
import Omi from 'omi';
const style = require('./index.scss');
console.log(style.toString())
const testStyle = require('./test.scss');
console.log(testStyle)
const css = require('./index.css');
class Header extends Omi.Component {
constructor (data) {
@ -11,7 +8,7 @@ class Header extends Omi.Component {
}
style () {
return style+testStyle+`
return css+`
.logo_box a{
background:#303030 url(`+( Root.isDev?'./component/header/omi.png':(Root.CDN+'component/header/omi.png'))+`) no-repeat left 11px;
background-size: contain;

42
scaffolding/src/index.html
View File

@ -1,21 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Omi</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- build:vjs -->
<script src="js/vendor.bundle.js"></script>
<!-- endbuild -->
<!-- build:omijs -->
<script src="js/omijs.bundle.js"></script>
<!-- endbuild -->
<!-- build:js -->
<script src="js/index.js"></script>
<!-- endbuild -->
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Omi</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--[if lt IE 9]><script type="text/javascript" crossorigin="anonymous" src="//s.url.cn/qqun/xiaoqu/buluo/p/js/es5-sham-es5-sham.min.77c4325f.js"></script><![endif]-->
<!-- build:vjs -->
<script src="js/vendor.bundle.js"></script>
<!-- endbuild -->
<!-- build:omijs -->
<script src="js/omijs.bundle.js"></script>
<!-- endbuild -->
<!-- build:js -->
<script src="js/index.js"></script>
<!-- endbuild -->
</body>
</html>

8
scaffolding/src/js/index.js
View File

@ -4,8 +4,8 @@ import Omi from 'omi';
import Header from '../component/header/index.js';
import Footer from '../component/footer/index.js';
Omi.makeHTML('Header', Header);
Omi.makeHTML('Footer', Footer);
Omi.tag('header', Header);
Omi.tag('footer', Footer);
class Main extends Omi.Component {
constructor (data) {
@ -29,9 +29,9 @@ class Main extends Omi.Component {
render () {
return `
<div class="main">
<Header />
<header></header>
<div>Main Content</div>
<Footer />
<footer></footer>
</div>`;
}
}

38
scaffolding/webpack.config.js
View File

@ -38,25 +38,12 @@ var config = {
},
exclude: /node_modules/
},
{test: /\.html|\.css$/, loader: "string-loader"},
{
test: /\.scss$/,
use: [
//{
// // creates style nodes from JS strings
// loader: "style-loader"
//},
{
loader: "css-loader?-url" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
}
{test: /\.html|\.css$/, loader: "string-loader"}
]
},
plugins: [
// Avoid publishing files when compilation fails
new webpack.NoErrorsPlugin()
new webpack.NoEmitOnErrorsPlugin()
],
stats: {
// Nice colored output
@ -67,17 +54,30 @@ var config = {
};
if(ENV === 'dist') {
config.plugins.push(new webpack.optimize.UglifyJsPlugin());
config.plugins.push(new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
screw_ie8 : false
},
mangle: {
screw_ie8: false
},
output: { screw_ie8: false }
}));
config.entry = {
index: './src/js/index.js',
other: './src/js/other.js',
omi: ['omi'],
vendor: ['./src/common/class_list.js']
}
config.plugins[2] = new commonChunkPlugin({name: ['omi', 'vendor'], minChunks: Infinity});
config.plugins.push( new commonChunkPlugin({name: ['omi', 'vendor'], minChunks: Infinity}));
config.output.filename = '[name].[chunkhash:8].js';
config.module.rules[1] = {test: /\.html|\.css$/, loader: "cdn-replace-loader?cdn="+projectConfig.cdn}
config.module.rules[2].use[0] .loader = "cdn-replace-loader?cdn="+projectConfig.cdn
config.module.rules[1] = {test: /\.html|\.css$/, loader: "cdn-replace-loader?cdn="+projectConfig.cdn};
//config.module.rules.push({
// use:[{
// loader: "cdn-replace-loader?cdn="+projectConfig.cdn
// }]
//})
}else{
config.entry.vendor = ['omi','./src/common/class_list.js'];