-
全局安装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文件
推荐阅读
- android 关于view的onTouch和onClick同时触发解决方案
- Android 调用系统相机拍照,生命周期重走OnCreate,导致无数据的解决办法
- Android aapt使用小结
- 通过Intent Flags ,从桌面返回到App最后Activity
- Android开发CheckBox控件,全选,反选,取消全选
- Android表单UI及相应控件的事件处理
- Android 字体适配方案
- Android Monkey压力测试使用
- Android,View转换bitmap,bitmap转换drawable
- Android ViewPager+Fragment 在Activity中获取Fragment的控件