gulp------js、html等其他的打包压缩规范

js的打包压缩规范

    1, 第三方依赖包只能打包压缩ES5规范的js代码
    2, 要先将其他ES语法规范的代码转化为ES5语法规范

    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 能更正确的执行


html的打包规范
    1, 将HTML文件打包压缩即可
        关键是 HTML 文件的压缩,要有很多的参数设定
        实际项目中,根据项目规范手册来定义即可,目前,我们演示一些基本的规范设定

    npm i gulp-htmlmin


图片,音频,视频等,不需要打包压缩,直接复制到指定的文件夹即可


通过 gulp 来建立一个 服务器 有点类似于 通过 node内置 http 模块 创建 服务器
现在 是通过 gulp 来创建服务器

    npm i gulp-webserver 

gulpfile.js

// 定义 gulp 的打包规范

// 1,加载 依赖包

// gulp依赖包
const gulp = require('gulp');

// css相关的依赖包
// cssmin依赖包
const cssmin = require('gulp-cssmin');
// autoprefixer依赖包
const autoprefixer = require('gulp-autoprefixer');


// 加载js相关的依赖包
// 打包压缩ES5规范的的依赖包
const uglify = require('gulp-uglify');

// 将其他语法规范,转化为ES5语法规范
// 需要的是三个依赖包 gulp-babel 和配合使用的 @babel/core  @babel/preset-env 
// 实际中 @babel/core  @babel/preset-env 只是配合 gulp-babel 使用的,不需要加载
// 只要加载 gulp-babel 即可,另外两个会加载到 gulp-babel 中
const babel = require('gulp-babel');
// 下载4个,加载2个,另外两个自动加载到 gulp-babel 中


// html依赖包
const htmlmin = require('gulp-htmlmin');

// server依赖包
const webserver = require('gulp-webserver');



// del依赖包
const del = require('del');


// 2,执行打包压缩规范
// 是 return 方式 通过返回值,来定义打包规范
// gulp语法的规定
// 定义压缩规范,可以使用类似 jQuery 的链式编程

// css压缩规范

// 这两种方式都可以,只要有变量或者函数名称,存储函数内存地址就可以

// 声明方式定义函数
// function cssHandler (){}     

// 匿名函数形式声明
const cssHandler = function(){
    return gulp.src('./src/css/*.css').pipe(autoprefixer()).pipe(cssmin()).pipe(gulp.dest('./dist/css'));
    // gulp.src('./src/css/*.css')      指定要压缩的源文件内容
    // .pipe(autoprefixer())            先自动添加css语法中的兼容前缀
    // .pipe(cssmin())                  将 src() 中 执行路径下的指定文件,打包压缩
    // .pipe(gulp.dest('./dist/css'))   将 打包压缩的程序,存储在指定位置上
} 

// js的压缩规范
// 添加到 watch 监听中 和 default 默认执行中
const jsHandler = function(){
    return gulp.src('./src/js/*.js')          // 设定打包的js文件位置
    .pipe(babel({presets:['@babel/env']}))    // 将其他语法规范,转化为ES5语法规范, babel() 中的参数是固定的语法格式
    .pipe(uglify())                           // 打包压缩js文件
    .pipe(gulp.dest('./dist/js'))             // 将 打包压缩的程序,存储在指定位置上
}

// html文件的打包压缩
// 添加到 watch 监听中 和 default 默认执行中
const htmlHandler = function(){
    return gulp.src('./src/pages/*.html')    // 设定打包的html文件位置
           .pipe(htmlmin({
               removeAttributeQuotes : true ,       //  打包时删除属性上的双引号
               removeComments : true ,              //  删除程序中的注释内容
               collapseBooleanAttributes : true ,   //  删除布尔属性中定义的属性值
               collapseWhitespace : true ,          //  删除程序中多余的空格,只删除标签之前的空格,标签内部和内容的空格不会删除
               minifyCSS : true ,                   //  压缩HTML标签中的css程序代码
               minifyJS : true ,                    //  压缩html标签中的js代码
           // 压缩html文件,会有很多的参数,这些参数之间,必须以逗号间隔
           // 实际项目中,到底执行什么规范,看项目手册中的规定,或者问你的项目经理
           // 看到那个知道是什么意思就可以了
           }))
           .pipe(gulp.dest('./dist/pages'))         // 将 打包压缩的程序,存储在指定位置上
}


// 音频,视频,图片等,不打压缩,直接移动到指定的文件夹位置
// 将所有格式的图片,都移动到指定的文件夹位置中
// 添加到 watch 监听中 和 default 默认执行中

const imgHandler = function(){
    return gulp.src('./src/images/*.*')        // 指定要移动的图片的文件夹位置
           .pipe(gulp.dest('./dist/images'))   // 指定移动到的文件夹位置
}

// 制定通过gulp来建立服务器
// 只定义在 default 中,并且在watch监听之前
// 当您运行指令 gulp 时,会自动打开定义的默认页面
// 但是当你从浏览器地址栏输入时,直接输入 127.0.0.1:8080 是 不行的
// 必须要 输入 完整的 路径地址 才能 访问 http://127.0.0.1:8080/pages/index.html

// 当然这个服务器的功能还不完善,我们之后3阶段,配合框架语法,搭建一个完整的服务器

const webserverHandler = function(){
    return gulp.src('./dist')           // 指定的路径是压缩文件的路径,也就是在服务器上运行的都是压缩文件,提高页面中程序的执行效率
    .pipe(webserver({
        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 中 搭建的服务器 ,执行完gulp程序，会默认自动启动默认页面，如果要访问页面，也要输入完整路径
        livereload : true ,             // 热启动 当文件内容,代码,css,js等发生改变时,会自动重新加载页面,执行效果,不用手动刷新                                       
    }))
}



// 3,指定删除程序
const delHandler = function(){
    return del(['./dist']);
}


// 3,制定监听程序
// 当指定的监听文件夹下的文件内容,发生改变,会自动执行打包规范
// 执行的监听程序,影响的是,修改源文件时,自动打包压缩程序

const watchHandler = function(){
    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);        // 监听 图片 文件  
}


// 4,定义 gulp 的默认执行程序
module.exports.default = gulp.series(
    delHandler,
    gulp.parallel(cssHandler,jsHandler,htmlHandler,imgHandler),   //  默认的,第一次,初始化,先执行一次所有的打包规范
    webserverHandler,       // 通过 gulp 启动一个服务器 gulp 运行到 webserverHandler 会自动打开设定的默认页面,不用做任何操作
    watchHandler,
)


// 执行gulp时的基本执行步骤

// 执行 default 当中定义的程序内容
// 之前都是在定义 函数 也就是 定义各种规范
// 只有在 default 中,才是执行这些定义好的函数

// 按照定义的代码顺序,来执行函数
// 1, 执行 delHandler 将之前打包压缩的程序删除掉
//    为了防止生成重复的打包压缩文件,造成程序执行有误
//    这个 delHandler 在整个 监听的过程中,只会执行一次

// 2, 同时执行 所有的打包压缩规范
//    根据当前的源文件,初次生成压缩文件

// 3, 执行 watchHandler 监听源文件
//    每次有监听的文件内容改变,只会重新打包压缩这一个源文件,不会重新压缩所有的项目中的源文件

// 实际项目中,我们只要定义好gulp的压缩规范,然后运行gulp监听
// 会自动生成压缩的打包文件
// 当项目开发结束,所有的压缩文件也就自动生成了
// 将压缩的文件,作为项目文件,布置上线