微信小程序gulp，less输出wxss

开发了几个微信小程序，当时试过使用wepy 开发， 但是觉得生成的文件太大了

就放弃了，一直用wxss写css样式，到后面发现css维护起来实在是太麻烦了

最近需要开发一个新项目，就研究了一下gulp，gulp-less 来写

使用到的gulp插件： gulp-less, gulp-rename

1. 安装node（使用npm，可以添加淘宝镜像）,安装gulp

2. 创建一个目录，使用cmd打开该目录

3. npm init 创建项目package.json

4. npm install gulp, gulp-less,gulp-rename

新建一个gulpfile.js 文件

//导入工具包 require('node_modules里对应模块')

var gulp = require('gulp'),

less = require('gulp-less');

rename = require("gulp-rename");

//定义一个testLess任务（自定义任务名称）

gulp.task('less', function () {

gulp.src('./less/**/*.less') //该任务针对的文件

.pipe(less()) //该任务调用的模块

.pipe(rename(function (path) { // 修改生成文件后缀名

path.extname = ".wxss";

}))

.pipe(gulp.dest('dist/res/style')); //生成*.wxss

});

gulp.task('watch',function(){

gulp.watch('./less/**/*.less',['less']);

})

gulp.task('default',['watch']); //定义默认任务 elseTask为其他任务，该示例没有定义elseTask任务

文件目录自己设计

使用vscode编辑器，可以直接在编辑器打开终端 比较方便