first commit

.eslintrc.js

+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es6: true,
+    node: true,
+  },
+  plugins: [
+    "prettier"
+  ],
+  extends: [
+    "prettier",
+    "prettier/standard"
+  ],
+  parser: "babel-eslint",
+  parserOptions: {
+    ecmaVersion: 6,
+    sourceType: "module"
+  },
+  rules: {
+    "prettier/prettier":"error",
+    "no-console": 0,
+  },
+  globals: {
+    getApp: false,
+    Page: false,
+    wx: false,
+    App: false,
+    getCurrentPages: false,
+    Component: false
+  }
+}
\ No newline at end of file

.gitignore

+# Windows
+[Dd]esktop.ini
+Thumbs.db
+$RECYCLE.BIN/
+dist
+
+# macOS
+.vscode
+.DS_Store
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+dist
+
+# Node.js
+node_modules/

README.md

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

gulpfile.js

+const gulp = require("gulp");
+const sass = require("gulp-sass");
+const rename = require("gulp-rename");
+const imagemin = require("gulp-imagemin");
+const del = require("del");
+const replace = require("gulp-replace");
+const postcss = require("gulp-postcss");
+const autoprefixer = require("autoprefixer");
+const plumber = require("gulp-plumber");
+const tap = require("gulp-tap");
+const path = require("path");
+const notify = require("gulp-notify");
+const yargs = require("yargs");
+
+const srcPath = "./src/**";
+const distPath = "./dist/";
+//存放variable和mixin的sass文件在被引用时直接导入，不引入dist目录中
+const DIRECTIMPORT = ["/scss/", "/font/"];
+const onError = function(err) {
+  notify.onError({
+    title: "Gulp",
+    subtitle: "Failure!",
+    message: "Error: <%= error.message %>",
+    sound: "Beep"
+  })(err);
+
+  this.emit("end");
+};
+
+const wxmlFiles = [`${srcPath}/*.wxml`];
+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}`
+];
+
+/* 清除dist目录 */
+gulp.task("clean", done => {
+  del.sync(["dist/**"]);
+  done();
+});
+
+const wxml = () => {
+  return gulp
+    .src(wxmlFiles, { since: gulp.lastRun(wxml) })
+    .pipe(gulp.dest(distPath));
+};
+gulp.task(wxml);
+
+const js = () => {
+  return gulp
+    .src(jsFiles, { since: gulp.lastRun(js) })
+    .pipe(gulp.dest(distPath));
+};
+gulp.task(js);
+
+const envJs = env => {
+  return () => {
+    return gulp
+      .src(`./src/env/${env}.js`)
+      .pipe(rename("env.js"))
+      .pipe(gulp.dest(distPath));
+  };
+};
+gulp.task(envJs);
+
+gulp.task("devEnv", envJs("dev"));
+gulp.task("testEnv", envJs("tes"));
+gulp.task("prodEnv", envJs("prod"));
+
+const json = () => {
+  return gulp
+    .src(jsonFiles, { since: gulp.lastRun(json) })
+    .pipe(gulp.dest(distPath));
+};
+gulp.task(json);
+
+const wxss = () => {
+  return gulp
+    .src([...sassFiles, ...DIRECTIMPORT.map(item => `!${srcPath}/${item}/*`)], {
+      since: gulp.lastRun(wxss)
+    })
+    .pipe(plumber({ errorHandler: onError }))
+    .pipe(
+      tap(file => {
+        const filePath = path.dirname(file.path);
+        //console.log("filepath", filePath);
+        file.contents = new Buffer(
+          String(file.contents).replace(
+            /@import\s+['|"](.+)['|"];/g,
+            ($1, $2) => {
+              // console.log("$1", $1);
+              // console.log("$2", $2);
+              return DIRECTIMPORT.some(item => {
+                return $2.indexOf(item) > -1;
+              })
+                ? $1
+                : `/** ${$1} **/`;
+            }
+          )
+        );
+      })
+    )
+    .pipe(sass())
+    .pipe(postcss([autoprefixer(["iOS >= 8", "Android >= 4.1"])]))
+    .pipe(
+      replace(/(\/\*\*\s{0,})(@.+)(\s{0,}\*\*\/)/g, ($1, $2, $3) => {
+        //console.log("$1", $1);
+        //console.log("$2", $2);
+        //console.log("$3", $3);
+        return $3.replace(/\.scss/g, ".wxss");
+      })
+    )
+    .pipe(rename({ extname: ".wxss" }))
+    .pipe(gulp.dest(distPath));
+};
+gulp.task(wxss);
+
+const img = () => {
+  return gulp
+    .src(imageFiles, { since: gulp.lastRun(img) })
+    .pipe(imagemin())
+    .pipe(gulp.dest(distPath));
+};
+gulp.task(img);
+
+const newfile = done => {
+  yargs
+    .example("gulp newfile -p mypage", "创建mypage的page目录")
+    .example("gulp newfile -c mycomponent", "创建mycomponent的component目录")
+    .example(
+      "gulp newfile -s srcfile -p mypage",
+      "以srcfile为模版创建mypage的page目录"
+    )
+    .option({
+      s: {
+        alias: "src",
+        describe: "模板",
+        type: "string",
+        default: "template"
+      },
+      p: {
+        alias: "page",
+        describe: "page名称",
+        type: "string"
+      },
+      c: {
+        alias: "component",
+        describe: "component名称",
+        type: "string"
+      },
+      t: {
+        alias: "template",
+        describe: "template名称",
+        type: "string"
+      }
+    })
+    .fail(msg => {
+      done();
+      console.error("创建失败");
+      console.log(msg);
+      console.log("help");
+      yargs.parse(["--msg"]);
+    })
+    .help("msg");
+
+  const args = yargs.argv;
+  const source = args.s;
+  const filePaths = {
+    p: "pages",
+    c: "components"
+  };
+
+  let name,
+    type,
+    hasParam = false;
+  for (let key in filePaths) {
+    if (args[key]) {
+      hasParam = true;
+      name = args[key];
+      type = filePaths[key];
+    }
+  }
+  if (!hasParam) {
+    done();
+    yargs.parse(["--msg"]);
+  }
+  const defaultPath =
+    source === "template"
+      ? `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("watch", () => {
+  const watchSassFiles = [
+    ...sassFiles,
+    ...DIRECTIMPORT.map(item => `!${srcPath}/${item}/**/*`)
+  ];
+  gulp.watch(watchSassFiles, wxss);
+  gulp.watch(jsFiles, js);
+  gulp.watch(jsonFiles, json);
+  gulp.watch(imageFiles, img);
+  gulp.watch(wxmlFiles, wxml);
+});
+
+gulp.task(
+  "build",
+  gulp.series(
+    "clean",
+    gulp.parallel("wxml", "js", "json", "wxss", "img", "prodEnv")
+  )
+);
+gulp.task(
+  "dev",
+  gulp.series(
+    "clean",
+    gulp.parallel("wxml", "js", "json", "wxss", "img", "devEnv"),
+    "watch"
+  )
+);
+gulp.task(
+  "test",
+  gulp.series(
+    "clean",
+    gulp.parallel("wxml", "js", "json", "wxss", "img", "testEnv")
+  )
+);

package.json

+{
+  "name": "miniprogram-template",
+  "version": "1.0.0",
+  "description": "gulp miniprogram",
+  "main": "index.js",
+  "author": "shelia",
+  "license": "MIT",
+  "devDependencies": {
+    "autoprefixer": "^9.7.3",
+    "babel-eslint": "^8.2.1",
+    "del": "^5.1.0",
+    "eslint": "^4.18.2",
+    "eslint-config-prettier": "^2.9.0",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-prettier": "^2.3.1",
+    "fs": "0.0.1-security",
+    "gulp": "^4.0.2",
+    "gulp-imagemin": "^6.2.0",
+    "gulp-notify": "^3.2.0",
+    "gulp-plumber": "^1.2.1",
+    "gulp-postcss": "^8.0.0",
+    "gulp-rename": "^1.4.0",
+    "gulp-replace": "^1.0.0",
+    "gulp-sass": "^4.0.2",
+    "gulp-tap": "^2.0.0",
+    "path": "^0.12.7",
+    "prettier": "^1.8.2",
+    "yargs": "^15.3.1"
+  },
+  "repository": "http://git.changein.cn/xzc168520/miniprogramtemplate.git"
+}

src/app.js

+//app.js
+App({
+  onLaunch: function() {
+    // 展示本地存储能力
+    var logs = wx.getStorageSync("logs") || [];
+    logs.unshift(Date.now());
+    wx.setStorageSync("logs", logs);
+
+    // 登录
+    wx.login({
+      success: res => {
+        // 发送 res.code 到后台换取 openId, sessionKey, unionId
+      }
+    });
+    // 获取用户信息
+    wx.getSetting({
+      success: res => {
+        if (res.authSetting["scope.userInfo"]) {
+          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
+          wx.getUserInfo({
+            success: res => {
+              // 可以将 res 发送给后台解码出 unionId
+              this.globalData.userInfo = res.userInfo;
+
+              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
+              // 所以此处加入 callback 以防止这种情况
+              if (this.userInfoReadyCallback) {
+                this.userInfoReadyCallback(res);
+              }
+            }
+          });
+        }
+      }
+    });
+  },
+  globalData: {
+    userInfo: null
+  }
+});

src/app.json

+{
+  "pages":[
+    "pages/index/index",
+    "pages/test/index"
+  ],
+  "window":{
+    "backgroundTextStyle":"light",
+    "navigationBarBackgroundColor": "#fff",
+    "navigationBarTitleText": "Weixin",
+    "navigationBarTextStyle":"black"
+  },
+  "style": "v2",
+  "sitemapLocation": "sitemap.json"
+}

src/app.scss

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

src/env/dev.js

+/*
+ * @Descripttion: 开发环境
+ */
+const API_URL = {
+  host: "http://xxdev.xxx.com",
+  r: "https://xxr.xxx.com"
+};
+
+module.exports = API_URL;

src/env/prod.js

+/*
+ * @Descripttion: 生产环境
+ */
+const API_URL = {
+  host: "http://xxprod.xxx.com",
+  r: "https://xxr.xxx.com"
+};
+module.exports = API_URL;

src/env/test.js

+/*
+ * @Descripttion: 测试环境
+ */
+const API_URL = {
+  host: "http://xxtest.xxx.com",
+  r: "https://xxr.xxx.com"
+};
+module.exports = API_URL;

src/pages/index/index.js

+//index.js
+//获取应用实例
+const app = getApp();
+
+Page({
+  data: {
+    motto: "Hello World",
+    userInfo: {},
+    hasUserInfo: false,
+    canIUse: wx.canIUse("button.open-type.getUserInfo")
+  },
+  //事件处理函数
+  bindViewTap: function() {
+    wx.navigateTo({
+      url: "../test/index"
+    });
+  },
+  onLoad: function() {
+    if (app.globalData.userInfo) {
+      this.setData({
+        userInfo: app.globalData.userInfo,
+        hasUserInfo: true
+      });
+    } else if (this.data.canIUse) {
+      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
+      // 所以此处加入 callback 以防止这种情况
+      app.userInfoReadyCallback = res => {
+        this.setData({
+          userInfo: res.userInfo,
+          hasUserInfo: true
+        });
+      };
+    } else {
+      // 在没有 open-type=getUserInfo 版本的兼容处理
+      wx.getUserInfo({
+        success: res => {
+          app.globalData.userInfo = res.userInfo;
+          this.setData({
+            userInfo: res.userInfo,
+            hasUserInfo: true
+          });
+        }
+      });
+    }
+  },
+  getUserInfo: function(e) {
+    console.log(e);
+    app.globalData.userInfo = e.detail.userInfo;
+    this.setData({
+      userInfo: e.detail.userInfo,
+      hasUserInfo: true
+    });
+  }
+});

src/pages/index/index.json

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

src/pages/index/index.scss

+
+.container {
+
+    .userinfo {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .userinfo-avatar {
+            width: 128rpx;
+            height: 128rpx;
+            margin: 20rpx;
+            border-radius: 50%;
+        }
+
+        .userinfo-nickname {
+            color: #aaa;
+        }
+    }
+
+    .usermotto {
+        text-align: center;
+        margin-top: 200px;
+    }
+}
+
+  

src/pages/index/index.wxml

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

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.json

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

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/project.config.json

+{
+  "description": "项目配置文件",
+  "packOptions": {
+    "ignore": []
+  },
+  "setting": {
+    "urlCheck": true,
+    "es6": true,
+    "enhance": false,
+    "postcss": true,
+    "preloadBackgroundData": false,
+    "minified": true,
+    "newFeature": false,
+    "coverView": true,
+    "nodeModules": false,
+    "autoAudits": false,
+    "showShadowRootInWxmlPanel": true,
+    "scopeDataCheck": false,
+    "uglifyFileName": false,
+    "checkInvalidKey": true,
+    "checkSiteMap": true,
+    "uploadWithSourceMap": true,
+    "compileHotReLoad": false,
+    "useMultiFrameRuntime": false,
+    "useApiHook": true,
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    },
+    "enableEngineNative": false,
+    "bundle": false,
+    "useIsolateContext": true,
+    "useCompilerModule": true,
+    "userConfirmedUseCompilerModuleSwitch": false,
+    "userConfirmedBundleSwitch": false,
+    "packNpmManually": false,
+    "packNpmRelationList": [],
+    "minifyWXSS": true
+  },
+  "compileType": "miniprogram",
+  "libVersion": "2.14.1",
+  "appid": "wx238862d8fac4ce23",
+  "projectname": "miniprogram-1",
+  "debugOptions": {
+    "hidedInDevtools": []
+  },
+  "scripts": {},
+  "isGameTourist": false,
+  "simulatorType": "wechat",
+  "simulatorPluginLibVersion": {},
+  "condition": {
+    "search": {
+      "list": []
+    },
+    "conversation": {
+      "list": []
+    },
+    "game": {
+      "list": []
+    },
+    "plugin": {
+      "list": []
+    },
+    "gamePlugin": {
+      "list": []
+    },
+    "miniprogram": {
+      "list": []
+    }
+  }
+}
\ No newline at end of file

src/scss/variables.scss

+$themeColor: #8FBC8F;
+
+$flex-justify-content: (
+  start: flex-start,
+  end: flex-end,
+  center: center,
+  between: space-between,
+  around: space-around,
+);
+$flex-align-items: (
+  start: flex-start,
+  end: flex-end,
+  center: center,
+  stretch: stretch,
+);
\ No newline at end of file

src/sitemap.json

+{
+  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
+  "rules": [{
+  "action": "allow",
+  "page": "*"
+  }]
+}
\ No newline at end of file

src/styles/common.scss

+.flex-center{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
\ No newline at end of file

src/template/pages/index.js

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

src/template/pages/index.json

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

src/template/pages/index.scss

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

src/template/pages/index.wxml

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

src/utils/util.js

+const formatTime = date => {
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const hour = date.getHours();
+  const minute = date.getMinutes();
+  const second = date.getSeconds();
+  const time = [year, month, day].map(formatNumber).join("/");
+  return time + " " + [hour, minute, second].map(formatNumber).join(":");
+};
+
+const formatNumber = n => {
+  n = n.toString();
+  return n[1] ? n : "0" + n;
+};
+
+module.exports = {
+  formatTime: formatTime
+};