mp-jsx - prettier & colors logs

packages/mp-jsx/gulpfile.js

@@ -4,6 +4,8 @@ var tap = require('gulp-tap')
 var fs = require('fs')
 var jsx2wxml = require('./_scripts/jsx2wxml')
 var watch = require('gulp-watch');
+var prettier = require('prettier')
+var colors = require('colors');
 
 function buildComponent(code) {
   return `
@@ -28,7 +30,7 @@ gulp.task('watch', () => {
     compile({
       path: evt.path,
       contents: contents.toString()
-    })
+    }, true)
   })
 })
 
@@ -47,24 +49,33 @@ gulp.task('compile', () => {
 
 })
 
-function compile(file) {
+function compile(file, watch) {
 
   var dir = path.dirname(file.path)
   var arr = dir.split(/\\|\//)
   var name = arr[arr.length - 1]
-  console.log('【编译文件】' + file.path)
+  console.log('[编译文件]'.green ,  file.path)
   var template = jsx2wxml.default({
     ...baseOptions,
     code: buildComponent(file.contents)
   }).template.replace(/<block>/,'').replace(/([\s\S]*)<\/block>/,'$1')
-  console.log('【编译完成】' + file.path)
+  console.log('[编译完成]'.green ,  file.path)
 
+  const res = prettier.format(template, { parser: "html" })
+  console.log('[代码美化]'.green , name + '.wxml' )
 
+  fs.writeFileSync(dir + '/' + name + '.wxml', res)
+  console.log('[写入文件]' .green , name + '.wxml')
 
-  fs.writeFileSync(dir + '/' + name + '.wxml', template)
-  console.log('【写入文件】' + name + '.wxml')
+  if(watch){
+    console.log('[编译完成]'.green , name + '.wxml' )
+    console.log('[监听更改]'.green, '...' )
+  }
 }
 
 gulp.task('default', ['compile', 'watch'])
-console.log('【开始编译】...')
-gulp.start('default')
+console.log('[开始编译]'.green ,'...')
+gulp.start('default',function(){
+  console.log('[编译完成]'.green , '恭喜你全部文件编译完成。' )
+  console.log('[监听更改]'.green, '...' )
+})

packages/mp-jsx/package.json

@@ -18,9 +18,11 @@
     "babel-template": "^6.26.0",
     "babel-traverse": "^6.26.0",
     "babel-types": "^6.26.0",
+    "colors": "^1.3.3",
     "gulp": "^3.9.1",
     "gulp-tap": "^1.0.1",
     "gulp-watch": "^5.0.1",
-    "lodash": "^4.17.11"
+    "lodash": "^4.17.11",
+    "prettier": "^1.16.4"
   }
 }

packages/mp-jsx/pages/index/index.wxml

@@ -1,17 +1,23 @@
-
-    <view class="container">
-        <view class="userinfo">
-            <block>
-                <block wx:if="{{!hasUserInfo && canIUse}}">
-                    <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取头像昵称</button>
-                </block>
-                <block wx:else>
-                    <block>
-                        <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text>
-                    </block>
-                </block>
-            </block>
-        </view>
-        <view class="usermotto"><text class="user-motto">{{motto}}</text>
-        </view>
-    </view>
+<view class="container">
+  <view class="userinfo">
+    <block>
+      <block wx:if="{{!hasUserInfo && canIUse}}">
+        <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">
+          获取头像昵称
+        </button>
+      </block>
+      <block wx:else>
+        <block>
+          <image
+            bindtap="bindViewTap"
+            class="userinfo-avatar"
+            src="{{userInfo.avatarUrl}}"
+            mode="cover"
+          ></image
+          ><text class="userinfo-nickname">{{userInfo.nickName}}</text>
+        </block>
+      </block>
+    </block>
+  </view>
+  <view class="usermotto"><text class="user-motto">{{motto}}</text> </view>
+</view>

packages/mp-jsx/pages/logs/logs.wxml

@@ -1,3 +1,9 @@
-
-    <view class="container log-list"><text class="log-item" wx:for="{{logs}}" wx:for-item="log" wx:for-index="index">{{index + 1}}. {{log}}</text>
-    </view>
+<view class="container log-list"
+  ><text
+    class="log-item"
+    wx:for="{{logs}}"
+    wx:for-item="log"
+    wx:for-index="index"
+    >{{index + 1}}. {{log}}</text
+  >
+</view>