gulp 自动打包压缩工具

gulp 是一款 自动 打包压缩工具
按照设定的 文件 设定的 压缩规范 将文件压缩 存储在 指定的文件夹中

可以做到 时时监听文件 也就是 文件内容只要改变 就会自动 打包压缩

使用 gulp 必须严格按照 gulp 的语法规范执行

同时 使用 第三方依赖包设定的 压缩规范

基本步骤:

            1,  创建项目文件

            2,  下载全局 gulp 依赖包

            3,  下载 开发依赖 gulp包

            4,  下载 相关的 压缩规范 开发依赖包

            5,  编辑执行 gulp 程序

【注意：这里的项目文件是 shop 文件夹】
dist:压缩后的文件
src：压缩前的文件

gulp的相关依赖包

  gulp程序的打包压缩执行 需要 相关的依赖包来执行
   gulp相关程序只有在 开发阶段使用 打包压缩上线程序
   开发结束 项目上线 gulp程序就不用再执行了

1, 安装全局作用域的 gulp 依赖包：npm i -g gulp

2, 切换至 项目文件夹, 初始化项目文件夹：npm init -y

3, 安装 开发依赖的 gulp 依赖包：npm i -D gulp

4, 安装 css打包压缩规范依赖包 ( 先自动添加好前缀 再打包压缩css程序 )
自动添加css兼容前缀依赖包： npm i -D gulp-autoprefixer
css的打包压缩规范： mpm i -D gulp-cssmin

安装成功后在package.json 中 查看

gulp-autoprefixer 需要 在 package.json 中 提前配置 参数

 "browerslist":[                        // 浏览器兼容版本设置
               "last 2 version" ,      // 所有的浏览器,都是兼容最新的2个版本 
               "FireFox > 70",         // 单独设定 火狐浏览器 兼容 大于 70的版本
               "IOS > 7"               // 单独设定 IOS浏览器 兼容 大于 7的版本
           ]

【注意： 必须要符合 json 语法 使用双引号 最后有一个单元不要写 逗号 之前单元后 添加逗号间隔，没有特殊需要 ‘大于××版本’ 可以不要】

5, 安装 js打包压缩规范依赖包

npm i -D gulp-babel 将其他版本的ES语法 转化为 ES5语法形式
npm i -D @babel/preset-env 和 gulp-babel 配合的依赖包
npm i -D @babel/core 和 gulp-babel 配合的依赖包
npm i -D gulp-uglify 将 ES5语法的 js程序 打包压缩
先将 其他ES语法形式的 js程序 转化为 ES5语法形式, 再 打包压缩执行
gulp-babel 需要设定参数 在 gulp程序中设定
babel( {presets:[’@babel/env’]} )

       @babel/preset-env  @babel/core  是和 gulp-babel配合的依赖包, 是加载 到 gulp-babel 中的 不需要独立加载

6, 安装 html打包压缩规范依赖包

npm i -D gulp-htmlmin 将 html 代码程序 打包压缩
gulp-htmlmin 需要 在 gulp程序中设定参数

7, 安装 删除依赖包
npm i -D del

8, 安装 服务器依赖包
npm i -D gulp-webserver
安装成功后在package.json 中

①, gulp 打包压缩规范程序的执行 有自己的语法形式, 必须要严格按照语法程序执行;

②, 需要 在 项目 文件夹 中 创建一个 js外部文件, 文件名 必须是 gulpfile.js

③, 在 gulpfile.js 文件中 先 加载需要的 依赖包

// 1, 加载相关依赖包

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

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

// js需要的依赖包
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');

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

// 服务器依赖包
const webserver = require('gulp-webserver');

// 删除程序依赖包
const del = require('del');

④, 设定打包压缩规范，需要使用的是 gulp 语法形式

 gulp.src( 路径 )    是 gulp 依赖包自带的 函数方法程序
                    作用是 指定 要打包压缩的文件程序
                    *.css   文件名任意 扩展名是css的文件 也就是 任意名称的css文件 --- 子级文件
                    *.*     文件名任意 扩展匿任意的文件 也就是 所有的文件 --- 子级文件
                    **      当前文件夹中的所有文件 --- 后代文件
pipe( 压缩规范()/gulp程序() )      
                    gulp自带的程序,作用是专门执行gulp程序和gulp压缩规范的
                    执行对象 就是 之前程序 获取的 文件内容

gulp.dest( 路径 )   将 指定的文件 存储在 设定的 文件夹路径中
                    文件的名称不会改变
                    如果 路径不存在 会自动创建路径存储文件

gulp.series()       gulp依赖包自带的程序
                    按照顺序执行其中设定的函数程序
                    参数是 函数名称
                    
gulp.parallel()     gulp依赖包自带的程序
                    同时执行其中设定的函数程序
                    参数是 函数名称

module.exports.default = 。。。。。
                    以 gulp 命令 执行 默认程序 也就是 gulpfile.js 中
                    导出的程序内容


gulp.watch(参数1,参数2)
                    gulp依赖包自带的程序
                    是 文件监听程序
                    参数1:  监听的文件路径 / 文件内容
                            也就是当参数1中的文件改变时 自动执行打包压缩规范程序
                    参数2:  执行的打包压缩规范的函数名称 

// 2, 设定 打包压缩规范

// css打包规范语法
const cssHandler = function(){
    return gulp.src('./src/css/*.css')      // 指定 执行打包压缩的文件路径
    .pipe( autoprefixer() )                 // 对 src获取的文件 执行 添加前缀规范
    .pipe( cssmin() )                       // 对 src获取的文件 执行 添加前缀之后 执行打包压缩
    .pipe( gulp.dest('./dist/css') );       // 将 执行了打包压缩规范之后的文件 指定 存储位置                          
}

// js打包规范
const jsHandler = function(){
    return gulp.src('./src/js/*.js')                // 指定 执行打包压缩的文件路径
    .pipe( babel( {presets:['@babel/env']} ) )      // 讲其他版本的js语法,转化为ES5语法
    .pipe( uglify() )                               // 将ES5语法的js程序 打包压缩
    .pipe( gulp.dest('./dist/js') );                // 将 执行了打包压缩规范之后的文件 指定 存储位置                          
}

// html打包规范
const htmlHandler = function(){
    return gulp.src('./src/pages/*.html')
    .pipe( htmlmin({                                // 以 对象的形式 设定 html打包压缩参数
        removeAttributeQuotes:true,                 // 删除属性中的双引号
        removeComments:true,                        // 删除注释
        // removeEmptyAttributes:true,              // 删除空属性
        removeEmptyElements:true,                   // 删除空标签         
        removeScriptTypeAttributes:true,            // 删除 script标签的 type属性
        removeStyleLinkTypeAttributes:true,         // 删除 link标签的的 type属性                    
        collapseBooleanAttributes:true,             // 删除布尔属性的属性值
        collapseWhitespace:true,                    // 删除标签之间的空格
        minifyJS:true,                              // 压缩内容js程序
        minifyCSS:true,                             // 压缩内部css程序
    })).pipe( gulp.dest('./dist/pages') )           // 压缩后的文件存储在指定文件夹中
}

// 不需要打包,直接读取复制存储的文件程序
// 图片,音频,视频   后端程序  已经压缩好的程序

// 图片
const imageHandler = function(){
    return gulp.src('./src/message/**').pipe( gulp.dest('./dist/message') );
}

// 后端程序
const phpHandler = function(){
    return gulp.src('./src/server/**').pipe( gulp.dest('./dist/server') );
}

// 工具程序
const toolsHandler = function(){
    return gulp.src('./src/tools/**').pipe( gulp.dest('./dist/tools') );
}

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


// 4, 设定监听程序
const watchHandler = function(){
    gulp.watch( './src/css/*.css' ,  cssHandler );
    gulp.watch( './src/js/*.js' ,  jsHandler );
    gulp.watch( './src/pages/*.html' ,  htmlHandler );
    gulp.watch( './src/message/**' ,  imageHandler );
    gulp.watch( './src/server/**' ,  phpHandler );
    gulp.watch( './src/tools/**' ,  toolsHandler );
}

// 5, 配置 gulp的 服务器
const webserverHandler = function(){
    return gulp.src('./dist')           // 运行的是 打包压缩的文件 路径是 dist文件夹 
    .pipe(webserver({
        host:'127.0.0.1',               // 服务器IP地址
        port:'8080',                    // 服务器端口
        open:'./pages/index.html',      // 默认的首页面 相对路径是从 dist 文件夹开始的
        livereload:true,                // 开启热启动 只要服务器中文件内容改变 自动刷新
    }))
}



// 设定 导出 默认执行程序 
// 之前运行文件的命令是 node gulpfile.js 
// 设定导出默认程序之后 命令是 gulp 会自动执行 gulpfile.js 文件程序
module.exports.default = gulp.series(
    delHandler,                         // 先执行删除原始压缩文件操作

    gulp.parallel( cssHandler , jsHandler , htmlHandler , imageHandler , phpHandler , toolsHandler ),        
                                        // 先执行一次打包压缩规范

    webserverHandler,                   // 开启服务器

    watchHandler,                       // 执行监听 如果 文件内容有改变 自动再次执行 打包压缩规范



)   

        "use strict"    打包压缩的js程序 执行的是 严格模式 
                        对js语法有严格的规范

        html文件中的js程序打包压缩是有问题的
        js程序 都要写成外部文件的形式 导入执行

总结