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 有个自带的 不想写了
作者：玩鲁班的哥哥
链接：https://juejin.cn/post/7018481715093962789