gulp简单使用

gulp

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. 

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

   1. 先在项目中安装 autoprefixe：npm i gulp-autoprefixer -D
   2. 在项目中的 gulpfile.js 文件中引入 autoprefixer：const autopre = require("gulp-autoprefixer")
   3. 在项目中使用 autopre 变量添加：pipe(autopre());

5. 自动化将 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 就不用换_"]}))

6. 在 js 中使用压缩插件可以在项目中安装 gulp-uglify 插件进行压缩

7. 使用 gulp 插件对 html 文件进行操作

   1. 在项目中安装 gulp-htmlmin 插件，在 gulp 官网("gulpjs.com")中查找插件并查看用法
   2. 在项目中通过 require 引入到文件中
   3. 在代码中插入转化代码.pipe(htmlmin({ collapseWhitespace: true, minifyCSS: true, minifyJS: true }))其中 true 表示开启相关压缩

8. 在 gulpfile.js 用并行执行操作自动化插件

9. 在项目中引用并行函数 parallel:const { src, dest ,parallel} = require("gulp");

10. 在文件结尾进行并行操作const bulid = parallel(dest1,script,html);

11. 在使用 module.export = {bulie},最后在终端输出即可

12. 通过 glup 对文件进行自动删除

13. 下载插件 del：npm i del - D

14. 在 gulpfile.js 文件中引入：const del = require("del")

15. 创建自动化脚本：const delGulp = ()=>{ del([需要删除文件路径]) }

16. 建立 browser-sync 服务器

17. 在项目中安装 browser-sync 服务器：npm i browser-sync -D

18. 在项目中通过 require 引用 browser-sync：const browserSync = require("browser-sync");const bs = browserSync.create();

19. 建立一个转化码

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