Gulp
安装
npm install --global gulp-cli
npm install --save-dev gulp
根目录下创建gulpfile.js
依赖
gulp-postcss
PostCSS 是使用 JS 插件来转换 CSS 的工具，我们核心就是利用postcss将sass语法转换成css。
- postcss-nested 嵌套
- postcss-color-function 处理颜色
- postcss-simple-vars 变量
- postcss-extend extend
- postcss-mixins mixins
- postcss-strip-inline-comments 祛除样式内的注释
gulp-rename
因为我们最终想要的是qq小程序支持的qss文件，所以需要一个重命名的插件。
gulp-watch
利用watch监听css文件，我们可以保持qss文件的即时更新。gulp实际本身是用gulp.watch()方法的，但该方法无法监听到新增加的文件，除非每次新增后重新执行gulp命令，不太方便。因此引入gulp-watch来解决这个问题，它可以监听文件改变、新增、删除。
gulp-plumber
gulp执行过程中，管道里的任一环出错都会导致整个执行过程中断，按直觉来说这个逻辑是合理的，但因为我们引入了监听，所以很多的时候一些错误的保存也会导致postcss执行，随后抛出错误导致gulp中断，gulp-plumber这是可以防止因gulp插件的错误而导致管道中断，plumber可以阻止 gulp 插件发生错误导致进程退出并输出错误日志。
gulp-cached
通过watch监听然后即时更新的逻辑已经没有问题，但是执行后会发现，每次修改css或js时都是全部更新，如果项目较大，每次全部重新编译无疑是浪费大量时间的。因此我们又引入了gulp-cached，该插件可以通过对比文件md5，达到我们想要的只编译修改过的文件
。
实现
API介绍
- task() 创建一个任务
- src() 读取数据源转换成stream
- pipe() 管道-可以在中间对数据流进行处理
- dest() 输出数据流到目标路径
- series() 顺序执行多个任务
- prallel() 并行执行多个任务
const gulp = require('gulp')
const plumber = require('gulp-plumber');
const cached = require('gulp-cached');
const watch = require('gulp-watch');
const postcss = require('gulp-postcss')
const rename = require('gulp-rename');
gulp.task('qss', () => {
return gulp.src('**/*.css')
.pipe(plumber({
errorHandler: function (err) {
console.log(err);
}
}))
.pipe(cached('qss'))
.pipe(postcss([
require('postcss-nested'),
]))
.pipe(rename((path) => {
path.extname = '.qss'
}))
.pipe(gulp.dest('./'))
})
gulp.task('qss:watch', (cb) => {
watch('**/*.css')
.pipe(plumber({
errorHandler: function (err) {
console.log(err);
}
}))
.pipe(cached('qss'))
.pipe(postcss([
require('postcss-nested'),
]))
.pipe(rename((path) => {
path.extname = '.qss'
}))
.pipe(gulp.dest('./'))
cb()
})
gulp.task('default', gulp.series('qss', 'qss:watch'))