gulp构件自动化流程

一. 什么是gulp？

 gulp 是一个构件工具。包括了浏览器实时刷新、监听 、压缩、打包等等，运用了管道（pipe）思想，输入 -> 加工 -> 写入
  1.  src 属性： 读取文件
  2.  dest 属性： 写入文件
  3.  parallel 属性： 同步执行任务
  4.  series 属性： 串行执行任务
  5.  watch 属性： 监听文件变化

二、gulp使用以及基础插件的介绍

1. yarn add gulp --dev 安装gulp

2. yarn add gulp-load-plugins --dev 安装自动加载插件

3. 自动化插件的使用

   const loadPlugins = require("gulp-load-plugins")
   const plugins = loadPlugins()
   注意：使用gulp-load-plugins 之后 所有gulp插件以驼峰命名法命名gulp之后的插件名称，不需用手动引入插件
   gulp-sass  =>   plugins.sass
   gulp-babel =>   plugins.babel                 
   

4. yarn add gulp-sass --dev 处理scss文件，转换成css

5. yarn add gulp-babel @babel/preset-env --dev 处理js文件，转换js 语法

6. yarn add gulp-swig --dev 处理html 文件

7. yarn add gulp-imagemin --dev 对图片进行压缩、同时处理字体文件

8. public 目录不需要处理， 直接写入dist 中

9. yarn add del --dev 删除目录

10. yarn add browser-sync --dev 开发依赖、热更新

    const server = () => {
        watchFIle()
        browser.init({
            notify: false, // 关闭browser提示
            port: 8090, // 端口
            files: 'dist/**',
            server: {
                baseDir: ['temp', 'src', 'public'],
                routes: {
                    '/node_modules': 'node_modules'
                }
            }
        })
    }