微信小程序——gulp处理文件

ByteLuminaPro
• 阅读 2875

懒癌直接贴代码，想写在写
因为最近搞了一下小程序，直接使用微信的开发者工具搞感觉有点不习惯，并且看了几篇给小程序瘦身的博客，决定给自己的项目做一套配置文件，使用gulp来支持sass scss文件编译以及上传之前压缩文件的空行之类的。

至于使用gulp没有使用webpack的原因，因为我不想处理js文件，可能是我研究明白吧。后续还可以添加把assets目录里面的资源上传到ftp或者cdn的功能~

JSON

json文件开发时候直接复制到dist目录下，生产的时候使用jsonminify压缩

gulp.task('json',() => {
  return gulp.src('./src/**/*.json')
    .pipe(gulp.dest('./dist'))
})

gulp.task('jsonPro',  () => {
  return gulp.src('./src/**/*.json')
    .pipe(jsonminify())
    .pipe(gulp.dest('./dist'))
})

wxml

wxml文件开发时候直接复制到dist目录下，生产的时候使用htmlmin压缩

gulp.task('templates', () => {
  return gulp.src('./src/**/*.wxml')
    .pipe(gulp.dest('./dist'))
})

gulp.task('templatesPro', () => {
  return gulp.src('./src/**/*.wxml')
    .pipe(htmlmin({
      collapseWhitespace: true,
      removeComments: true,
      keepClosingSlash: true
    }))
    .pipe(gulp.dest('./dist'))
});

wxss

wxss文件，这个处理就比较多了，没有使用的时候只能使用css，对于我这种习惯sass的人来说有点痛苦。于是添加了sass支持，支持了.sass后缀的文件，会编译成wxss格式的，原有wxss文件中也支持了scss语法

gulp.task('wxss', () => {
  var combined = combiner.obj([
    gulp.src(['./src/**/*.{wxss,sass}', '!./src/styles/**']),
    sass().on('error', sass.logError), // gulp sass编译
    autoprefixer([
      'iOS >= 8',
      'Android >= 4.1'
    ]), // autoprofixer 自动添加
    rename((path) => path.extname = '.wxss'), //重命名
    gulp.dest('./dist')
  ]);

  combined.on('error', handleError);
});

gulp.task('wxssPro', () => {
  var combined = combiner.obj([
    gulp.src(['./src/**/*.{wxss,sass}', '!./src/styles/**']),
    sass().on('error', sass.logError),
    autoprefixer([
      'iOS >= 8',
      'Android >= 4.1'
    ]),
    minifycss(), // 压缩 css文件
    rename((path) => path.extname = '.wxss'),
    gulp.dest('./dist')
  ]);

  combined.on('error', handleError);
});

JavaScript

虽说微信的IDE也支持ES6，但是还不是很完善，所以我使用Babel编译js。使用uglify压缩的js

gulp.task('scripts', () => {
  return gulp.src('./src/**/*.js')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(gulp.dest('./dist'))
})

gulp.task('scriptsPro', () => {
  return gulp.src('./src/**/*.js')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(uglify({
      compress: true,
    }))
    .pipe(gulp.dest('./dist'))
})

gulpfile.js

const gulp = require('gulp')
const del = require('del')
const path = require('path')
const autoprefixer = require('gulp-autoprefixer')
const htmlmin = require('gulp-htmlmin')
const sass = require('gulp-sass')
const jsonminify = require('gulp-jsonminify2')
const gutil = require('gulp-util')
const combiner = require('stream-combiner2');
const babel = require('gulp-babel')
const uglify = require('gulp-uglify')
const rename = require("gulp-rename")
const minifycss = require('gulp-minify-css')
const runSequence = require('run-sequence')
const jsonlint = require("gulp-jsonlint")

var colors = gutil.colors;
const handleError = function(err) {
  console.log('\n')
  gutil.log(colors.red('Error!'))
  gutil.log('fileName: ' + colors.red(err.fileName))
  gutil.log('lineNumber: ' + colors.red(err.lineNumber))
  gutil.log('message: ' + err.message)
  gutil.log('plugin: ' + colors.yellow(err.plugin))
};

gulp.task('clean', () => {
  return del(['./dist/**'])
})

gulp.task('watch', () => {
  gulp.watch('./src/**/*.json', ['json']);
  gulp.watch('./src/assets/**', ['assets']);
  gulp.watch('./src/**/*.wxml', ['templates']);
  gulp.watch('./src/**/*.wxss', ['wxss']);
  gulp.watch('./src/**/*.sass', ['wxss']);
  gulp.watch('./src/**/*.js', ['scripts']);
});

gulp.task('jsonLint', () => {
  var combined = combiner.obj([
    gulp.src(['./src/**/*.json']),
    jsonlint(),
    jsonlint.reporter(),
    jsonlint.failAfterError()
  ]);

  combined.on('error', handleError);
});

gulp.task('json', ['jsonLint'], () => {
  return gulp.src('./src/**/*.json')
    .pipe(gulp.dest('./dist'))
})

gulp.task('jsonPro', ['jsonLint'], () => {
  return gulp.src('./src/**/*.json')
    .pipe(jsonminify())
    .pipe(gulp.dest('./dist'))
})

gulp.task('assets', () => {
  return gulp.src('./src/assets/**')
    .pipe(gulp.dest('./dist/assets'))
})

gulp.task('templates', () => {
  return gulp.src('./src/**/*.wxml')
    .pipe(gulp.dest('./dist'))
})

gulp.task('templatesPro', () => {
  return gulp.src('./src/**/*.wxml')
    .pipe(htmlmin({
      collapseWhitespace: true,
      removeComments: true,
      keepClosingSlash: true
    }))
    .pipe(gulp.dest('./dist'))
});

gulp.task('wxss', () => {
  var combined = combiner.obj([
    gulp.src(['./src/**/*.{wxss,sass}', '!./src/styles/**']),
    sass().on('error', sass.logError),
    autoprefixer([
      'iOS >= 8',
      'Android >= 4.1'
    ]),
    rename((path) => path.extname = '.wxss'),
    gulp.dest('./dist')
  ]);

  combined.on('error', handleError);
});

gulp.task('wxssPro', () => {
  var combined = combiner.obj([
    gulp.src(['./src/**/*.{wxss,sass}', '!./src/styles/**']),
    sass().on('error', sass.logError),
    autoprefixer([
      'iOS >= 8',
      'Android >= 4.1'
    ]),
    minifycss(),
    rename((path) => path.extname = '.wxss'),
    gulp.dest('./dist')
  ]);

  combined.on('error', handleError);
});

gulp.task('scripts', () => {
  return gulp.src('./src/**/*.js')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(gulp.dest('./dist'))
})

gulp.task('scriptsPro', () => {
  return gulp.src('./src/**/*.js')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(uglify({
      compress: true,
    }))
    .pipe(gulp.dest('./dist'))
})

gulp.task('dev', ['clean'], () => {
  runSequence('json',
    'assets',
    'templates',
    // 'sass',
    'wxss',
    'scripts',
    'watch');
});

gulp.task('build', [
  'jsonPro',
  'assets',
  'templatesPro',
  'wxssPro',
  'scriptsPro'
]);

gulp.task('pro', ['clean'], () => {
  runSequence('build');
})

依赖

这里的gulp-jsonminify2 以及他相关的依赖根据自己的业务修复了一下解决了json空对象格式失败的问题

"dependencies": {
    "autoprefixer": "^6.6.0",
    "babel-eslint": "^7.1.1",
    "babel-preset-latest": "^6.16.0",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-babel": "^6.1.2",
    "gulp-eslint": "^3.0.1",
    "gulp-htmlmin": "^3.0.0",
    "gulp-jsonlint": "^1.2.0",
    "gulp-jsonminify2": "^1.0.0",
    "gulp-load-plugins": "^1.4.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-postcss": "^6.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-ruby-sass": "^2.1.1",
    "gulp-sass": "^3.1.0",
    "gulp-uglify": "^2.0.0",
    "gulp-util": "^3.0.8",
    "run-sequence": "^1.2.2",
    "stream-combiner2": "^1.1.1"
  }

原文地址

小程序
点赞
收藏
评论区
推荐文章
小森森 小森森
•
2年前
计划助手V1.0-微信小程序(QQ小程序)-源代码分享
疫情期间在家感觉好无聊啊，于是利用空闲时间做了一个用来记录和管理小目标时间的小程序，命名为《小沙漏》。QQ版本小程序同步上线，QQ小程序叫《时间小沙漏》，欢迎大家前来体验，后期也会添加其他的新功能哦【区别】：微信小程序的代码与QQ小程序的源码是不一样的。微信小程序的源码基于微信小程序云开发，需要在有网络的情况下使用，具有同步功能，所有记录在删除小
1672
0
0
胡哥有话说 胡哥有话说
•
4年前
喜大普奔，微信终于支持外网打开小程序啦！
前言千呼万唤始出来，微信小程序终于支持以URLScheme的形式从外部唤起了。longlongago我们只能在微信内的网页中使用微信开发标签小程序跳转按钮
1853
0
0
秃头王路飞 秃头王路飞
•
2年前
微信原生小程序如何修改第三方样式
一级标题微信原生小程序如何修改第三方样式env:1.微信原生小程序（基础库2.272）2.tdesignminiprogram（最低基础库版本^2.6.5）近期在写微信原生小程序，有一个需求就是去修改一个第三方的库的样式，在写的
1163
0
0
梦 梦
•
4年前
微信小程序wxml使用substring
首先创建subutils.wxs文件varsubfunction(val,start0,end17){if(val.length0||valundefined){return}if(val.lengthend){returnval.substring(start
1775
0
0
Easter79 Easter79
•
3年前
Taro小程序自定义顶部导航栏
微信自带的顶部导航栏是无法支持自定义icon和增加元素的，在开发小程序的时候自带的根本满足不了需求，分享一个封装好的组件，支持自定义icon、扩展dom，适配安卓、ios、h5，全面屏。我用的是京东的Taro多端编译框架写的小程序，原生的也可以适用，用到的微信/taro的api做调整就行，实现效果如下。!在这里插入图片描述(https://i
1564
0
0
Wesley13 Wesley13
•
3年前
5G消息与微信小程序互联互通？北京国都互联这么做……
最近微信小程序上线了一个超级流量的新入口URLScheme，据微信官网介绍，scheme码适用于短信、邮件、外部网页等拉起小程序的业务场景。通过小程序页面的URLScheme，可以在短信、邮件或微信外部的网页中打开微信小程序。意义在于将微信流量生态延伸到微信以外渠道，进一步完善了小程序和外部渠道互通的营销场景。北京国都互联第一时
1145
0
0
Wesley13 Wesley13
•
3年前
10分钟上线
_摘要：_ 阿里云函数计算是一个事件驱动的全托管计算服务。通过函数计算，您无需管理服务器等基础设施，只需编写代码并上传。微信小程序是一种不需要下载安装即可使用的应用，它可以在微信内被便捷地获取和传播。当微信小程序遇见serverless，他们会产生奇妙火花，利用函数计算可以快速搭建微信小程序的serverle.点此查看原文：http://clic
824
0
0
LibraHeresy LibraHeresy
•
2年前
Taro CI 持续集成框架的配置与使用
痛点使用Taro跨端框架开发小程序时，需要切换三个界面，进行三次操作，才能上传成功，上传代码步骤过于繁琐。且多人开发时，如果想让自己代码生效，需要切换体验版代码为自己上传的版本。vscode打包微信开发者工具上传设置为体验版方案使用微信官方的CI插件包，即
630
0
0
京东云开发者 京东云开发者
•
1年前
京东小程序平台助力快送实现跨端 | 京东云技术团队
前言：京东小程序开放平台是由京东自主研发的开发者开放平台，类似于微信和支付宝的小程序开放平台，提供了丰富的开放能力和完整的小程序开发生命周期所需的功能。开发者可以轻松地使用开发者工具IDE进行开发、调试、预览和代码转换，并在控制台进行线上小程序发布、审核、
600
0
0
ByteLuminaPro
ByteLuminaPro
Lv1
我不躲不藏，等生活爱我。
文章
6
粉丝
0
获赞
0
热门文章
起步-学习php扩展开发的背景
vue如何通过NodeJs本地获取微信access_token及签名,并调用微信接口
go-zero源码阅读-服务部署
学习笔记DL007:Moore-Penrose伪逆，迹运算，行列式，主成分分析PCA
PHP socket初探 --- 颤颤抖抖开篇libevent（一）