From a85386e3a66e5b9e94b36bb68830aa2c957a1160 Mon Sep 17 00:00:00 2001 From: dntzhang Date: Thu, 18 May 2017 09:09:18 +0800 Subject: [PATCH] update scaffolding --- scaffolding/README.md | 9 ++--- scaffolding/gitignore | 5 +++ scaffolding/package.json | 9 ++--- scaffolding/src/component/footer/index.html | 4 +- scaffolding/src/component/header/index.css | 27 +++++++++++++ scaffolding/src/component/header/index.js | 7 +--- scaffolding/src/index.html | 42 +++++++++++---------- scaffolding/src/js/index.js | 8 ++-- scaffolding/webpack.config.js | 38 +++++++++---------- 9 files changed, 88 insertions(+), 61 deletions(-) create mode 100644 scaffolding/gitignore create mode 100644 scaffolding/src/component/header/index.css diff --git a/scaffolding/README.md b/scaffolding/README.md index c14229077..6ff4aabd7 100644 --- a/scaffolding/README.md +++ b/scaffolding/README.md @@ -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 diff --git a/scaffolding/gitignore b/scaffolding/gitignore new file mode 100644 index 000000000..823ac9614 --- /dev/null +++ b/scaffolding/gitignore @@ -0,0 +1,5 @@ +/dist +/dev +/node_modules +/.idea +/rev diff --git a/scaffolding/package.json b/scaffolding/package.json index 43ab26bb4..2ed15e658 100644 --- a/scaffolding/package.json +++ b/scaffolding/package.json @@ -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" }, diff --git a/scaffolding/src/component/footer/index.html b/scaffolding/src/component/footer/index.html index 6ff99fd46..c3d5c7e73 100644 --- a/scaffolding/src/component/footer/index.html +++ b/scaffolding/src/component/footer/index.html @@ -1,3 +1,3 @@ -
- I am footer +
+ I am footer
\ No newline at end of file diff --git a/scaffolding/src/component/header/index.css b/scaffolding/src/component/header/index.css new file mode 100644 index 000000000..a4279e801 --- /dev/null +++ b/scaffolding/src/component/header/index.css @@ -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; +} \ No newline at end of file diff --git a/scaffolding/src/component/header/index.js b/scaffolding/src/component/header/index.js index e7d00cee0..01a188fa1 100644 --- a/scaffolding/src/component/header/index.js +++ b/scaffolding/src/component/header/index.js @@ -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; diff --git a/scaffolding/src/index.html b/scaffolding/src/index.html index 4f61ba437..87e665e78 100644 --- a/scaffolding/src/index.html +++ b/scaffolding/src/index.html @@ -1,21 +1,23 @@ - - - - - Omi - - - - - - - - - - - - - - - + + + + + Omi + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/scaffolding/src/js/index.js b/scaffolding/src/js/index.js index 1b236146e..a5f6aa715 100644 --- a/scaffolding/src/js/index.js +++ b/scaffolding/src/js/index.js @@ -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 `
-
+
Main Content
-
`; } } diff --git a/scaffolding/webpack.config.js b/scaffolding/webpack.config.js index 8277a9a40..07aabfe6d 100644 --- a/scaffolding/webpack.config.js +++ b/scaffolding/webpack.config.js @@ -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'];