刚入门微信小程序的时候，一切都基于微信web开发者工具，没有使用其他框架，也没有工程化的概念。当时做的项目都比较简单，单单用微信web开发者工具倒也得心应手。学了些东西后，就按捺不住地想跳出原生工具的条条框框，把近些日子学的东西都拿出来熬一熬。
已有的一个小程序项目使用了github上一个使用webpack、babel、sass开发的小程序脚手架（wxapp-boilerplate）,我需要在不变动原有项目代码的基础上，使用gulp来重构项目的工作流。
使用体验：使用vscode配合各种插件在src目录下开发，使用微信web开发者工具预览调试，通过cmd打开服务，可以用gulp命令快速创建page、component模板。还是很nice的。
介绍根据开发中的刚需和痛点，最终做了以下工作，有实现不到位的，欢迎大家提出建议。
sass编译成wxss，同时处理了@import直接导入导致单文件过大的问题 修改gulpfile.js的aliasWords可为项目js配置alias 支持在src中的wxs使用es6+ 使用微信web开发者工具的Npm构建 gulp命令快速创建page、component模板项目地址：https://github.com/bluehat999/weapp-gulp
文章地址：https://www.cnblogs.com/mthz/p/weapp-gulp.html
要点实现过程中遇到的问题，也是一些要点：
1.项目中的WXS文件使用了ES6语法，而WXS原生不支持ES6wxs不支持ES6 语法，其标准基本是参考ES5 标准.
解决方案是使用babel将wxs像js那样从ES6转为ES5，在使用babel的时候，有个模块始终无法加载到，查出问题应该是babel的依赖间版本不一致的问题，就在github上查了gulp-babel的仓库，参照readme.md的示例重新安装模块和使用，就成功解决。
安装：
npm install --save-dev gulp-babel @babel/core @babel/preset-env使用：
const f_wxs = done => { return gulp.src(WXS, { since: gulp.lastRun(f_wxs) }) .pipe(plumber({ errorHandler: onError })) .pipe(babel({ presets: ['@babel/preset-env'] })) .pipe(rename({extname:'.wxs'})) .pipe(gulp.dest(DIST)) } gulp.task('wxs', f_wxs) 2.sass编译成wxss，解决@import导致文件体积过大的问题css不支持import语法，sass在处理@import时会直接把对应文件添加过来，从而导致wxss文件体积过大。
而wxss支持import语法，同时限制了单包代码不超过2M，所以需要采用方法避免sass编译时直接导入样式，而是沿用@import。简单来说，就是让sass编译时不处理import语句。
可以改sass的源码，让它跳过import，也可以在交给sass编译前将文件中的import语句注释掉，编译结束后再取消注释。
但是不处理import语句也会带来一个问题：文件中使用了引入文件中的变量和mixin时，会由于没有引入而找不到变量和mixin。我们需要再给不处理import语句加一个判断条件。
一般项目都会将全局的（需要被引用的）变量和mixin放在单独的文件里，而且会适当分成多个，以免单个文件过大。将这些文件放在指定的目录里，将目录路径作为判断条件来过滤掉需要import的变量和mixin的sass文件。
const SRC = './src/**/' const SASS = [`${SRC}*.{scss,wxss,scss}`] const DIRECTIMPORT = [`styles`, `font`] const f_sass = done => { return gulp.src([...SASS,...DIRECTIMPORT.map(item => `!${SRC}${item}/**/*`)], { since: gulp.lastRun(f_sass) ,allowEmpty:true}) .pipe(plumber({ errorHandler: onError })) .pipe(tap((file) => { const filePath = path.dirname(file.path); file.contents = new Buffer( String(file.contents) .replace(/@import\s+['|"](.+)['|"];/g, ($1, $2) => { const imPath = path.resolve(filePath + 'http://www.likecs.com/' + $2) return DIRECTIMPORT.some( item => { return imPath.indexOf(item) > -1} ) ? $1 : `/** ${$1} **/` }) ) })) .pipe(sass()) .pipe(replace(/(\/\*\*\s{0,})(@.+)(\s{0,}\*\*\/)/g, ($1, $2, $3) => $3.replace(/\.scss/g, '.wxss'))) .pipe(rename({ extname: '.wxss' })) .pipe(gulp.dest(DIST)) } gulp.task('sass', f_sass) 3.微信小程序使用npm小程序基础库2.2.1以上的版本开始支持npm安装第三方包。官方文档
仔细读了文档，和它的示例代码，不过还是被坑了一会。
node_modules必须放在小程序根目录或其子目录下，npm的package.json也是，否则在微信web开发者工具对dist进行npm构建时会提示找不到npm。
它的npm构建会在代码同级目录生成source map文件，方便做逆向调试。
不过npm的命令是需要在dist目录的上一级使用的，如果直接放在dist里，上一级就用不了，本来理想的方案是放在dist、修改npm寻找node_modules文件的地点，或者放在上一级、修改开发者工具构建时寻找node_modules文件的地点。
但是我实在没查到如何修改，也许看源码可以，所以采用了比较麻烦的方案。就是node_modules放在上一级，写一个gulp task将它整体复制到dist。node_modules毕竟挺大的，复制一份要用去10几秒，开销挺大，不过也只有node_modules更新了需要同步一下，总的来说也还好。
4.使用gulp-tap获取处理的文件名时并计算一个相对路径