新增:压缩图片格式,components模板,完善:scss样式

README.md

@@ -2,12 +2,12 @@
 ### 基于gulp构建的微信小程序工作流
 
 ```
-  gulp newfile -p nmpage           创建名为nmpage的page文件
-  gulp newfile -s index -p nmpage  复制pages/index中的文件创建名称为nmpage的页面
+  gulp new -p nmpage           创建名为nmpage的page文件
+  gulp new -s index -p nmpage  复制pages/index中的文件创建名称为nmpage的页面
+  gulp new -c nmcomponent      创建名为nmcomponent的component文件
 ```
 
 ### TODO
 ```
-  gulp newfile -t nmtpl            创建名为nmtpl的template文件
-  gulp newfile -c nmcomponent      创建名为nmcomponent的component文件
+  gulp new -t nmtpl            创建名为nmtpl的template文件
 ```
\ No newline at end of file

gulpfile.js

@@ -32,8 +32,8 @@ const sassFiles = [`${srcPath}/*.{scss, wxss}`];
 const jsFiles = [`${srcPath}/*.js`, `!${srcPath}/env/*.js`];
 const jsonFiles = [`${srcPath}/*.json`];
 const imageFiles = [
-  `${srcPath}/images/*.{png,jpg,gif,ico}`,
-  `${srcPath}/images/**/*.{png,jpg,gif,ico}`
+  `${srcPath}/images/*.{png,jpeg,jpg,gif,ico}`,
+  `${srcPath}/images/**/*.{png,jpeg,jpg,gif,ico}`
 ];
 
 /* 清除dist目录 */
@@ -87,7 +87,7 @@ const wxss = () => {
       tap(file => {
         const filePath = path.dirname(file.path);
         //console.log("filepath", filePath);
-        file.contents = new Buffer(
+        file.contents = Buffer.from(
           String(file.contents).replace(
             /@import\s+['|"](.+)['|"];/g,
             ($1, $2) => {
@@ -128,10 +128,10 @@ gulp.task(img);
 
 const newfile = done => {
   yargs
-    .example("gulp newfile -p mypage", "创建mypage的page目录")
-    .example("gulp newfile -c mycomponent", "创建mycomponent的component目录")
+    .example("gulp new -p mypage", "创建mypage的page目录")
+    .example("gulp new -c mycomponent", "创建mycomponent的component目录")
     .example(
-      "gulp newfile -s srcfile -p mypage",
+      "gulp new -s srcfile -p mypage",
       "以srcfile为模版创建mypage的page目录"
     )
     .option({
@@ -192,13 +192,11 @@ const newfile = done => {
       ? `src/${source}/${type}/*`
       : `src/${type}/${source}/*`;
 
-  console.log("defaultPath " + `src/${type}/${name}`, defaultPath);
-
   return gulp.src(defaultPath).pipe(gulp.dest(`src/${type}/${name}/`));
 };
-gulp.task(newfile);
+gulp.task("new", newfile);
 
-gulp.task("watch", () => {
+gulp.task("watch", done => {
   const watchSassFiles = [
     ...sassFiles,
     ...DIRECTIMPORT.map(item => `!${srcPath}/${item}/**/*`)
@@ -208,6 +206,7 @@ gulp.task("watch", () => {
   gulp.watch(jsonFiles, json);
   gulp.watch(imageFiles, img);
   gulp.watch(wxmlFiles, wxml);
+  done();
 });
 
 gulp.task(
@@ -217,6 +216,7 @@ gulp.task(
     gulp.parallel("wxml", "js", "json", "wxss", "img", "prodEnv")
   )
 );
+
 gulp.task(
   "dev",
   gulp.series(
@@ -225,6 +225,7 @@ gulp.task(
     "watch"
   )
 );
+
 gulp.task(
   "test",
   gulp.series(

src/app.scss

 @import './styles/common.scss';
-@import './scss/variables';
+@import './scss/variables.scss';
+@import './scss/style.scss';
+
+
 .container{
   width: 100%;
   height: 100vh;
-  color: $themeColor;
+  color: $tc;
 }
\ No newline at end of file

src/pages/test/index.js

-// pages/index.js
-Page({
-  /**
-   * 页面的初始数据
-   */
-  data: {
-    content: "test"
-  },
-
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad: function(options) {
-    console.log("onLoad");
-  },
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function() {
-    console.log("onShareAppMessage");
-  }
-});

src/pages/test/index.scss

-.container {
-    width: 100vw;
-    .text {
-      color: red;
-    }
-  }
\ No newline at end of file

src/pages/test/index.wxml

-<view class='container'>
-  <text class="text">{{content}}</text>
-</view>
\ No newline at end of file

src/scss/style.scss

+// copy changein -> common/scss/style
+@import '../scss/variables.scss';
+
+.flex-1 {
+  flex: 1;
+};
+
+.flex-center{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+// text overflow
+.text-ellipsis {
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+// flex
+.display-flex {
+    display: flex;
+}
+.flex-column {
+    flex-direction: column;
+}
+.flex-wrap {
+    flex-wrap: wrap;
+}
\ No newline at end of file

src/scss/variables.scss

-$themeColor: #8FBC8F;
+// copy changein -> common/scss/_variables
+
+$base-font-size: 26rpx;
+
+$font-sizes: (
+  xxs: 0.6923,
+	// 18rpx
+  xs: 0.7692,
+  // 20rpx
+  ssm: 0.8462,
+  // 22rpx
+  sm: 0.9230,
+	// 24rpx
+  md: 1,
+  // 26rpx
+  lg: 1.0769,
+  // 28rpx
+  xl: 1.1538,
+  // 30rpx
+);
+
+// spacing
+// 0-5: 0
+// .mt-1  => margin top  .pb-2
+$spacing-types: (
+  m: margin,
+  p: padding,
+);
+
+$spacing-directions: (
+  t: top,
+  r: right,
+  b: bottom,
+  l: left,
+);
+
+
+@each $sizeKey, $size in $font-sizes {
+  .fs-#{$sizeKey} {
+    font-size: $size * $base-font-size;
+  }
+}
+
+// text align
+@each $var in (left, center, right) {
+  .text-#{$var} {
+    text-align: $var !important;
+  }
+}
+
 
 $flex-justify-content: (
   start: flex-start,
@@ -7,9 +56,22 @@ $flex-justify-content: (
   between: space-between,
   around: space-around,
 );
+
 $flex-align-items: (
   start: flex-start,
   end: flex-end,
   center: center,
   stretch: stretch,
 );
+
+@each $key, $value in $flex-justify-content {
+    .flex-j-#{$key} {
+      justify-content: $value;
+    }
+}
+
+@each $key, $value in $flex-align-items {
+    .flex-a-#{$key} {
+      align-items: $value;
+    }
+}
\ No newline at end of file

src/styles/common.scss

-.flex-center{
-    display: flex;
-    align-items: center;
-    justify-content: center;
+@import '../scss/style.scss';
+
+$colors: (
+  "themeColor": #8FBC8F,
+);
+
+$tc: map-get($colors, 'themeColor');
+
+
+@mixin width($value: 100%) {
+    width: $value;
+}
+@mixin height($value: 100%) {
+    height: $value;
+}
+
+// width, height
+.w-100 {
+    @include width();
+}
+
+.h-100 {
+    @include height();
 }

src/template/components/index.js

+Component({
+  properties: {
+    showDelect: Boolean,
+    flexList: Array,
+    title: String // 简化的定义方式
+  },
+  data: {
+    content: "content"
+  },
+  methods: {
+    // 这里是一个自定义方法
+    tagAction(e) {
+      var eventOption = { content: e.currentTarget.dataset.text }; // 触发事件的选项
+      this.triggerEvent("tagClick", eventOption);
+    }
+  }
+});

src/pages/test/index.json → src/template/components/index.json

 {
+  "component": true,
   "usingComponents": {}
 }
\ No newline at end of file

src/template/components/index.scss

+.container {
+  width: 100vw;
+  .text {
+    color: red;
+  }
+}
\ No newline at end of file

src/template/components/index.wxml

+<!--template/components/index.wxml-->
+<view class="container" hover-class="none" hover-stop-propagation="false">
+    <text class="flex-item" selectable="false" space="false" decode="false" bindtap="tagAction" data-text="{{content}}">{{content}}</text>
+</view>