小程序gulp构建scss

小程序引入gulp

小程序编码开发的时候，很多小伙伴会想要使用scss进行开发，这里我找到两个方案

• 使用vscode插件easy sass，网上有很多文章介绍了，我就不赘述了
• 使用gulp构建，这种方案的好处是，不仅可以使用scss编码，还可以使用更完整的es6新特性编码体验，同时编码后也可以进行压缩，得到非常小的的小程序包体积 什么时候使用第一种方案呢？如果你是一个人开发，没有多人协同，且对生成的文件没有体积要求，就可以使用第一种方案。方案的选择没有对错，适合自己的才是最好的。 这里重点介绍第二种方案。有兴趣的小伙伴可以看看完成的脚手架 github地址 并帮忙star

如何在小程序代码中引入gulp呢？其实和一般的项目引入是一样的，在小程序的根目录，打开命令行工具

npm i gulp del gulp-autoprefixer gulp-htmlmin gulp-sass gulp-jsonminify2 gulp-babel gulp-uglify gulp-rename gulp-minify-css @babel/core @babel/preset-env --save-dev

进行引入。然后在根目录新增一个gulpfile.js的文件。

因为构建大体通用，我就直接上代码了。

const gulp = require('gulp')
const del = require('del')
const autoprefixer = require('gulp-autoprefixer')
const htmlmin = require('gulp-htmlmin')
const sass = require('gulp-sass')
const jsonminify = require('gulp-jsonminify2')
const babel = require('gulp-babel')
const uglify = require('gulp-uglify')
const rename = require("gulp-rename")
const minifycss = require('gulp-minify-css')
const { series } = require('gulp')



gulp.task('clean', () => {
  return del(['./dist/**'])
})

gulp.task('watch', () => {
  gulp.watch(['./**/*.json', '!./node_modules/**', '!./dist/**'], gulp.series('json'));
  gulp.watch(['./assets/**', '!./node_modules/**', '!./dist/**'], gulp.series('assets'));
  gulp.watch(['./**/*.wxml', '!./node_modules/**', '!./dist/**'], gulp.series('templates'));
  gulp.watch(['./**/*.wxss', '!./node_modules/**', '!./dist/**'], gulp.series('wxss'));
  gulp.watch(['./**/*.sass', '!./node_modules/**', '!./dist/**'], gulp.series('wxss'));
  gulp.watch(['./**/*.scss', '!./node_modules/**', '!./dist/**'], gulp.series('wxss'));
  gulp.watch(['./**/*.js', '!./node_modules/**', '!./dist/**'], gulp.series('scripts'));
});



gulp.task('json', () => {
  return gulp.src(['./**/*.json', '!./node_modules/**'])
    .pipe(gulp.dest('./dist'))
})

gulp.task('jsonPro', () => {
  return gulp.src(['./**/*.json', '!./node_modules/**'])
    .pipe(jsonminify())
    .pipe(gulp.dest('./dist'))
})

gulp.task('assets', () => {
  return gulp.src('./assets/**')
    .pipe(gulp.dest('./dist/assets'))
})

gulp.task('templates', () => {
  return gulp.src('./**/*.wxml')
    .pipe(gulp.dest('./dist'))
})

gulp.task('templatesPro', () => {
  return gulp.src(['./**/*.wxml', '!./node_modules/**'])
    .pipe(htmlmin({
      collapseWhitespace: true,
      removeComments: true,
      keepClosingSlash: true
    }))
    .pipe(gulp.dest('./dist'))
});

gulp.task('wxss', () => {
  return gulp.src(['./**/*.{wxss,scss,sass}', '!./styles/**', '!./node_modules/**']).pipe(sass()).pipe(autoprefixer(['iOS >= 8','Android >= 4.1'])).pipe(rename((path) => path.extname = '.wxss')).pipe(gulp.dest('./dist'))
});

gulp.task('wxssPro', () => {
  return gulp.src(['./**/*.{wxss,scss,sass}', '!./styles/**', '!./node_modules/**']).pipe(sass()).pipe(autoprefixer(['iOS >= 8','Android >= 4.1'])).pipe(minifycss()).pipe(rename((path) => path.extname = '.wxss')).pipe(gulp.dest('./dist'))
});

gulp.task('scripts', () => {
  return gulp.src(['./**/*.js', '!./node_modules/**'])
  .pipe(babel({presets: ['@babel/preset-env']}))
    .pipe(gulp.dest('./dist'))
})

gulp.task('scriptsPro', () => {
  return gulp.src(['./**/*.js', '!./node_modules/**'])
    .pipe(babel({presets: ['@babel/preset-env']}))
    .pipe(uglify({
      compress: true,
    }))
    .pipe(gulp.dest('./dist'))
})

gulp.task('dev', gulp.series(['clean'],gulp.parallel('json',
    'assets',
    'templates',
    // 'sass',
    'wxss',
    'scripts',
    'watch')),function () {})

gulp.task('build', gulp.series([
  'jsonPro',
  'assets',
  'templatesPro',
  'wxssPro',
  'scriptsPro'
]));

const pro = series('clean', 'build')
gulp.task('pro', gulp.series(['clean', 'build'], (done) => {
  done()
}))

这样，就完成了。
现在我们来试试构建，在命令行打入以下代码：

npx gulp pro

然后看看，根目录下是不是多了一个dist目录，里面的代码也被压缩过了。
在开发环境下，我们还可以执行watch，实现即时单任务构建：

npx gulp watch

结语

小程序引入gulp构建需要把微信开发者工具的项目目录设置为dist目录，才可以看得到即时的视图结果。gulp构建适合多人共同开发，随心所欲的引入你想要的构建任务。 小哥码字不易，转载请注明出处小程序gulp构建scss