gulp打包详解

gulp的作用

1. 删除文件中冗余的内容，压缩文件，减小文件体积
2. 实际项目中运行的都是压缩完成以后的文件
3. 减小加载响应时间

gulp打包压缩对象

1. html，css，js，sass，webserver
2. 音频，图片，插件等正常情况下都是打包完成的，直接移动到dist文件中就可以
3. 服务器食欲gulp一起绑定执行的，执行的是打包压缩好的程序文件

gulp执行过程

　　所有执行步骤必须严格遵守，尤其是语法规范必须严格执行

　　　　1、下载全局gulp

　　　　　　npm i -g gulp

　　　　2、创建项目文件

　　　　　　源文件src：　　　　

　　　　　　　　pages　　　　存储html文件
　　　　　　　　css　　　　　 存储css文件
　　　　　　　　sass　　　　  存储sass文件
　　　　　　　　images　　　  存储图片
　　　　　　　　js　　　　　　 存储js文件
　　　　　　　　plug　　　　　存储插件

　　　　　　压缩文件 dist：　　　　　

　　　　　　　　将压缩好的文件存放在dist中
　　　　　　　　文件名称与原文件名称保持一致
　　　　　　　　实际项目中为了保持文件名称路径一致，不添加多余的文件名后缀min等

　　　　3、文件初始化　

　　　　　　整个项目第一次执行
　　　　　　　　npm init -y
　　　　　　实际项目中，或者下载git中的项目
　　　　　　　　下载 package.json 文件,到项目文件夹中
　　　　　　　　package.json 中 存储了所有依赖包的信息 以及 依赖包的相关设定
　　　　　　　　在项目路径下,执行 npm install 会自动安装依赖包

　　　　4、如果是第一次执行项目,需要逐一安装依赖包

　　　　　　如果是已经有完整的 package.json
　　　　　　将 package.json 复制拷贝到指定的文件夹中,执行 npm install 会自动安装记录的依赖包　　　　　　

　　　　　　安装依赖包  局部/项目依赖包
　　　　　　　　npm i gulp gulp　　　　　　　　　　依赖包
　　　　　　　　npm i gulp-cssmin 　　　　　　　　 css压缩依赖包
　　　　　　　　npm i gulp-autoprefixer 　　　　　　css添加前缀依赖包
　　　　　　　　npm i gulp-uglify 　　　　　　　　   ES5语法压缩依赖包
　　　　　　　　npm i gulp-babel 　　　　　　　　  其他语法转化ES5语法规范
　　　　　　　　npm i @babel/core 　　　　　　　  与 gulp-babel 配合的依赖包
　　　　　　　　npm i @babel/preset-env
　　　　　　　　npm i htmlmin 　　　　　　　　　    html压缩依赖包
　　　　　　　　npm i webserver 　　　　　　　　  服务器依赖包
　　　　　　　　npm i del　　　　　　　　　　       删除文件依赖包       

　　　　　　　　npm i sass　　　　　　　　　　    sass文件依赖包

创建 gulpfile.js 文件,定义gulp打包压缩程序规范

　　1、加载所有依赖包

　　　　@babel/core 与 @babel/preset-env 是与gulp-babel配合使用的只需下载，不需要加载。

　　2、制定打包规范

     　　a 、css 打包规范

                    const cssHandler = function(){

                        return gulp.src('./src/css/*.css')

                            .pipe( autoprefixer() )

                            .pipe( cssmin() )

                            .pipe( gulp.dest( './dist/css' ) )

                    }

                    注意: 1 , 先添加前缀,再执行打包

                            2 , 设定 浏览器兼容版本,在 package.json中设定

                            "browserslist": [

                                "last 2 versions",

                                "IOS > 7",

                                "FireFox > 20"

                            ]

                b 、 js打包规范

                    const jsHandler = function(){

                        return gulp.src('./src/js/*.js')

                            .pipe( babel( {presets:['@babel/env']} ) )

                            .pipe( uglify() )

                            .pipe( gulp.dest( './dist/js' ) )

                    }

                    注意:1, babel( {presets:['@babel/env']} ) 以对象的形式定义参数

                            2, 先将其他语法规范,转化为 ES5 语法规范,再执行打包压缩

                c 、 html打包压缩规范

                    const htmlHandler = function(){

                        return gulp.src( './src/pages/*.html' )

                            .pipe(htmlmin({

                                removeAttributeQuotes : true ,       　　 // 删除属性上的双引号

                                removeComments : true ,              　　 // 删除注释内容

                                collapseBooleanAttributes : true ,   　　// 删除布尔属性的属性值

                                collapseWhitespace : true ,         　　 // 删除标签之前的空格

                                minifyCSS : true ,                  　　　　 // 压缩html文件中的css程序 

                                minifyJS : true ,                   　　　　   // 压缩html文件中的js程序

                                                                       　　　　　　// 虽然可以压缩HTML中的js和css,但是压缩执行的不完美

                                                                       　　　　　　 // 实际项目中,不要有内部,js和css,都要写成外部文件形式

                            }))

                            .pipe( gulp.dest( './dist/pages' ) )

                    }

                    注意: 1, htmlmin() 中以对象的形式定义参数

                d 、图片等不需要打包压缩的,就直接移动至dist文件夹

                    const imgHandler = function(){

                        return gulp.src('./src/images/*.*')

                            .pipe( gulp.dest('./dist/images') )

                    }

                e , 设定 服务器执行规范 调用执行打包压缩好的文件

                    const webserverHandler = function(){

                        return gulp.src('./dist')      // 指定的是运行文件的目录,也就是要运行的压缩的文件,所在的文件夹

                            .pipe(webserver({

                                host:'127.0.0.1',                // 主机域名,当前就是 127.0.0.1 或者 localhost

                                port:'8080',                     // 定义监听端口

                                livereload:true,                 // 执行热启动,如果程序代码,改变,自动刷新页面,不用重启服务器,不用手动刷新页面

                                open:'./pages/index.html',   // 默认打开的网页,输入 127.0.0.1:8080 地址就会直接打开的页面

                                                                    // 默认的地址是,gulp.src()设定的文件夹位置,也就是默认是 dist 压缩文件夹所在的位置,执行的也是压缩之后的文件

                            }))

                    }

                    

                    注意: 1, gulp.src('./dist') 设定执行的打包压缩文件,存储的文件夹路径

                            2, open 设定服务器启动之后,执行的默认页面

                                    设定相对路径的起始位置,是 gulp.src() 设定的文件夹位置

                            3, livereload:true,  热启动 页面样式等更新,不用手动刷新,服务器会自动刷新

　　　　f、制定sass的编译打包压缩规范

                const sassHandler = function(){

                    return gulp.src('./src/sass/*.scss')

                           .pipe( sass() )             // 将sass编译为css

                           .pipe( autoprefixer() )     // 之后就是执行css的打包压缩规范

                           .pipe( cssmin() )

                           .pipe( gulp.dest( './dist/css' ) )

                }

设定监听程序

                a , 设定删除规范,也就是每次执行新的打包压缩之前,先删除原始的打包内容

                    const delHandler = function(){

                        return del(['./dist']);

                    }

                b , 设定监听规范,指定监听的文件文件夹,如果出现修改,会自动重新打包压缩

                    const watchHandler = function(){

                        gulp.watch( './src/css/*.css' ,  cssHandler);

                        gulp.watch( './src/js/*.js' ,  jsHandler);

                        gulp.watch( './src/pages/*.html' ,  htmlHandler);

                        gulp.watch( './src/images/*.*' ,  imgHandler);

                    }

                    注意: 1, gulp.watch() 第一个参数是,监听的文件夹文件路径

                                gulp.watch() 第二个参数是,监听文件内容发生改变时,执行的打包规范

                            2, 必须要定义的打包规范的函数名称

                c , 设定导出默认执行程序

                    module.exports.default = gulp.series(

                        delHandler,

                        gulp.parallel( cssHandler , jsHandler , htmlHandler , imgHandler),

                        webserverHandler,

                        watchHandler,

                    )

                    注意: 1,设定 module.exports.default 之后 ,再执行gulp,只要在路径下输入 gulp 就可以了

                            2,gulp.series() 按照顺序执行设定的程序,顺序必须正确

                            gulp.parallel() 是同时执行所有设定的程序

                            顺序一定是 : 先删除之前打包压缩的文件 

                                        在重新压缩所有需要打包压缩,移动的文件

                                        开启服务器

                                        执行监听