gulp打包压缩工具------如何配置设定、gulp依赖包的安装

一.gulp的基本介绍

gulp的基本介绍
    gulp 是常用的压缩工具之一
    要在node.js环境下使用的压缩工具
作用:是一款 自动化 打包工具
    自动化 : 自己执行,不需要我们手动操作,但是需要我们提前配置是设定
    打包   : 将所有的源代码,都变成压缩格式的代码内容
            去除空格,去除冗余的代码,减少文件体积
是 node.js 提供的第三方依赖包

下载安装 gulp 工具包
    安装命令  必须是安装为全局作用域依赖包
        nmp i -g gulp


查看 gulp 版本号 
gulp --version
4.0+ 版本,执行结果是 CLI version: 2.2.0
4.0以下版本,执行结果是 正常版本号

二.gulp如何配置设定

使用gulp之前,必须严格按照语法规范,配置gulp的选项
只有配置好gulp选项之后,才能正常的打包压缩源代码

gulp的配置过程
    1,需要建立一个项目文件夹,作为项目目录,所有的文件都要定义在这个文件夹中
        我们目前使用 shop 文件夹 作为项目文件夹

    2,在这个项目文件夹中,按照项目规范,来设定文件夹目录结构
        一般项目 源文件 都存储在一个指定的文件夹中 一般叫 src
                压缩文件 都存储在龙一个指定文件夹中 一般叫 dist 

        src中 按照文件类型 存储在不同的文件夹中
            pages  存储HTML文件
            css    存储css文件
            js     存储js文件
            images 存储图片
            .... 

        最终的目的是,将scr文件夹中的源文件,打包压缩,存储在 dist 文件夹中

        实际项目中,文件夹的设定在项目手册中,有严格规范,你按照你公司的项目规范执行就可以了


    3, 要执行的基本的准备工作
        3-1,准备好文件夹
            配置gulp选项时,文件夹路径是一项关键的配置
            最开始,必须要设定好相关的文件夹
        3-2,先执行 npm init -y 自动配置初始化文件
            在当前项目文件夹中,会自动生成一个配置文件 package.json 
        3-3,手动创建一个js文件,名称必须定义为 gulpfile.js 
            文件位置必须是 项目文件夹中,不要定义在 src 等文件夹中 
        3-4,每一种格式文件,要打包压缩,都要执行不同的规范
            就要给每一种需要打包的文件,设定打包规范
            每个不同项目,打包规范,也会有明确的规范,实际项目中,按照项目手册执行就可以
            我们目前先按照一般打包规范来设定

    4, 在 gulpfile.js中来定义压缩规范

需要设定规范的文件格式:
这里的压缩规范,都是通过第三方依赖包来执行的,必须要下载相应的依赖包

css
    gulp-cssmin         css压缩规范
    gulp-autoprefixer   css自动添加兼容前缀

html
    gulp-htmlmin        HTML压缩规范

js
    gulp-uglify         js的压缩规范,只能压缩ES5语法规范的内容
    gulp-babel          将其他ES语法规范,转化为ES5语法         

服务器
    gulp-webserver      服务器压缩规范

独立的删除规范
    del                 多次压缩,要先删除之前压缩的文件内容

音频,视频,图片等,一般是不压缩的,直接移动到 dist 文件夹中

三.gulp依赖包的安装

安装依赖包时,要注意
    全局的依赖包,可以在任意位置安装,只要命令写对就可以
    项目的依赖包,必修要在正确的路径下安装,才可以正常的加载使用

在安装依赖包之前,先要格式化项目设定*************
    在项目路径下 执行
    npm init -y   生成 package.js 文件
    之后要在文件中,设定相应的配置信息

gulp依赖包的安装****************

    1, 安装全局的gulp依赖包
        npm i -g gulp
    
    2, 还需要安装一个项目的gulp依赖包
        npm i gulp


安装完成的依赖包,在 package.json 中会有相关的安装记录
    在 dependencies 记录选项中

其他第三方依赖包的安装****************

    1, css相关的依赖包
    要全装成局部/项目依赖包,安装路径,必须是项目路径
    npm i gulp-cssmin
    npm i gulp-autoprefixer

    在执行 gulp-autoprefixer 时, 必须要在 package.js 文件中设定配置
    目的是兼容

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

        这是固定的语法形式,会根据不同的项目需求,有不同的设定
        实际项目中,要根据项目手册来进行修改设定

    2, del的依赖包 执行删除文件夹操作的依赖包
    npm i del

gulpfile.js

// 在 gulpfile.js文件中来定义gulp的压缩规范,以及下载第三方依赖包


// 一,导入gulp等第三方依赖包

// 导入gulp第三方依赖包
// 生成的gulp对象中,有 gulp 的打包压缩方法,我们只要使用就可以了

// 常用的gulp方法
// gulp.src()     指定要执行gulp打包压缩文件路径的方式
// gulp.pipe()    执行第三方依赖包定义的打包压缩规范,以及相应的程序内容
//                gulp的语法规范规定,必须要使用gulp.pipe()来执行相应的程序内容
// gulp.dest()    将压缩打包好的程序,移动至指定的文件夹位置中
// gulp.watch()   指定监听路径中的文件,如果文件内容保存,会自动执行程序
// gulp.series()  逐个执行()中添加的程序内容,添加的必须是函数的名称,不能是 函数的执行,即不能有() 
// gulp.parallel  同时执行()中添加的程序内容,添加的必须是函数的名称,不能是 函数的执行,即不能有() 

const gulp = require('gulp');

// 导入css相关的依赖包

// 压缩css依赖包
const cssmin = require('gulp-cssmin');
// 添加兼容前缀依赖包
const autoprefixer = require('gulp-autoprefixer');

// 加载删除的依赖包
const del = require('del');



// 1, css的压缩规范 将压缩法规范定义为函数的形式
const cssHandler = function(){
    // 以返回值的形式,来定义程序内容
    // 1,要在 package.json 中 设定  前缀兼容浏览器版本信息设定
    // 定义的内容,是固定语法形式 有这个定义,自动添加兼容前缀,才会执行
    //   "browserslist":[
    //     "last 2 versions",     兼容 浏览器 最新的2个版本,没有特别设定的浏览器,就兼容最新的两个版本
    //     "IOS > 7",             IOS  系统 兼容 7版本以上 
    //     "FireFox > 20"         火狐  浏览器 兼容 20版本以上
    //   ]
    //   不能随便设定,实际项目中,有相应的兼容要求,根据实际项目规范手册制定就可以了
    // 

    // 是以 return 的形式 来返回操作结果,是gulp使用的语法规范
    // gulp.src() 来读取要压缩的css文件
    // .pipe( autoprefixer() ) 给css文件中,需要的属性,自动添加兼容前缀
    // .pipe( cssmin() ) 将css文件中的代码压缩,去掉多余的空格和换行
    // .pipe( gulp.dest('./dist/css') ) 将已经压缩好的文件,移动至设定的路径中存储

    // *  是 统配符,是表示所有的内容的意思
    // *.css 表示的是 文件名是任意内容,扩展名 是 css
    // *.*   表示的是 文件名和扩展名是任意内容,也就是所有的任意文件 
    // index.*  表示的是 文件名是 index,扩展名是任意内容的文件

    // 步骤过程,和语法形式,都是固定的格式步骤
    // 实际项目中,可以改变的,只有 兼容前缀的浏览器版本 和 两个路径,可以修改
    return gulp.src('./src/css/*.css')        // 告诉gulp,要压缩的css文件,在哪个文件夹中
           .pipe( autoprefixer() )            // 添加前缀
           .pipe( cssmin() )                  // 打包压缩
           .pipe( gulp.dest('./dist/css') )   // 将压缩好的文件,移动到指定的文件夹中存储
}   


// 将gulp程序的执行,定义成监听的形式
// 也就是只要保存任意的需要打包压缩的文件,就会执行一套监听gulp压缩步骤
// 1,先删除源有的压缩文件
// 2,再执行所有的压缩规范

// 定义删除规范
// 在 del() 中定义要删除的文件夹路径
// 注意 文件夹路径,必须带有[],是del()语法规范规定

const delHandler = function(){
    return del(['./dist']);
}

// 定义监听规范
const watchHandler = function(){
    // 如果监听的文件所有改变,立即重新执行压缩规范
    gulp.watch('./src/css/*.css' , cssHandler);
}

// 定义gulp文件的默认执行程序以及程序的执行顺序
// 定义默认执行的程序,定义之后,不用写 node gulpfile.js 执行程序
// 直接执行 gulp 就可以了,会默认的执行定义的程序内容

// 默认按照顺序,执行()中的程序
// 先执行 删除规范,删除的是之前,压缩的文件
// 在执行 同时执行 所有的压缩规范
module.exports.default = gulp.series(  // 按照顺序执行
    delHandler,                    // 第一步,先执行删除规范
    gulp.parallel(cssHandler),     // 第二步,同时执行所有的压缩规范,css,html,js等等....
    watchHandler,                  // 第三步,执行的是监听规范,随时监听源文件的改变
);