基於gulp在小程序中使用less

項目文件夾下新建src、dist文件夾、gulpfile.js、package.json
src爲開發時的目錄，dist爲打包後的文件夾，在小程序開發工具中指向dist文件夾。
這是src的目錄：

這是其中app.less中的代碼，將less文件夾中的less文件引入，

//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

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/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文件夾的目錄：

大功告成，
終於可使用less語法寫小程序了，切頁面速度蹭蹭蹭~