gulp打包详解 |
您所在的位置：网站首页 › 戴尔灵越15pro是什么显卡 › gulp打包详解 |
|
gulp打包详解
gulp 作用
删除文件中冗余的内容，压缩文件，减小文件体积
实际项目中运行的都是压缩完完成后的文件
见效加载响应时间
gulp打包压缩的对象
html、css、js、sass、webserver
音频，图片，插件等正常情况下都是打包完成的，直接一如到dist对应文件即可
服务器gulp一起绑定执行的，执行的是打包压缩好的程序文件
gulp基本配置及文件结构
1、下载全局gulp
npm i -g gulp 2、项目目录结构 源文件(src): pages：存储HTML css：存储css sass：存储sass images：存储图片 js：存储js plugin：存储插件 压缩文件(dist)： 压缩后的文件存放在dist中 文件名称与源文件名称一致 实际项目中为了保持文件名称路径一致，不添加多余的文件名后缀min等 3、初始化项目 整个项目第一次执行npm init -y 实际项目中，或者下载的git中的项目 下载package.hson文件，到项目中 package.json 中存储了所有的依赖包信息，以及相关设置 在项目路径下直接运行 npm install 自动下载依赖包 4、安装依赖包如果已经有完整的package.json,将 package.json 复制拷贝到指定的文件夹中,执行 npm install 会自动安装记录的依赖包 安装依赖包 局部/项目依赖包 依赖名称 解释 npm i gulp gulp依赖包 CSS npm i gulp-cssmin css打包压缩规范 npm i gulp-autoprefixer 自动添加css兼容前缀 JS npm i gulp-uglify ES5语法压缩依赖包 npm i gulp-babel 其他语法转化成ES5语法规范 npm i @babel/core 配合gulp-babel的 npm i @babel/preset-env 配合gulp-babel的 HTML npm i htmlmin html压缩依赖包 SASS npm i sass sass文件依赖包 其他 npm i gulp-webserver 服务器依赖包 npm i del 删除依赖包,删除指定路径的文件内容安装命令： npm i -D gulp gulp-cssmin gulp-autoprefixer del gulp-uglify gulp-babel @babel/core @babel/preset-env htmlmin sass gulp-webserver 5、配置gulpfile.js这里会在下面进行详细介绍 6、运行项目打开控制台窗口window+r cmd 切换到项目目录下执行命令: gulp gulp自带的功能 gulp.src 指定要执行打包文件的路径,也就是源文件的路径 gulp.dest 指定打包压缩好的文件,存储的路径 gulp.watch 监听模块 gulp.series 按照顺序执行程序,只能添加函数名称 gulp.parallel 同时执行程序,只能添加函数名称 gulpfile.js书写 注意 @babel/core 与 @babel/preset-env 是与gulp-babel配合使用的只需下载，不需要加载 制定打包规范 1. css 打包规范 const gulp = require('gulp'); const autoprefixer = require('gulp-autoprefixer'); const cssmin = require('gulp-cssmin'); const cssHandler = function(){ return gulp.src('./src/css/*.css') .pipe( autoprefixer() ) .pipe( cssmin() ) .pipe( gulp.dest( './dist/css' ) ) } 注意 先添加前缀,再执行打包 设定 浏览器兼容版本,在 package.json中设定"browserslist": [ "last 2 versions", "IOS > 7", "FireFox > 20" ] 2. js 打包规范 const uglify = require('gulp-uglify'); const babel = require('gulp-babel'); const jsHandler = function () { return gulp.src('./src/js/*.js') .pipe(babel({ presets: ['@babel/env'] })) .pipe(uglify()) .pipe(gulp.dest('./dist/js')) } 注意 babel( {presets:['@babel/env']} ) 以对象的形式定义参数 先将其他语法规范,转化为 ES5 语法规范,再执行打包压缩 3. html打包压缩规范 const htmlmin = require('gulp-htmlmin'); 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')) } 注意 htmlmin() 中以对象的形式定义参数 4. 图片等不需要打包压缩的,就直接移动至dist文件夹 const imgHandler = function () { return gulp.src('./src/images/*.*') .pipe(gulp.dest('./dist/images')) } 5. 制定sass的编译打包压缩规范 const sass = require('gulp-sass'); const autoprefixer = require('gulp-autoprefixer'); const cssmin = require('gulp-cssmin'); const sassHandler = function () { return gulp.src('./src/sass/*.scss') .pipe(sass()) // 将 sass文件编译为 css文件 .pipe(autoprefixer()) // 之后就执行css的打包规范 .pipe(cssmin()) .pipe(gulp.dest('./dist/css')) // 存储也是存储在css文件夹中 } 6. 服务器执行规范 调用执行打包压缩好的文件 const webserver = require('gulp-webserver'); const webserverHandler = function () { return gulp.src('./dist') // 指定的是运行文件的目录,也就是要运行的压缩的文件,所在的文件夹 .pipe(webserver({ host: '127.0.0.1', // 主机域名,当前就是 127.0.0.1 或者 localhost port: '8088', // 定义监听端口 livereload: true, // 执行热启动,如果程序代码,改变,自动刷新页面,不用重启服务器,不用手动刷新页面 open: './pages/index.html', // 默认打开的网页,输入 127.0.0.1:8080 地址就会直接打开的页面 // 默认的地址是,gulp.src()设定的文件夹位置,也就是默认是 dist 压缩文件夹所在的位置,执行的也是压缩之后的文件 })) } 注意 gulp.src('./dist') 设定执行的打包压缩文件,存储的文件夹路径 open 设定服务器启动之后,执行的默认页面 设定相对路径的起始位置,是 gulp.src() 设定的文件夹位置 livereload:true, 热启动 页面样式等更新,不用手动刷新,服务器会自动刷新 设置程序监听 设定删除规范----也就是每次执行新的打包压缩之前,先删除原始的打包内容const del = require('del'); const delHandler = function () { return del(['./dist']); } 设定监听规范----指定监听的文件文件夹,如果出现修改,会自动重新打包压缩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); gulp.watch('./src/sass/*.scss', sassHandler); } 注意 gulp.watch() 第一个参数是,监听的文件夹文件路径 gulp.watch() 第二个参数是,监听文件内容发生改变时,执行的打包规范 必须要定义的打包规范的函数名称 设定导出默认执行程序module.exports.default = gulp.series( delHandler, gulp.parallel(cssHandler, jsHandler, htmlHandler, imgHandler, sassHandler), webserverHandler, watchHandler, ) 注意: 设定 module.exports.default 之后 ,再执行gulp,只要在路径下输入 gulp 就可以了 gulp.series() 按照顺序执行设定的程序,顺序必须正确 gulp.parallel() 是同时执行所有设定的程序 顺序一定是 : 先删除之前打包压缩的文件 在重新压缩所有需要打包压缩,移动的文件 开启服务器 执行监听 完整代码 // 1 , 加载依赖包 // 加载 项目gulp 依赖包 const gulp = require('gulp'); // 加载 del删除依赖包 const del = require('del'); // 加载 css相关依赖包 const autoprefixer = require('gulp-autoprefixer'); const cssmin = require('gulp-cssmin'); // 加载 js相关依赖包 const uglify = require('gulp-uglify'); const babel = require('gulp-babel'); // 加载 HTML 相关依赖包 const htmlmin = require('gulp-htmlmin'); // 加载 sass 依赖包 const sass = require('gulp-sass'); // 加载 服务器 相关依赖包 const webserver = require('gulp-webserver'); // 2,定义打包规范 // 2-1,css打包规范 const cssHandler = function(){ return gulp.src('./src/css/*.css') .pipe( autoprefixer() ) .pipe( cssmin() ) .pipe( gulp.dest( './dist/css' ) ) } // 2-2,js打包规范 const jsHandler = function(){ return gulp.src('./src/js/*.js') .pipe( babel( {presets:['@babel/env']} ) ) .pipe( uglify() ) .pipe( gulp.dest( './dist/js' ) ) } // 2-3,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' ) ) } // 2-4, 图片等不需要压缩打包的文件 const imgHandler = function(){ return gulp.src('./src/images/*.*') .pipe( gulp.dest('./dist/images') ) } // 2-5, sass的编译 打包压缩 规范 const sassHandler = function(){ return gulp.src( './src/sass/*.scss' ) .pipe( sass() ) // 将 sass文件编译为 css文件 .pipe( autoprefixer() ) // 之后就执行css的打包规范 .pipe( cssmin() ) .pipe( gulp.dest( './dist/css' ) ) // 存储也是存储在css文件夹中 } // 2-6, 服务器打包执行规范 // gulp.src定义的是执行打包文件的路径.执行的是指定文件中打包之后的文件内容 const webserverHandler = function(){ return gulp.src('./dist') // 指定的是运行文件的目录,也就是要运行的压缩的文件,所在的文件夹 .pipe(webserver({ host:'127.0.0.1', // 主机域名,当前就是 127.0.0.1 或者 localhost port:'8088', // 定义监听端口 livereload:true, // 执行热启动,如果程序代码,改变,自动刷新页面,不用重启服务器,不用手动刷新页面 open:'./pages/index.html', // 默认打开的网页,输入 127.0.0.1:8080 地址就会直接打开的页面 // 默认的地址是,gulp.src()设定的文件夹位置,也就是默认是 dist 压缩文件夹所在的位置,执行的也是压缩之后的文件 })) } // 3,定义监听规范 // 3-1,删除规范 const delHandler = function(){ return del(['./dist']); } // 3-2,监听规范 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); gulp.watch( './src/sass/*.scss' , sassHandler); } // 3-3,定义默认执行程序 module.exports.default = gulp.series( delHandler, gulp.parallel( cssHandler , jsHandler , htmlHandler , imgHandler , sassHandler), webserverHandler, watchHandler, ) |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |