用大口构建微信小程序开发工作流程

Web开发基本上是基于webpack或者其他构建工具，大大节省了开发人员的时间。目前微信小程序的开发有很多开源框架可供选择。但是，如果使用原生开发模式，虽然可以完美地使用小程序的原生新特性和功能，但工作流程非常简单。

19世纪末，公司打算开发一个新的小程序，小组里的大同事建议用group来构建下一个原生开发模式的工作流程。一是摆脱粗糙的工作流模式，节省开发时间，二是将技术运用到前沿。在老板的指导和发展下，这项工作得以开展。总的来说，这项工作并不难，收获可能没那么大，但还是收获不少。

我们在中设置了开发目录

er: 0px; font-weight: 600; font-size: 14px;">src，输出目录设置在dist，定义开发与输出路径。

文件复制

微信小程序的page目录通常包含wxml,json,wxss和js文件，与原生开发模式不同的是我们使用sass预处理器来写样式，其他的文件保持原样不同。因此，对于wxml,json,js文件来说，仅仅需要copy就行。因为在项目中已经配置了eslint+prettier来进行语法检查和代码美化，因此不需要在工作流的js代码进行规范检查。如果没有配置，可以安装gulp-eslint执行eslint规范检查。

const srcPath = "./src/**";const distPath = "./dist/";const wxmlFiles = [`${srcPath}/*.wxml`];const jsFiles = [`${srcPath}/*.js`, `!${srcPath}/env/*.js`];const jsonFiles = [`${srcPath}/*.json`];// copy wxmlconst wxml = () => {  return gulp    .src(wxmlFiles, { since: gulp.lastRun(wxml) })    .pipe(gulp.dest(distPath));};gulp.task(wxml);// 其他copy流类似...复制代码

sass处理

上面我们提到使用sass预处理来编写样式，在输出的时候我们需要把scss样式转换成wxss，wxss就是普通的css样式。这里，我们使用gulp-sass插件转换scss样式。但是，需要注意的是在scss文件中，我们可能会import相关样式，可能是公共样式也可能是varibale和minxin。

经过测试发现，当import公共样式，会把这个公共样式打包进当前页面。我们知道小程序的包是有大小限制的，如果在引入公共样式的时候还打包到当前页面，无疑是消耗掉了不必要的内存。所以，针对公共样式的import处理为，不交给sass处理，保留import并把后缀的.scss改成.wxss。

当import的是变量和mixin时，我们需要保留对其的sass处理，因此新建独立的目录存放以便识别。在这一场景下，变量和mixin的文件不再递归处理。

//存放variable和mixin的sass文件在被引用时直接导入，不引入dist目录中const DIRECTIMPORT = ["/scss/", "/font/"];const sassFiles = [`${srcPath}/*.{scss, wxss}`];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(            // 匹配@import          String(file.contents).replace(            /@import\s+['|"](.+)['|"];/g,            ($1, $2) => {              console.log("$1", $1);              console.log("$2", $2);              //如果不是变量或者mixin则注释掉              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);        //去掉注释并修改scss后缀为wxss        return $3.replace(/\.scss/g, ".wxss");      })    )    .pipe(rename({ extname: ".wxss" }))    .pipe(gulp.dest(distPath));};gulp.task(wxss);复制代码

压缩图片文件

安装gulp-imagemin插件压缩图片。之前通过npm安装在使用的时候这个插件总是报错，后来发现是没有正确安装，瞎倒腾切换到cnpm或者yarn发现可以安装成功了。

const imageFiles = [  `${srcPath}/images/*.{png,jpg,gif,ico}`,  `${srcPath}/images/**/*.{png,jpg,gif,ico}`];const img = () => {  return gulp    .src(imageFiles, { since: gulp.lastRun(img) })    .pipe(imagemin())    .pipe(gulp.dest(distPath));};gulp.task(img);复制代码

区分开发环境

正常开发过程中，开发，测试和发布环境通常会有不同的API接口和其他设置。在每次切换的时候手动去更改内部代码是一件很麻烦的事情，也容易遗忘，根据不同的命令自动加载相应的开发环境设置才是我们想要的效果。 在src/env/*目录下，配置了三个环境的变量：dev.js，test.js，prod.js。

const envJs = env => {  return () => {    return gulp      .src(`./src/env/${env}.js`)      .pipe(rename("env.js"))      .pipe(gulp.dest(distPath));  };};gulp.task(envJs);复制代码

清除dist目录

在重新编译的时候我们都需要清除dist目录的资源，以免导致混乱

/* 清除dist目录 */gulp.task("clean", done => {  del.sync(["dist/**"]);  done();});复制代码

自动创建目录

使用命令新建page目录和component目录，只要把模版文件拷贝并重命名即可。

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"      }    })    .fail(msg => {      done();      console.error("创建失败");      console.log(msg);      console.log("help");      yargs.parse(["--msg"]);    })    .help("msg");  const args = yargs.argv;  //console.log("args", args);  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}/*`;  return gulp.src(defaultPath).pipe(gulp.dest(`src/${type}/${name}/`));};gulp.task(newfile);复制代码