gulp 打包less、es6、转化rem

gulp（一）

gulp 和gulp-less

最近本人有一个需求需要在非三大框架的场景下写页面。例如官网之类的。

一开始打算使用webpack 将scss文件打包成 css 并且分离开来，但是在使用其中的一款插件。ExtractTextPlugin 总是报错...

一天的debug

所以如果遇到类似需求，还是用gulp比较划算。

gulp

如果不太了解的话建议先看看官网文档

快速开始

官网第一条

npm install gulp-cli -g

npm install gulp -D

你需要建立一下以下格式的文件目录（本人有最终解释权）

dist : 处理之后的js css 之类的也是你需要引用的
- js
- css
- ...
src :
- es
- less
- ...
index.html 主页面
postcss.config.js postcss配置目前没成功过 yd
gulpfile.js gulp配置文件只能叫这个名字了

创建文件

package.json 可能有多余的包但是这是写开发编译的 so en~~


{
  "name": "gulptemp",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.13.14",
    "@babel/preset-env": "^7.13.12",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-babel": "^8.0.0",
    "gulp-postcss": "^9.0.0",
    "gulp-pxtorem": "^3.0.0",
    "postcss": "^8.2.9",
    "postcss-less": "^4.0.1",
    "postcss-plugin": "^1.0.0",
    "sugarss": "^3.0.3"
  },
  "dependencies": {
    "gulp-less": "^4.0.1"
  }
}

gulpfile.js


const { watch, series, task, src, dest } = require('gulp');
const less = require('gulp-less');
const pxtorem = require('gulp-pxtorem');
const autoprefixer = require('gulp-autoprefixer');
const babel = require('gulp-babel');
// 处理js
function es(cb) {
  src('./src/es/*.js')
    .pipe(babel({
      presets: ['@babel/env']
    }))
    .pipe(dest('./dist/js'));
  cb();
}

function css(cb) {
  src('./src/less/*.less')
    .pipe(less()) // less转css
    .pipe(autoprefixer({ // 自动添加前缀 
      cascade: false
    }))
    .pipe(pxtorem({ // 转化rem
      rootValue: 37.5
    }))
    .pipe(dest('./dist/css'));
  cb();
}

task('dev', function(cb) {
  watch('src/es/*.js', series(es))
  watch('src/less/*.less', series(css))
  cb()
})

运行

  // 以上我只放了最重要的一些文件其他你按那个啥自己键自己该
  
  npm install
  
  // 执行命令运行这个项目 我没写配置 你会写就写 我懒
  gulp dev 

  // 目前没有启动 server  
  vscode 有个自带的 不想写了