gulp打包压缩总结---2

关于 gulp 的打包压缩总结

1, gulp 的作用:
    自动,打包压缩,指定的文件,将压缩好的文件,存储到指定的位置
    实际项目中,执行的都是打包压缩的文件
    为了提高响应时间,改善用户体验度
    让页面的加载和执行,时间更短,效率更高

2, gulp 的打包压缩对象
    (1), html格式 , js格式 , css格式 
    (2), 图片,音频,视频,icon字体图标...都是不能打包压缩的,压缩就会影响正常的程序的执行
    (3), 还有一些插件等,例如 jQuery bootstrap 轮播图插件等等
            这些都是已经打包压缩好的,没有必要再压缩了,直接复制到指定位置就可以了
            
	说明：php，java，python等后端执行的程序，是不需要打包压缩的
		这些程序，只在后端运行，不会在前端浏览器上运行，不要页面浏览器来加载读取。
		
3, gulp 可以搭建服务器
    运行时,会自动的打开执行默认文件
    要通过浏览器地址栏访问,也必须输入 完整路径 http://127.0.0.1:8080/pages/index.html

	这个服务器，是不能解析执行PHP程序的，必须要通过服务器，完成跨域访问，在其他Apache或者nginx上运行php程序
	这个gulp的服务器，主要是为了让大家体会热启动，一旦源代码作出修改，gulp会自动重新压缩文件，服务器会执行热启动，让页面效果直接显示
	例如：今天是5.12 理论上，所有的网站，都应该是黑白色的，网站在0点时，修改css样式，在服务器端保存，这样页面即使不刷新，也会自动更新。
4, gulp 的执行过程

	过程步骤，必须严格遵守，一点都不能差

    (1), 建立项目文件目录
        源文件,一般存储在 src 文件夹中
        压缩文件,一般存储在 dist 文件夹中

        源文件夹中,一般的文件目录格式
            pages    存储html文件
            css      存储css文件
            js       存储js文件  都是没有压缩的js文件
            images   存储图片文件
            radio    音频文件
            video    视频文件
            lib      js插件,也就是压缩好的js文件 : jQuery bootstrap 等 都单独的存储在 lib 文件夹中
                        已经压缩要的js文件,不要存储在 js 文件夹中


        压缩文件夹, dist 中 一般存储的文件夹都是从源文件夹中,压缩执行之后,生成的文件夹
        一般不单独新建文件夹,如果有特殊需求,需要新增新的文件夹,也是在 源文件 中 先建立文件夹,在复制到压缩文件夹中
        一般情况下, 源文件加 与 压缩文件夹 是 一一对应的关系
        src 与 dist 中的文件夹是一一对应关系

    (2), 执行过程（除了创建的文件之外 其他的都是要在cmd里输入的指令操作）
        a, 创建 合理的 源文件夹目录结构 src 
            要严格按照项目手册或者项目规范来定义

        b, 初始化 npm 
            npm init -y

        c, 下载相关的 第三方依赖包
            gulp: 全局gulp  项目gulp  两个都要有,缺一不可
                全局gulp  
                    npm i -g gulp

                项目gulp  
                    npm i gulp   或者  npm i -D gulp  

            各种压缩规范需要的 第三方依赖包

                css的
                    npm i gulp-cssmin          压缩依赖包
                    npm i gulp-autoprefixer    自动添加前缀依赖包

                js的
                    npm i gulp-uglify          打包压缩ES5语法规范依赖包
                    npm i gulp-babel           将其他ES语法规范转化为ES5语法规范
                    npm i @babel/core          这是两个和 gulp-babel 配合使用的依赖包
                    npm i @babel/preset-env    说白了就是 gulp-babel 的两个补丁文件,是让 gulp-babel 能更正确的执行

                    下载4个依赖包 只要 加载 两个依赖包 

                html的
                    npm i gulp-htmlmin         html压缩依赖包
                    
                webserver的
                    npm i gulp-webserver       webserver依赖包

                del的
                    npm i del                  删除依赖包


        d, 建立 gulpfile.js 文件,定义 gulp 压缩规范

            (1), 加载 所有的 依赖包
                注意: js相关的 依赖包 下载有4个,加载2个

            (2), 指定相关的打包规范
                注意: 
                    css 添加兼容前缀,要在 package.js 中添加参数

                        "browserslist": [
                            "last 2 versions",
                            "IOS > 7",
                            "FireFox > 20"
                        ]


                    js 中 将其他语法格式,转化为ES5 语法格式 babel() 有参数 , 以对象的形式,定义在 () 中
                        .pipe(babel({presets:['@babel/env']}))


                    html 中 打包压缩规范参数比较多,实际项目中,根据项目需求而定,我们演示常用的几个参数
                        removeAttributeQuotes : true ,       //  打包时删除属性上的双引号
                        removeComments : true ,              //  删除程序中的注释内容
                        collapseBooleanAttributes : true ,   //  删除布尔属性中定义的属性值
                        collapseWhitespace : true ,          //  删除程序中多余的空格,只删除标签之前的空格,标签内部和内容的空格不会删除
                        minifyCSS : true ,                   //  压缩HTML标签中的css程序代码
                        minifyJS : true ,                    //  压缩html标签中的js代码

                    server 中 定义搭建服务器的 host域名  port端口  open默认打开路径 热启动
                        host : '127.0.0.1' ,            // 定义的域名地址,目前使用本地域名地址127.0.0.1,实际项目中,根据项目需求而定
                        port : 8080 ,                   // 定义端口号
                        open : './pages/index.html' ,   // 默认打开执行的网页,也就是 输入 127.0.0.1:8080 直接打开的网页
                                                        // 之前在 node.js 中 通过内置http模块 执行访问请求时 必须有 文件名称  127.0.0.1:8080/index.html
                                                        // 在 gulp 中 搭建的服务器 , 有默认的打开页面设定, 直接输入 127.0.0.1:8080 即可
                        livereload : true ,             // 热启动 当文件内容,代码,css,js等发生改变时,会自动重新加载页面,执行效果,不用手动刷新                                       

                    images图片文件   radio    音频文件    video    视频文件   lib已经压缩好的js插件
                        都不打包压缩,直接复制到dist压缩文件夹中   

            e, gulp中执行的其他规范程序
                del 删除规范 要删除之前打包压缩的文件,确保压缩文件不冲突

                watch 监听规范 如果监听的文件发生改变,默认执行相应的打包压缩规范
                    gulp.watch('./src/css/*.css' , cssHandler);         // 监听 css 文件
                    gulp.watch('./src/js/*.js' , jsHandler);            // 监听 js 文件
                    gulp.watch('./src/pages/*.html' , htmlHandler);     // 监听 html 文件
                    gulp.watch('./src/images/*.*' , imgHandler);        // 监听 图片 文件
                    ......  


                default  设定默认执行的程序  定义了  default 之后 直接执行 gulp 而不再是  node gulpfile.js
                    module.exports.default = gulp.series(     按照顺序执行
                        delHandler,                 删除之前压缩的所有文件
                        gulp.parallel(打包规范),     同时执行,初始化,执行打包压缩规范     
                        webserverHandler,           创建服务器
                        watchHandler,               监听指定的文件
                    )