入门gulp

一.概念
html,css,js自动化压缩工具
可以运行在node环境


二.gulp下载：
    （1）安装【全局gulp】依赖包
        npm i -g gulp 全局包可直接输入安装，不寻找路径

        最新版本4.0.2
        4.0- 版本 是正常版本号
        4.0+ 版本 是CLI version 2.3.0版本号
    （2）配置项目文件夹
        src存储源文件的文件夹
        dist存储压缩后文件的文件夹
    （3）初始化文件夹
        如果是第一次执行项目 npm init -y 初始化文件夹
        如果是继续之前的项目开发 复制package.json文件
                                    用npm i 初始化文件夹并下载依赖包
    （4）安装【项目gulp】，与全局gulp不同
        npm i gulp  需要寻找路径，路径切换到项目文件夹
三.配置gulp打包压缩规范文件
    （1）在项目文件夹中，创建gulpfile.js文件,放所有的配置程序
    （2）css 
        1.[下载依赖包]使用第三方依赖包，执行别人写好的执行规范
          在npm下载依赖包css的压缩规范： 
          npm i gulp-cssmin   下载依赖包css的压缩规范。然后会出现package.json文件
        2.在gulpfile.js中，加载gulp依赖包 
          const gulp = require('gulp')
        3.在gulpfile.js中，压缩css依赖包 
          const css = require('gulp-cssmin')
          const autoprefixer = require('gulp-autoprefixer')
        4.在gulpfile.js中，指定css压缩规范 
          const cssHandler = function(){
              return gulp.src('./src/css/*.css') 
                     .pipe(cssmin())
                     .pipe(gulp.dest('./dist/css'))
          }
        5.[下载依赖包]前缀规范
          npm i gulp-autoprefixer 
        6.在gulpfile.js中，添加前缀，打包规范
           const cssHandler = function(){
              return gulp.src('./src/css/*.css') 
                     .pipe(autoprefixer())
                     .pipe(cssmin())
                     .pipe(gulp.dest('./dist/css'))
          }
        7.在package.json文件中，添加浏览器对css的兼容版本,每一段结束需要加逗号，最后一项不加逗号
            "browserslist":[
                "last 2 version",所有浏览器兼容最新的两个版本前缀语法
                "FireFox" > 20,  可以单独设定某一种浏览器需要兼容的版本
                "IOS > 7"        一般是浏览器名称 > 某个版本号
            ]
        8.设定监听程序。在gulpfile.js中，添加gulp.watch
             const watchHandler = function(){
                 gulp.watch('./src/css*.css',cssHandler) 监听的是这个路径下扩展名是css的文件
             }                                           当监听文件发生改变时，自动执行cssHandler定义的压缩文件
                                                         cssHandler是回调函数赋值一个函数的名称，不要有()
             module.exports.default = gulp.series(       module.exports.default = 是设定gulpfile.js程序，到处的默认执行的程序内容
                                                         series() 是gulp提供的方法，按照顺序执行，定义的所有程序
                 gulp.parallel(cssHandler),              先执行打包规范，先打包所有的文件。是gulp提供的方法，是同时执行定义的程序
                 watchHandler                            后执行监听程序，监听所有原始文件
             )                                           
        9.设定删除规范，在gulpfile.js添加规范
           ---目的：是为防止程序执行过程中，dist中有些文件已经存在。导致文件冲突，需要删除dist原有文件，然后重新进行监听
           ---操作：下载删除依赖包 npm i del
                   const delHandler = function(){
                       del(['./dist'])                     指定要删除的文件夹的内容
                   }
                   在module.exports.default中最前面添加delHandler
        

          

        *压缩规范
            ---gulpfile.js必须是这个文件名，所有的配置程序都设定在这个文件
            ---gulp.src() 按照指定的文件路径，找到要压缩的文件名
                ----*.css 文件名可以任意，扩展名必须是css
                    *.*  文件名和扩展名都可以任意内容
            ---cssmin()    压缩规范，将src中指定的所有文件，按照规范执行压缩
                           自动生成与源文件，文件名完全相同的压缩文件
            ---gulp.dest() 将执行好的压缩文件，指定一个存储位置
                           如果没有文件夹，会自动生成一个对应的文件夹生成新的文件
            ---pipe()    gulp定义好的程序，作 用是执行指定的程序内容
                        执行加载的第三方依赖包中定义的css文件名
           
            ---gulp.parallel(cssHandler) 执行打包规范
        --设定监听程序 gulp.watch('路径',cssHandler) 监听路径的文件
         当监听文件发生改变，自动执行cssHandler定义的压缩规范
         cssHandler是回调函数赋值的一个函数名称，没有小括号
    （3）js
         第三方依赖包，执行别人写好的压缩规范
         下载4个依赖包，加载2个依赖包
           下载4个依赖包
            npm i gulp-uglify            打包压缩ES5语法规范的JS代码
            npm i gulp-babel             将其他ES语法规范，转化成ES5语法规范
            npm i @babel/core       babel默认只能转化ES6语法为ES5格式
            npm i @babel/preset-env 需要这两个依赖包配合才能完成转化
                                    配合的两个依赖包，只要下载，不需要加载
            可一次下载4个 包名空格隔开
            npm i uglify babel @babel/core @babel/preset-env
         1.在gulpfile.js中加载ES5依赖包
           const uglify = require('gulp-uglify)
           const babel = require('gulp-babel')
         2.打包规范
               const jsHandler = function(){
               和css第6步一样
              return gulp.src('./src/js/*.js')              指定要压缩的文件路径和压缩文件，名字是任意内容，扩展名是js
                     .pipe(babel({presets:['@babel/env']}))  调用两个配合的依赖包，将其他ES语法，转化为ES5语法
                     .pipe(uglify())                        将转化的ES5语法程序，执行js压缩规范
                     .pipe(gulp.dest('./dist/css'))         将压缩好的程序，存储在dist/js 文件夹
                 }

         2.在监听程序中，添加js的监听规范
            gulp.watch('./src/js*.js',jsHandler)
         --加载js压缩es5依赖包
         3.命令输入gulp，进行压缩执行
    （4）html
        
        1.在gulpfile.js添加压缩依赖包
            const htmlmin = require('gulp-htmlmin')
        2.在命令中下载html相关的依赖包
          npm i gulp-htmlmin   html压缩依赖包
        3.在gulpfile.js进行压缩打包规范
            const htmlHandler = function(){
                gulp.src('./src/pages/*.html')              指定要压缩的文件路径和压缩文件，名字是任意内容，扩展名是html
                     .pipe(htmlmin({
                         removeAttributeQuotes:true,         自动删除属性中的双引号
                         removeComments：true,               自动删除注释
                         collapseBooleanAttributes:true,     布尔属性删除属性值
                         collapseWhitespace:true,            自动删除标签之间的空格
                         minifyCSS：true,                   自动压缩内部js样式
                         minifyJS:true,                     这两个true压缩有问题，不会做到最完美压缩，实际项目中，不要使用内部的css和js语法，都要用外部文件
                     }))                                    执行压缩规范，定义相应的参数，实际项目中根据项目需求设定
                    .pipe(gulp.dest('./dist/pages'))
                 }
            }
         4.在watchHandler中添加监听
           gulp.watch('./src/pages/*.html')
         5.命令中输入gulp进行压缩执行
    （5）音频，视频等不需要压缩的文件。包括别人写好的文件，例如JQ等
        定义图片规范，不用压缩，只需复制到压缩的指定文件夹
        在gulpfile.js中
            const imgHandler = function(){
                return gulp.src('./src/images/*.*') 把这个路径的文件
                       .pipe(gulp.dest('./dist/images'))           易懂到这里
            }
            在监听watchHandler中，加入图片的监听执行
                gulp.watch('./src/images/*.*',imgHandler)
    （6）可以搭建服务器
         1.下载服务器依赖包 npm i gulp-webserver  gulp搭建服务器依赖包
         2.加载一个服务器的依赖包。在gulpfile.js进行加载
            const webserver = require('gulp-webserver')
         3.搭建外部server，指定gulp搭建服务器
            const webserverHandler = function(){
                return gulp.src('./dist')   搭建服务器要有服务器文件，指定服务器运行文件，所在文件夹，使用的是压缩文件，不是源文件
                       。pipe(webserver({   以对象的形式，定义配置参数
                          host:'127.0.0.1'  指定服务器地址：127.0.0.1/localhost
                          prot:'8080'       指定监听端口 0-65535都可以
                          livereload:true   热启动，如果页面内容有修改，自动刷新页面，不会手动刷新
                          open:'./pages/index.html'服务器启动， 默认打开的页面
                       }))
            }
         4.把上面那个加载到module.exports.default = gulp.series中，进行启动
           在module.exports.default中最添加webserverHandler 启动服务器程序
         5.执行gulp后，默认打开页面，并会执行热启动
    （7）设定监听程序，
    （8）配置默认执行