javascript 使用gulp和autoprefixer将sasst编译为css

Posted 2021-05-04

@charset "UTF-8"

$darkblue: #00008B

.sample
  color: $darkblue
  font-size: large
  display: flex
  background-image: linear-gradient(left, red, orange, yellow, green, blue, indigo, violet)
  user-select: none

.sample {
  color: #00008B;
  font-size: large;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-image: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
  background-image: linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

{
  "name": "sass-autoprefixer-sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build-css": "rm -rf public && gulp build-css"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-plumber": "^1.1.0",
    "gulp-sass": "^3.1.0"
  }
}

const gulp = require("gulp");
const sass = require("gulp-sass");
const autoprefixer = require("gulp-autoprefixer");
const plumber = require("gulp-plumber");
const path = require("path");

gulp.task("build-css", function() {
  gulp.src(path.join(__dirname, "src", "css", "*.sass"))
      .pipe(plumber())
      .pipe(sass())
      .pipe(autoprefixer({browsers: [">= 0.1%"]}))
      .pipe(gulp.dest(path.join(__dirname, "public", "css")));
});