前端工程化学习

title: 前端工程化
tags: gulp
notebook: 学习笔记

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官网中查找插件，选择相应的版本在项目中进行安装
   2. 在通过require引入到gulpfile.js文件中const babel = require("gulp-babel");
   3. 在代码中插入官网中的转化代码.pipe(babel({presets: ["babel-preset-env* 如果项目中安装的是gulp-babel6的插件需要换成这个，如果是7就不用换*"]}))
3. 在js中使用压缩插件可以在项目中安装gulp-uglify插件进行压缩
4. 使用gulp插件对html文件进行操作
   1. 在项目中安装gulp-htmlmin插件，在gulp官网中查找插件并查看用法
   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},最后在终端输出即可