【gulp】003.编译less 使用autoprefixer增加前缀 使用babel转换 生成sourcemap

系列文章

【gulp】001.使用gulp自动构建前端页面实现页面复用
【gulp】002.gulp实现页面复用，导航栏样式激活
【gulp】003.编译less 使用autoprefixer增加前缀 使用babel转换 生成sourcemap
东西都不是很多就写在一起了

编译less 使用autoprefixer

const gulp = require("gulp");
const less = require("gulp-less"); //编译less
const autoprefixer = require("gulp-autoprefixer"); //自动增加浏览器前缀

gulp.task("compile", () => {
  return gulp.src("src/**/*.less")
    .pipe(less())
    .pipe(autoprefixer())
    .pipe(gulp.dest("dist/"))
})

src/css/index.less

* {
  margin : 0;
  padding: 0
}

.box {
  user-select: none;
  box-shadow : 0 5px 5px rgba(0, 0, 0, 0.5);
}

执行任务gulp compile
编译后的css
dist/css/index.css

* {
  margin: 0;
  padding: 0;
}
.box {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
}

使用babel转换es5

代码和上面类似

const gulp = require("gulp");
const babel = require("gulp-babel"); //转es5
const sourcemaps = require("gulp-sourcemaps")

gulp.task("babel", () => {
  return gulp.src("src/**/*.js")
  //也可以在项目下创建一个.babelrc文件
    .pipe(babel({
      "presets": ["@babel/env"],
      "plugins": []
    }))
    .pipe(gulp.dest("dist/"))
})

生成sourcemap

const gulp = require("gulp");
const less = require("gulp-less"); //编译less
const babel = require("gulp-babel"); //转es5
const autoprefixer = require("gulp-autoprefixer"); //自动增加浏览器前缀

gulp.task("compile", () => {
  return gulp.src("src/**/*.less")
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(autoprefixer())
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("dist/"))
})

gulp.task("babel", () => {
  return gulp.src("src/**/*.js")
    .pipe(sourcemaps.init())
    .pipe(babel({
      "presets": ["@babel/env"],
      "plugins": []
    }))
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("dist/"))
})