gulp打包工具

gulp

2022 年 3 月 19 日

1. 对文件进行自动化操作使用 gulp
   1. 全局安装 gulp : npm i gulp -g
   2. 初始化项目：npm init --yes
   3. 开发者模式安装 gulp ： npm i gulp -D
   4. 建立 gulpfile.js 文件：在项目中建立 gulpfile.js 文件
   5. 在 gulpfile.js 文件中写自动化代码
2. 在 gulpfile 文件中写自动化代码
   1. 先通过 require 引入 gulp
   2. 在 gulpjs.com 网站找到需要使用的 gulp 插件
   3. 通过插件说明在相关项目中安装相关插件
      1. 压缩插件使用的是 npm i gulp-clean-css --save-dev;转化 less 文件使用的是 npm i gulp-less -D……
      2. 需要在项目中引用通过 require 引入插件var { src, dest } = require("gulp");
   4. 创建一个函数：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"))
);
};
   5. 如果想在操作文件位置将所有的文件目录样式一起传进来可以在 src 的第二个参数传入{base:“需要的目录样式目录名”}
   6. 通过 module.exports={}进行抛出
3. 

---

2022 年 3 月 20 日

1. 对 css 代码进行游览器兼容性处理，可以使用 gulp 中的 autoprefixer 插件进行兼容性处理

   1. 先在项目中安装 autoprefixe：npm i gulp-autoprefixer -D
   2. 在项目中的 gulpfile.js 文件中引入 autoprefixer：const autopre = require(“gulp-autoprefixer”)
   3. 在项目中使用 autopre 变量添加：pipe(autopre());
2. 自动化将 ES6 的代码文件转化成 ES5 需要使用 gulp 中的 gulp-babel 插件
   1. 需要先到 gulp 官网(“gulpjs.com”)中查找插件，选择相应的版本在项目中进行安装
   2. 在通过 require 引入到 gulpfile.js 文件中const babel = require("gulp-babel");
   3. 在代码中插入官网中的转化代码.pipe(babel({presets: ["babel-preset-env_ 如果项目中安装的是 gulp-babel 6 的插件需要换成这个，如果是 7 就不用换_"]}))
3. 在 js 中使用压缩插件可以在项目中安装 gulp-uglify 插件进行压缩
4. 使用 gulp 插件对 html 文件进行操作
   1. 在项目中安装 gulp-htmlmin 插件，在 gulp 官网(“gulpjs.com”)中查找插件并查看用法
   2. 在项目中通过 require 引入到文件中
   3. 在代码中插入转化代码.pipe(htmlmin({ collapseWhitespace: true, minifyCSS: true, minifyJS: true }))其中 true 表示开启相关压缩
5. 在 gulpfile.js 用并行执行操作自动化插件
   1. 在项目中引用并行函数 parallel:const { src, dest ,parallel} = require("gulp");
   2. 在文件结尾进行并行操作const bulid = parallel(dest1,script,html);
   3. 在使用 module.export = {bulie},最后在终端输出即可

2022 年 3 月 21 日

1. 通过 glup 对文件进行自动删除
   1. 下载插件 del：npm i del - D
   2. 在 gulpfile.js 文件中引入：const del = require("del")
   3. 创建自动化脚本：const delGulp = ()=>{ del([需要删除文件路径]) }

2022 年 3 月 23 日

1. 建立 browser-sync 服务器

   1. 在项目中安装 browser-sync 服务器：npm i browser-sync -D
   2. 在项目中通过 require 引用 browser-sync：const browserSync = require("browser-sync");const bs = browserSync.create();
   3. 建立一个转化码

   bs.init({
    server:{
      baseDir:"./image"
    }
   })