gulp
2022 年 3 月 19 日
- 对文件进行自动化操作使用 gulp
- 全局安装 gulp : npm i gulp -g
- 初始化项目:npm init --yes
- 开发者模式安装 gulp : npm i gulp -D
- 建立 gulpfile.js 文件:在项目中建立 gulpfile.js 文件
- 在 gulpfile.js 文件中写自动化代码
- 在 gulpfile 文件中写自动化代码
- 先通过 require 引入 gulp
- 在 gulpjs.com 网站找到需要使用的 gulp 插件
- 通过插件说明在相关项目中安装相关插件
- 压缩插件使用的是 npm i gulp-clean-css --save-dev;转化 less 文件使用的是 npm i gulp-less -D……
- 需要在项目中引用通过 require 引入插件
var { src, dest } = require("gulp");
- 创建一个函数:test = ()=>{};在函数返回 return gulp.src(“目标文件位置”).pipe(less/引用 gulp-less 时定所赋值的变量/(/使用 less 进行转化/)).pipe(miniclean(/引入 gulp-clean-css 时所赋值的变量/)).pipe(dest(“需要操作到的文件位置”))
var dest1 = () => {
return (
src("src/style/min.less")
.pipe(lesscss())
.pipe(autopre())
.pipe(minicss())
.pipe(dest("dist"))
);
};
- 如果想在操作文件位置将所有的文件目录样式一起传进来可以在 src 的第二个参数传入{base:“需要的目录样式目录名”}
- 通过 module.exports={}进行抛出
2022 年 3 月 20 日
-
对 css 代码进行游览器兼容性处理,可以使用 gulp 中的 autoprefixer 插件进行兼容性处理
- 先在项目中安装 autoprefixe:npm i gulp-autoprefixer -D
- 在项目中的 gulpfile.js 文件中引入 autoprefixer:const autopre = require(“gulp-autoprefixer”)
- 在项目中使用 autopre 变量添加:pipe(autopre());
- 自动化将 ES6 的代码文件转化成 ES5 需要使用 gulp 中的 gulp-babel 插件
- 需要先到 gulp 官网(“gulpjs.com”)中查找插件,选择相应的版本在项目中进行安装
- 在通过 require 引入到 gulpfile.js 文件中
const babel = require("gulp-babel");
- 在代码中插入官网中的转化代码
.pipe(babel({presets: ["babel-preset-env
_ 如果项目中安装的是 gulp-babel 6 的插件需要换成这个,如果是 7 就不用换_"]}))
- 在 js 中使用压缩插件可以在项目中安装 gulp-uglify 插件进行压缩
- 使用 gulp 插件对 html 文件进行操作
- 在项目中安装 gulp-htmlmin 插件,在 gulp 官网(“gulpjs.com”)中查找插件并查看用法
- 在项目中通过 require 引入到文件中
- 在代码中插入转化代码
.pipe(htmlmin({ collapseWhitespace: true, minifyCSS: true, minifyJS: true }))
其中 true 表示开启相关压缩
- 在 gulpfile.js 用并行执行操作自动化插件
- 在项目中引用并行函数 parallel:
const { src, dest ,parallel} = require("gulp");
- 在文件结尾进行并行操作
const bulid = parallel(dest1,script,html);
- 在使用 module.export = {bulie},最后在终端输出即可
- 在项目中引用并行函数 parallel:
2022 年 3 月 21 日
- 通过 glup 对文件进行自动删除
- 下载插件 del:
npm i del - D
- 在 gulpfile.js 文件中引入:
const del = require("del")
- 创建自动化脚本:
const delGulp = ()=>{ del([需要删除文件路径]) }
- 下载插件 del:
2022 年 3 月 23 日
-
建立 browser-sync 服务器
- 在项目中安装 browser-sync 服务器:
npm i browser-sync -D
- 在项目中通过 require 引用 browser-sync:
const browserSync = require("browser-sync");const bs = browserSync.create();
- 建立一个转化码
bs.init({ server:{ baseDir:"./image" } })
- 在项目中安装 browser-sync 服务器: