前置条件
| 库 | 版本 |
|---|---|
| gulp | 4.0.2 |
| nodejs | 13 |
（不保证以下内容适合所有版本）
更新日期：
- 191223
CSS的vw适配与压缩
需求：
- 使用vw适配方案做移动端适配
- 压缩css
对于 vw 适配方案的实现，我使用到了 postcss 与 postcss-px-to-viewport 来实现。
对于压缩 css 的需求，使用到了 gulp-clean-css 来实现（网上也有说使用gulp-minify-css 拓展的，但是这个拓展现在已经弃用了，gulp-clean-css 更受推荐）。
Step 1: 首先安装依赖
npm i --save-dev gulp, gulp-clean-css, gulp-postcss, postcss-px-to-viewport
Step 2: 编写 Gulp 任务
const {
src,
dest
} = require('gulp');
const postcss = require('gulp-postcss');
const pxtoviewport = require('postcss-px-to-viewport');
const cleanCSS = require('gulp-clean-css');
/**
* 转译css：px单位转成vw单位，压缩css文件
*/
const transpileCSS = () => {
const processors = [pxtoviewport({
// 视窗宽度，和设计图一致
viewportWidth: 750,
// 单位精度，小数点后四位
unitPrecision: 4,
// 视窗宽度
viewportUnit: 'vw'
})];
return src(['css/**/*.css'], {
sourcemaps: true
})
// 转译px单位至vw单位
.pipe(postcss(processors))
// 压缩css文件：去除注释与多余的空格空行等
.pipe(cleanCSS())
// 构建到build/css目录
.pipe(dest('build/css'));
};
// 导出css
exports.css = transpileCSS;
控制台执行命令
npx gulp css
JS的转译与压缩
需求：
- 适配旧版本浏览器
- 压缩 js 代码
对于 JS 的转译，我使用到了 babel转译工具使得我们可以使用最新的语法，且不用担心适配旧版本的浏览器。使用了uglifyjs来做js压缩。
Step 1: 首先安装需要的包
npm i --save-dev gulp-babel, @babel/preset-env, @babel/core, gulp-uglify
Step 2: 编写 gulp 命令
const {
src,
dest
} = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
/**
* 转译并压缩 js 代码
*/
const transpileJS = () => {
// 首先取得app/static/scripts下的所有为.js的文件（**/的意思是包含所有子文件夹)
return src(['js/**/*.js'], {
ignore: ['js/lib/**/*.js'],
sourcemaps: true
})
//将ES6代码转译为可执行的JS代码
.pipe(babel())
//js压缩
.pipe(uglify())
//将转译压缩后的文件输出到 build/js 下（假如没有dist目录则自动生成dist目录）
.pipe(dest('build/js'));
}
exports.js = transpileJS;
Step 3: 在项目根目录下新建一个 .babelrc 文件，对 babel 进行配置（babel 配置项很多，不做赘述）。下面使用了 babel 预设的配置
{
"presets": [
["@babel/preset-env", {
"loose": true,
"modules": false
}]
]
}
Step 4: 控制台运行脚本
npx gulp js
监听文件修改，并自动编译
//
const watchModify = () => {
watch(['css/**/*.css'], transpileCSS);
watch(['js/**/*.js'], transpileJS);
}
exports.watch = watchModify;
npx gulp watch
