博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
基于gulp在小程序中使用less
阅读量:6842 次
发布时间:2019-06-26

本文共 1516 字,大约阅读时间需要 5 分钟。

项目文件夹下新建src、dist文件夹、gulpfile.js、package.json

src为开发时的目录,dist为打包后的文件夹,在小程序开发工具中指向dist文件夹。
这是src的目录:
clipboard.png
这是其中app.less中的代码,将less文件夹中的less文件引入,

clipboard.png

//package.json{  "homepage": "https://github.com/nimojs/gulp-book",  "version": "0.0.1",  "description": "",  "main": "gulpfile.js",  "license": "MIT",  "devDependencies": {    "gulp": "^3.9.1",    "gulp-autoprefixer": "^4.0.0",    "gulp-cssnano": "^2.1.2",    "gulp-less": "^3.0.2",    "gulp-rename": "^1.2.2"  }}
//gulpfile.jsconst gulp = require('gulp');const less = require('gulp-less');const cssnano = require('gulp-cssnano');const rename = require('gulp-rename');const autoprefixer = require('gulp-autoprefixer');gulp.task('less', function () {    gulp.src('src/app.less')        .pipe(less())        .pipe(cssnano())        .pipe(rename(function(path){            path.extname = '.wxss';        }))        .pipe(gulp.dest('dist'))});gulp.task('pages', function() {    return gulp.src([        'src/app.js',        'src/app.json',        'src/pages/**',        'src/images/**',        'src/utils/**',        'src/components/**',        ], {base: 'src'}).pipe(gulp.dest('dist'))})gulp.task('auto', function () {    gulp.watch(['src/app.wxss', 'src/less/**.less'], ['less']);    gulp.watch(['src/images/*', 'src/pages/**/**/*', 'src/utils/**', 'src/*','src/components/**/*'], ['pages']);})// 使用 gulp.task('default') 定义默认任务// 在命令行使用 gulp 启动 less 任务和 auto 任务gulp.task('default', ['less', 'pages', 'auto'])

在项目文件夹下敲入命令gulp,就会自动编译。

编译后dist文件夹的目录:

clipboard.png

大功告成,

终于可以使用less语法写小程序了,切页面速度蹭蹭蹭~

转载地址:http://oodul.baihongyu.com/

你可能感兴趣的文章
关于前端请求发送时间时而长时而短问题(stalled a lot)
查看>>
Python 工匠:编写条件分支代码的技巧
查看>>
记一次前端面试经历
查看>>
带你探索JUnit 5.4
查看>>
<暗时间> 时间, 不在于你拥有多少, 而在于你怎样使用
查看>>
单例 - iOS
查看>>
戛纳电影节百花齐放,中国明星衣着品味紧跟时尚前沿
查看>>
mysql 存储emoji表情
查看>>
10年测试总监经验分享,你与优秀工程师的距离!
查看>>
2019年在哪里找好的高层次人才扶持政策?
查看>>
解决代码报红:Cannot resolve symbol 'xxx'
查看>>
第71节:Java中HTTP和Servlet
查看>>
Linux开源CommunityBridge平台 提供资金、安全以及人员三项关键
查看>>
Python爬虫入门教程 5-100 27270图片爬取
查看>>
Day1:html和css
查看>>
开源如何在云上存活?
查看>>
Android 网络基础之 HTTP
查看>>
ES6实现继承
查看>>
有擎企业系统v1.0.0 积木式搭建网站,页面构建更灵活
查看>>
小葵花妈妈课堂开课了:《Handler Looper Message 浅析》
查看>>