gulp4 配置less、"postcss-px-to-viewport、gulp-connect实现实时刷预览等

gulp4 相对以前的版本进行了修改，不再支持 task 后面第二个参数任务数组的写法，改为以下两种方式来执行任务

• gulp.parallel() --并行运行任务
• gulp.series() --运行任务序列

另外，gulp4 将 gulp-cli 和gulp分开了， cli只包含主要的命令，因此体积大幅缩小。 在使用前需要全局安装 gulp-cli， 以及本地安装gulp。

下面主要处理多页面开发效率的三个问题：

• less自动编译
• postcss转vw（屏幕自适应）
• 热更新（不需要手动刷新浏览器）

直接上代码吧。

package.json

{
  "name": "name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.8.0",
    "gulp": "^4.0.2",
    "gulp-connect": "^5.7.0",
    "gulp-less": "^4.0.1",
    "gulp-postcss": "^8.0.0",
    "postcss-px-to-viewport": "^1.1.1"
  }
}

gulpfile.js

const { src, dest, parallel, watch, series } = require('gulp');

const postcss = require('gulp-postcss');
const connect = require('gulp-connect');
const autoprefixer = require('autoprefixer');
const pxtoviewport = require('postcss-px-to-viewport');

const less = require('gulp-less');

const rootDir = '.';
const lessDir = './static/less';
const cssDir = './static/css/';

const styleTask = (cb) => {
  const processors = pxtoviewport({
    viewportWidth: 800,
    viewportHeight: 450,
    viewportUnit: 'vw',
  });

  src(lessDir + '/*.less', { sourcemaps: true })
    .pipe(less())
    .pipe(postcss([autoprefixer, processors]))
    .pipe(dest(cssDir))
    .pipe(connect.reload());
  cb();
};

const startServer = (cb) => {
  const options = {
    livereload: true,
  };
  connect.server(options);
  cb();
};

const html = (cb) => {
  src(rootDir + '/*.html')
    // .pipe(dest(html_dir))
    .pipe(connect.reload());
  cb();
};

const gulpWatch = (cb) => {
  watch([rootDir + '/*.html'], parallel(html));
  watch([lessDir + '/*.less'], parallel(styleTask));
  cb();
};

const _defaults = series(startServer, styleTask, html, gulpWatch);

exports.default = _defaults;