原生小程序中实现将scss文件实时编译为wxss文件
全局安装gulp,方便以后直接执行gulp命令
npm install gulp -g
用原生小程序新建一个项目
在小程序根目录(app.js同级目录)中新建package.json文件
npm init -y
安装gulp和相关插件
npm install gulp -s
安装依赖
npm install gulp-changed gulp-rename gulp-sass gulp-watch
在根目录创建
gulpfile.js
文件,代码如下:var gulp = require('gulp');
var sass = require('gulp-sass');
var rename = require('gulp-rename')
var changed = require('gulp-changed')
var watcher = require('gulp-watch') //自动监听
gulp.task('default', gulp.series(function() {
watcher('./pages/**/*.scss', function(){
miniSass();
});
})); //手动编译
gulp.task('sass', function(){
miniSass();
}); function miniSass(){
return gulp.src('./pages/**/*.scss')//需要编译的文件
.pipe(sass({
outputStyle: 'expanded'//展开输出方式 expanded
}))
.pipe(rename((path)=> {
path.extname = '.wxss'
}))
.pipe(changed('./pages'))//只编译改动的文件
.pipe(gulp.dest('./pages'))//编译
.pipe(rename((path)=> {
console.log('编译完成文件:' + 'pages\\' + path.dirname + '\\' + path.basename + '.scss')
}))
}
在根目录运行gulp进行监听编译
gulp
这个时候在page目录下修改保存scss文件就会实时转换为wxss文件啦!
原生小程序中实现将scss文件实时编译为wxss文件的更多相关文章
- WePY 在手机充值小程序中的应用与实践
wepyjs 发布了两个月了,中间经历了很多版本更新,也慢慢开始有一些用户选择 wepyjs 作为开发框架来开发小程序,比如一些线上小程序. 以及一些来自网上的 wepyjs 的相关资源: demo源 ...
- 在微信小程序中使用 echarts 图片-例 折线图
首先进入echarts官方[https://echarts.apache.org/handbook/zh/get-started/].这边只需要在小程序中简单应用一下echarts折线图 所以不需要把 ...
- 如何把原生小程序项目合并的mpvue项目中
当时的情景是这样的: 使用mpvue写微信小程序,写着写着项目写到一半了,突然间不想这样继续写了,想切换回原生小程序语法去写剩余部分. 如下图,红色框里的功能是已经用mpvue完成的功能,绿色框部分的 ...
- 如何在原生微信小程序中实现数据双向绑定
官网:https://qiu8310.github.io/minapp/ 作者:Mora 在原生小程序开发中,数据流是单向的,无法双向绑定,但是要实现双向绑定的功能还是蛮简单的! 下文要讲的是小程序框 ...
- 小程序中搜索文件,阅览pdf,分享文件链接,评论表情符号
小程序中搜索文件,阅览pdf,分享文件链接,评论表情符号 https://blog.csdn.net/hotqin888/article/details/84111389 小程序中打开网页和pdf h ...
- 全栈开发工程师微信小程序-中(中)
全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, ...
- 在小程序中实现 Mixins 方案
摘要: 小程序开发技巧 作者:jrainlau 原文:在小程序中实现 Mixins 方案 Fundebug经授权转载,版权归原作者所有. 在原生开发小程序的过程中,发现有多个页面都使用了几乎完全一样的 ...
- 高大上的微信小程序中渲染html内容—技术分享
大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题.但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 解决方案 wxP ...
- 开发微信小程序中SSL协议的申请、证书绑定、TLS 版本处理等
在上篇随笔<基于微信小程序的系统开发准备工作>介绍了开发微信小程序的一些前期的架构设计.技术路线 .工具准备等方面内容,本篇随笔继续这个步骤,逐步介绍我们实际开发过程中对SSL协议的申请及 ...
随机推荐
- 上传视频到七牛云Django后端实现
1.上传视频到七牛云django端实现 1.1 获取七牛云秘钥 https://portal.qiniu.com/user/key 1.2 在syl/settings.py中配置七牛云上传 参考官方 ...
- websocket简单实现五子棋即时对战功能
几年前做的一个小demo,代码比较老,先上下html显示效果图 因为代码中注释比较详细,所以就直接上代码了 html代码,也就是上图展示的效果页面 <!DOCTYPE html> < ...
- `prometheus-net.DotNetRuntime` 获取 CLR 运行指标原理解析
prometheus-net.DotNetRuntime 介绍 Intro 前面集成 Prometheus 的文章中简单提到过,prometheus-net.DotNetRuntime 可以获取到一些 ...
- 使用Jmeter测试快速入门
一 创建线程组 1.1.2. 线程组主要包含三个参数:线程数.准备时长(Ramp-Up Period(in seconds)).循环次数. 1.1.3. 线程数:虚拟用户数.一个虚拟用户占用 ...
- 并发编程实战-J.U.C核心包
J.U.C - AQS java.util.concurrent(J.U.C)大大提高了并发性能,AQS 被认为是 J.U.C 的核心.它核心是利用volatile和一个维护队列. AQS其实就是ja ...
- 从内存泄露、内存溢出和堆外内存,JVM优化参数配置参数
内存泄漏 内存泄漏是指程序在申请内存后,无法释放已申请的内存空间,无用对象(不再使用的对象)持续占有内存或无用对象的内存得不到及时释放,从而造成内存空间的浪费.内存泄漏最终会导致OOM. 造成内存泄漏 ...
- 老猿学5G:多量纲计费与QoS的QCI、5QI、ARP、GBR和MBR
☞ ░ 前往老猿Python博文目录 ░ 一.多量纲计费 多量纲计费是与传统的计费模式相区别的一种计费模式,传统的计费基本上都是通过使用量.使用时长或包固定时长等方式计费,而多量纲计费是指在考虑以上方 ...
- PyQt(Python+Qt)学习随笔:QListView的spacing属性
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QListView的spacing属性用于控制视图布局中数据项周围填充的空白空间的大小.缺省值为0, ...
- 混合云存储打开的正确姿势——腾讯云存储网关 CSG
近年来,随着云计算的发展,越来越多的企业选择将IT系统基础设施转移到云上,上云有助于推动企业加快信息化.数字化.智能化的转型,但是很多企业对传统的业务系统依赖程度较高,短时间内将业务迁移上云将会面临很 ...
- 沪苏浙皖共同打造区块链数字经济发展高地,Panda Global表示区块链真的来了!
近日,在长三角一体化发展重大合作事项签约仪式上,沪苏浙皖经信部门共同签约,推进长三角区块链数字经济一体化发展,共同打造数字经济发展高地.从此次签约活动也能看出来,区块链数字现金的发展已经得到了认可,早 ...