使用less写微信小程序样式

新建文件目录

src: 源代码

dist: gulp解析后的代码

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.js: gulp配置文件

//gulpfile.js

const 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/**/*.less')

        .pipe(less())

        // .pipe(cssnano())

        .pipe(rename(function(path){

            path.extname = '.wxss';

        }))

        .pipe(gulp.dest('./dist'))

});

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

    return gulp.src([

        '!src/**/*.less',

        'src/**'

        ]).pipe(gulp.dest('./dist'))

})

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

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

    gulp.watch([

        '!src/**/*.less',

        'src/**'

        ], ['pages']);

})

// 使用 gulp.task('default') 定义默认任务

// 在命令行使用 gulp 启动 less 任务和 auto 任务

// gulp.task('default', ['less', 'pages', 'auto'])

gulp.task('default', ['less', 'pages', 'auto']);

运行gulp命令