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

chore(deps): upgrade gulp version to 4.0.2 to resolve supporting node 12.16.1 version.

This commit is contained in:
chegde 2020-03-18 16:25:39 +08:00
parent 123bb319aa
commit d807ff8a58
2 changed files with 206 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

357
packages/omi-mp/gulpfile.js
View File

@ -1,66 +1,81 @@
let gulp = require('gulp')
let gulp = require('gulp')
let { series } = require('gulp')
let path = require('path')
let tap = require('gulp-tap')
let compile = require('./scripts/mp/index')
let fs = require('fs')
let compileWxss = require('./scripts/mp/wxss')
let prettier = require('prettier')
let postcss = require('gulp-postcss');
let autoprefixer = require('autoprefixer');
let cssnano = require('cssnano');
const os = require('os');
let postcss = require('gulp-postcss')
let autoprefixer = require('autoprefixer')
let cssnano = require('cssnano')
const os = require('os')
const WXCOMPONENT_ENV = 'WXCOMPONENT';
const isWxComponent = process.env.NODE_ENV === WXCOMPONENT_ENV;
const WXCOMPONENT_ENV = 'WXCOMPONENT'
const isWxComponent = process.env.NODE_ENV === WXCOMPONENT_ENV
const plugins = [
autoprefixer({overrideBrowserslist: ['last 2 version', '>1%', 'ios 7']}),
autoprefixer({ overrideBrowserslist: ['last 2 version', '>1%', 'ios 7'] }),
cssnano()
];
]
gulp.task('components', ['copy'], () => {
const src = isWxComponent ? 'src/mp/components/**/*.js' : 'src/mp/components/*/*.js'; // 判断是否微信组件
function copy() {
return gulp.src('src-mp/**/*').pipe(gulp.dest('src/mp'))
}
const components = series(copy, () => {
const src = isWxComponent
? 'src/mp/components/**/*.js'
: 'src/mp/components/*/*.js' // 判断是否微信组件
return gulp
.src(src)
.pipe(
tap(file => {
let dir = isWxComponent ? file.path.replace('.js', '') : path.dirname(file.path)
let dir = isWxComponent
? file.path.replace('.js', '')
: path.dirname(file.path)
let arr = dir.split(/\\|\//)
let name = arr[arr.length-1]
let preName = arr[arr.length-2];
let name = arr[arr.length - 1]
let preName = arr[arr.length - 2]
try{
if(path.basename(file.path) == name+'.js') {
let filePathComponentDomStr = fileComponentDom(file.path);
let contentPath = isWxComponent ? dir : dir + '/' + name;
try {
if (path.basename(file.path) == name + '.js') {
let filePathComponentDomStr = fileComponentDom(file.path)
let contentPath = isWxComponent ? dir : dir + '/' + name
let wxml = fs.readFileSync(contentPath + '.wxml', 'utf8')
let js = fs.readFileSync(contentPath + '.js', 'utf8')
let json = require(contentPath + '.json')
let importStr = json2import(json, dir)
let hyperscript = compile(wxml)
let componentWxss = isWxComponent ? fs.readFileSync('src/mp/component.wxss', 'utf8') : '';
let componentWxss = isWxComponent
? fs.readFileSync('src/mp/component.wxss', 'utf8')
: ''
// 判断组件下面是不是压缩过
if(js.includes('webpackBootstrap')){
// 判断组件下面是不是压缩过
if (js.includes('webpackBootstrap')) {
return
}
const helperPath =
isWxComponent && preName === 'components'
? "'../../utils/helper'"
: "'../../../utils/helper'"
file.contents = Buffer.concat([
Buffer.from(
`${importStr}import componentCss from './${name}.wxss'
import { h, WeElement, rpx } from 'omi'
import { setData, fixProps, helpInputEvent } from ${isWxComponent && preName === 'components' ? "'../../utils/helper'" : "'../../../utils/helper'"}
import { setData, fixProps, helpInputEvent } from ${helperPath}
`
),
Buffer.from(
file.contents
.toString()
.replace('Component({',
file.contents.toString().replace(
'Component({',
`const mpOption = function () {
return ({`)+`
}`),
return ({`
) + '}'
),
Buffer.from(`
class Element extends WeElement {
static defaultProps = fixProps(mpOption().properties)
@ -108,16 +123,18 @@ gulp.task('components', ['copy'], () => {
}
function css() {
return '${isWxComponent ? componentWxss.replace(/[\r\n]/g,"") : ""}' + rpx(componentCss)
return '${
isWxComponent ? componentWxss.replace(/[\r\n]/g, '') : ''
}' + rpx(componentCss)
}
${prettier.format(hyperscript, { parser: "babel" })}
${prettier.format(hyperscript, { parser: 'babel' })}
customElements.define('${filePathComponentDomStr}', Element)
`)
])
}
}catch(e){
} catch (e) {
throw e
}
})
@ -125,22 +142,18 @@ gulp.task('components', ['copy'], () => {
.pipe(gulp.dest('src/mp/components/'))
})
gulp.task('copy', () => {
return gulp.src('src-mp/**/*').pipe(gulp.dest('src/mp'))
})
gulp.task('pages', ['copy'], () => {
const pages = series(copy, () => {
return gulp
.src('src/mp/pages/*/*.js')
.pipe(
tap(file => {
let dir = path.dirname(file.path)
let arr = dir.split(/\\|\//)
let name = arr[arr.length-1]
if(path.basename(file.path) == name+'.js') {
let name = arr[arr.length - 1]
if (path.basename(file.path) == name + '.js') {
let wxml = fs.readFileSync(dir + '/' + name + '.wxml', 'utf8')
let json = require(dir + '/' + name + '.json')
let hyperscript = compile(replaceWxmlComponentHtml(dir, wxml,json))
let hyperscript = compile(replaceWxmlComponentHtml(dir, wxml, json))
let importStr = json2import(json, dir)
file.contents = Buffer.concat([
@ -150,64 +163,65 @@ import pageCss from './${name}.wxss'
import { h, WeElement, rpx } from 'omi'
import { setData, helpInputEvent } from '../../../utils/helper'
`
`
),
Buffer.from(
file.contents
.toString()
.replace('Page({',
`const mpOption = function () {
return ({`)+`
file.contents.toString().replace(
'Page({',
`const mpOption = function () {
return ({`
) +
`
}`
),
Buffer.from(`
class Element extends WeElement {
data = mpOption().data
data = mpOption().data
render = render
render = render
css = css
css = css
beforeRender() {}
beforeRender() {}
beforeUpdate() {}
beforeUpdate() {}
afterUpdate() {}
afterUpdate() {}
helpInputEvent = helpInputEvent;
helpInputEvent = helpInputEvent;
install() {
this.properties = this.props
this.data = this.data || {};
Object.assign(this.data, JSON.parse(JSON.stringify(this.props)))
this._mpOption = mpOption()
Object.keys(this._mpOption).forEach(key => {
if (typeof this._mpOption[key] === 'function') {
Element.prototype[key] = this._mpOption[key].bind(this)
}
})
}
install() {
this.properties = this.props
this.data = this.data || {};
Object.assign(this.data, JSON.parse(JSON.stringify(this.props)))
this._mpOption = mpOption()
Object.keys(this._mpOption).forEach(key => {
if (typeof this._mpOption[key] === 'function') {
Element.prototype[key] = this._mpOption[key].bind(this)
}
})
}
uninstall = mpOption().onUnload || function() {}
uninstall = mpOption().onUnload || function() {}
installed = function() {
this._mpOption.onLoad && this._mpOption.onLoad.call(this, route.query)
this._mpOption.onReady && this._mpOption.onReady.call(this, route.query)
installed = function() {
this._mpOption.onLoad && this._mpOption.onLoad.call(this, route.query)
this._mpOption.onReady && this._mpOption.onReady.call(this, route.query)
this._mpOption.onReachBottom && wx._bindReachBottom(this._mpOption.onReachBottom, this)
}
this._mpOption.onReachBottom && wx._bindReachBottom(this._mpOption.onReachBottom, this)
}
setData = setData
setData = setData
}
function css() {
return rpx(appCss + pageCss)
return rpx(appCss + pageCss)
}
${prettier.format(hyperscript, { parser: "babel" })}
${prettier.format(hyperscript, { parser: 'babel' })}
customElements.define('we-${name}', Element)
`)
`)
])
}
})
@ -215,7 +229,7 @@ customElements.define('we-${name}', Element)
.pipe(gulp.dest('src/mp/pages/'))
})
gulp.task('appjs', ['copy'], () => {
const appjs = series(copy, () => {
return gulp
.src('src-mp/app.js')
.pipe(
@ -230,23 +244,49 @@ gulp.task('appjs', ['copy'], () => {
.pipe(gulp.dest('src/mp'))
})
gulp.task('copyThen', () => {
gulp.src('src-mp/**/*').pipe(gulp.dest('src/mp')).on('end', function(){
gulp.start(['components', 'app-wxss', 'pages-wxss', 'components-wxss', 'pages', 'appjs', 'route'])
})
})
const copyThen = () => {
gulp
.src('src-mp/**/*')
.pipe(gulp.dest('src/mp'))
.on('end', () => {
gulp.start([
'components',
'app-wxss',
'pages-wxss',
'components-wxss',
'pages',
'appjs',
'route'
])
})
}
gulp.task('watch', () => {
const watch = () => {
gulp.watch('src-mp/**/*', () => {
gulp.start('copyThen')
})
})
}
const route = series(copy, cb => {
function route1(arr) {
let result = []
arr.forEach(item => {
const name = item.split('/')[1]
result.push(`route('${item.replace('pages', '..')}', evt => {
title('${name}')
routeUpdate(<we-${name} />, 'we-${name}', evt.byNative, root)
})
`)
})
return result.join('\r\n')
}
gulp.task('route', ['copy'], (cb) => {
let json = require('./src/mp/app.json')
//fs.unlinkSync('./src/index.js')
fs.writeFile('./src/index.js', `import 'omi-router'
fs.writeFile(
'./src/index.js',
`import 'omi-router'
import { routeUpdate } from './utils/mp'
import './mp/app'
@ -257,7 +297,7 @@ route('*', evt => {
routeUpdate(<we-index />, 'we-index', evt.byNative, root)
})
${route(json.pages)}
${route1(json.pages)}
window.onscroll = function(){
root.childNodes.forEach(child => {
@ -270,60 +310,49 @@ window.onscroll = function(){
function title(value) {
document.title = value
}
`, cb);
`,
cb
)
})
function route(arr) {
let result = []
arr.forEach(item => {
const name = item.split('/')[1]
result.push(`route('${item.replace('pages', '..')}', evt => {
title('${name}')
routeUpdate(<we-${name} />, 'we-${name}', evt.byNative, root)
})
`)
})
return result.join('\r\n')
}
// 打包生成web component 转换统一src 路径
function fileComponentDom(filePth) {
let filePathArray = filePth.replace(__dirname, '').replace('.js', '').split(os.type().includes('Windows') ? '\\' : '/');
filePathArray.shift();
return 'wx-h5-' + filePathArray.join('-');
function fileComponentDom(filePth) {
let filePathArray = filePth
.replace(__dirname, '')
.replace('.js', '')
.split(os.type().includes('Windows') ? '\\' : '/')
filePathArray.shift()
return 'wx-h5-' + filePathArray.join('-')
}
// 组件转换绝对路径 不再需要依赖强匹配目录文件夹
function replaceComponentOnPath(tag, str, tagName) {
const reg = new RegExp(`<(${tag})(?=\\s)|<(\\/${tag})>`, 'g');
const reg = new RegExp(`<(${tag})(?=\\s)|<(\\/${tag})>`, 'g')
return str.replace(reg, function(match, $1, $2) {
if ($1) {
return '<' + tagName;
}
return '</' + tagName + '>'
});
return str.replace(reg, (match, $1, $2) => {
if ($1) {
return '<' + tagName
}
return '</' + tagName + '>'
})
}
// 匹配转换html 转换 目录文件夹名字
function replaceWxmlComponentHtml(dir, html, json) {
if(json.usingComponents){
if (json.usingComponents) {
Object.keys(json.usingComponents).forEach((key, i) => {
html = replaceComponentOnPath(
key,
html,
fileComponentDom(path.join(dir, json.usingComponents[key]))
);
)
})
}
return html;
return html
}
function json2import(json, dir) {
let arr = []
if (json.usingComponents) {
@ -332,40 +361,40 @@ function json2import(json, dir) {
})
}
return arr.join('\r\n') + '\r\n'
// let arr = []
// if (json.usingComponents) {
// let arr = []
// if (json.usingComponents) {
// Object.keys(json.usingComponents).forEach(key => {
// let usingArry = path.resolve(dir, json.usingComponents[key]).split('/');
// usingArry.pop();
// let wxssPath = '';
// Object.keys(json.usingComponents).forEach(key => {
// let usingArry = path.resolve(dir, json.usingComponents[key]).split('/');
// usingArry.pop();
// let wxssPath = '';
// try{
// let indexWsxx = [...usingArry, 'index.wxss'].join('/');
// fs.statSync(indexWsxx);
// wxssPath = json.usingComponents[key];
// }catch(e){
// }
// try{
// let indexWsxx = [...usingArry, 'index.wxss'].join('/');
// fs.statSync(indexWsxx);
// wxssPath = json.usingComponents[key];
// }catch(e){
// try{
// let keyWsxx = [...usingArry, key + '.wxss'].join('/');
// fs.statSync(keyWsxx);
// wxssPath = keyWsxx;
// }catch(e){
// }
// }
// wxssPath && arr.push(`import '${wxssPath}'`)
// try{
// let keyWsxx = [...usingArry, key + '.wxss'].join('/');
// fs.statSync(keyWsxx);
// wxssPath = keyWsxx;
// }catch(e){
// // let wxml = fs.readFileSync(wxssPath, 'utf8')
// // console.log(Buffer.from(compileWxss(wxml)))
// }
// // arr.push(Buffer.from(compileWxss(wxml)))
// arr.push(`import '${json.usingComponents[key]}'`)
// })
// }
// return arr.join('\r\n') + '\r\n'
// wxssPath && arr.push(`import '${wxssPath}'`)
// // let wxml = fs.readFileSync(wxssPath, 'utf8')
// // console.log(Buffer.from(compileWxss(wxml)))
// // arr.push(Buffer.from(compileWxss(wxml)))
// arr.push(`import '${json.usingComponents[key]}'`)
// })
// }
// return arr.join('\r\n') + '\r\n'
}
function list2require(list) {
@ -391,46 +420,64 @@ function walk(path) {
return fileList
}
gulp.task('pages-wxss', ['copy'], () => {
const pagesWxss = series(copy, () => {
return gulp
.src(isWxComponent ? 'src/mp/pages/**/*.wxss' : 'src/mp/pages/*/*.wxss')
.pipe(
tap(file => {
file.contents = Buffer.from(compileWxss(file.contents.toString()))
})
)
.pipe(postcss(plugins))
.pipe(gulp.dest('src/mp/pages/'))
})
gulp.task('components-wxss', ['copy'], () => {
const componentsWxss = series(copy, () => {
return gulp
.src(isWxComponent ? 'src/mp/components/**/*.wxss' : 'src/mp/components/*/*.wxss')
.src(
isWxComponent
? 'src/mp/components/**/*.wxss'
: 'src/mp/components/*/*.wxss'
)
.pipe(
tap(file => {
file.contents = Buffer.from(compileWxss(file.contents.toString()))
})
)
.pipe(postcss(plugins))
.pipe(gulp.dest('src/mp/components/'))
})
gulp.task('app-wxss', ['copy'], () => {
const appWxss = series(copy, () => {
return gulp
.src('src-mp/app.wxss')
.pipe(
tap(file => {
file.contents = Buffer.from(compileWxss(file.contents.toString()))
})
)
.pipe(postcss(plugins))
.pipe(gulp.dest('src/mp'))
})
gulp.task('default', ['copy', 'components', 'app-wxss', 'pages-wxss', 'components-wxss', 'pages', 'appjs', 'route', 'watch'])
gulp.task('build', ['copy', 'components', 'app-wxss', 'pages-wxss', 'components-wxss', 'pages', 'appjs', 'route'])
exports.default = series(
copy,
components,
appWxss,
pagesWxss,
componentsWxss,
pages,
appjs,
route,
watch
)
exports.build = series(
copy,
components,
appWxss,
pagesWxss,
componentsWxss,
pages,
appjs,
route
)

8
packages/omi-mp/package.json
View File

@ -11,8 +11,8 @@
"concurrently": "^4.0.1",
"css": "^2.2.4",
"css-what": "^2.1.2",
"gulp": "^3.9.1",
"gulp-tap": "^1.0.1",
"gulp": "^4.0.2",
"gulp-tap": "^2.0.0",
"html2json": "^1.0.2",
"uglify-js": "^3.4.9"
},
@ -32,7 +32,7 @@
"babel-runtime": "6.26.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"cross-env": "^6.0.3",
"cross-env": "^6.0.3",
"css-loader": "0.28.7",
"cssnano": "^4.1.10",
"dotenv": "4.0.0",
@ -70,7 +70,7 @@
"whatwg-fetch": "2.0.3"
},
"scripts": {
"start": "cross-env NODE_ENV=\"COMPONENT\" concurrently --kill-others \"gulp\" \"node scripts/start.js\"",
"start": "cross-env NODE_ENV=\"COMPONENT\" concurrently --kill-others \"gulp\" \"node scripts/start.js\"",
"start-wx-component": "cross-env NODE_ENV=\"WXCOMPONENT\" concurrently --kill-others \"gulp\" \"node scripts/start.js\"",
"wx-component-build": "cross-env NODE_ENV=\"WXCOMPONENT\" concurrently --kill-others \"gulp build\" && npm run build",
"wx-build": "cross-env NODE_ENV=\"COMPONENT\" concurrently --kill-others \"gulp build\" && npm run build",