一、简介
- gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；
-
gulp是基于Nodejs的自动任务运行器，她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。
二、安装
通过 npm 来安装 gulp；(设置镜像源可以通过cnpm安装)
- 全局安装 在cmd中执行 cnpm i -g gulp
-
查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装
-
三、配置信息
1. npm init -y 生成package.json 文件 会自动存储下载的第三方依赖包信息，存储信息如下：
{ "name": "zhang", "version": "1.0.0", "description": "", "main": "gulpfile.js", "devDependencies": { "@babel/core": "^7.8.7", "@babel/preset-env": "^7.8.7", "del": "^5.1.0", "gulp": "^4.0.2", "gulp-autoprefixer": "^7.0.1", "gulp-babel": "^8.0.0", "gulp-cssmin": "^0.2.0", "gulp-htmlmin": "^5.0.1", "gulp-uglify": "^3.0.2", "gulp-webserver": "^0.9.1" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
2.安装第三方包
在项目目录中安装gulp cnpm i -D gulp
再安装如下第三方包
(1), gulp-cssmin 打包 css 的第三方依赖包 (2), gulp-autoprefixer 给css属性添加兼容前缀 (3), gulp-uglify 打包 js 的第三方依赖包 -- 只能打包ES5语法 (4), gulp-babel ES6等语法转化为ES5语法 (5), @bable/core 与gulp-bable一起使用的第三方依赖包 (6), @bable/preset-env 与gulp-bable一起使用的第三方依赖包 (7), gulp-htmlmin 打包 html 的第三方依赖包 (8), gulp-server 设定开启服务器的第三方依赖包 (9), del 删除文件夹使用的第三方依赖包
2. 手动建立一个叫 gulpfile.js 的文件，设定打包规范
// 1.导入依赖包 // 导入gulp依赖包 const gulp = require('gulp') // 导入打包用的第三方依赖包 // css的依赖包 const cssmin = require('gulp-cssmin') const autoprefixer = require('gulp-autoprefixer') // js的依赖包 --- 只能打包 ES5 语法 const uglify = require('gulp-uglify'); // gulp-babel 和 @babel/core 和 @babel/preset-env // 这三个 依赖包 来配合 gulp-uglify // 将 ES6等语法格式,转化为ES5的语法格式,然后来打包压缩 // 加载导入依赖包的时候,只需要导入 gulp-babel 就可以了 // 另外两个会一起自动导入加载 const babel = require('gulp-babel'); // 1.6 html打包规范第三方依赖包 gulp-htmlmin const htmlmin = require('gulp-htmlmin'); // 2.设定打包规范 // src()找到文件 ==> pipe()打包的操作(去除空格等等) ==> dest()写成压缩文件 // 2-1 设定CSS的打包规范 function cssHandler() { return gulp.src('./src/css/*.css').pipe(cssmin()).pipe(autoprefixer()).pipe(gulp.dest('./dist/css')) } // 2-2 设定JS的打包规范 // const jsHandler = function () { // return gulp.src('./src/js/*.js') // 找到js文件 // .pipe(babel({ presets: ['@babel/env'] })) // 将es6的语法,转化为es5的语法 // // 参数是固定的语法格式 // .pipe(uglify()) // 将ES5的语法格式js程序压缩 // .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代码 })) .pipe(gulp.dest('./dist/pages')) // 将压缩文件写入到指定位置 } // 2-4 音频视频,还有图片,不会打包压缩,会失真 // 音频视频,图片等,一般都会直接就复制粘贴到指定的文件夹 // 图片的复制粘贴 const imgHandler = function () { return gulp.src('./src/images/**') // 不分区文件名和扩展名,是所有文件 .pipe(gulp.dest('./dist/images')) // 将读取的文件,直接写入到指定的位置 } // 2-5 第三方的插件,不如 bootstrap,jquery等 // 已经压缩打包好了,直接复制粘贴到指定的位置即可 const libHandler = function () { return gulp.src('./src/lib/**') // 不分区文件名和扩展名,是所有文件 .pipe(gulp.dest('./dist/lib')) // 将读取的文件,直接写入到指定的位置 } // 3.导出,并且按照步骤自行执行 定义好的规范 module.exports.css = cssHandler(); module.exports.js = jsHandler(); module.exports.html = htmlHandler(); module.exports.img = imgHandler(); module.exports.lib = libHandler();
四、项目打包配置信息
// 打包规范的基本步骤 /* 1,加载第三方依赖包 2,定制规范 定义的参数,可以写在程序中,也可以写在 parkage.json文件中 一般是写在 程序中 css规范中的参数,如果写在程序中,会有警告,强迫症患者表示不服 写在 parkage.json 文件中 , 没有警告,会看着舒服一些 3,解决3个问题 4,指定default程序,导出执行 */ // gulp依赖包 --- 此时加载的是项目作用域的gulp const gulp = require('gulp'); // gulp-cssmin依赖包 --- 压缩css文件 const cssmin = require('gulp-cssmin'); // gulp-autoprefixer依赖包 --- 给css文件添加兼容前缀 // 是需要执行参数的,这个参数可以设定在程序中,但是会有警告 // 一般我们定义在 parkage.json 文件中 /* "browserslist": [ "last 2 versions", "IOS > 7", "FireFox > 20" ] */ const autoprefixer = require('gulp-autoprefixer'); // gulp-uglify依赖包 --- 压缩ES5语法 const uglify = require('gulp-uglify'); // gulp-babel依赖包 --- 将ES6语法转化为ES5语法 // 还需要两个依赖包配合 @babel/core 和 @babel/prest-env // 需要使用npm独立下载,但是加载时,只需要加载 gulp-babel 其他两个会自动加载 const babel = require('gulp-babel'); // gulp-htmlmin依赖包 --- 压缩HTML文件 // 也需要设定很多的参数,我们一般就是设定在程序中 // 当然也可以写下 parkage.json 文件中 const htmlmin = require('gulp-htmlmin'); // gulp-webserver依赖包 --- 搭建server服务器的依赖包 // 会根据我们设定的参数,来搭建服务器,并且执行默认页面 const webserver = require('gulp-webserver'); // del依赖包 --- 删除文件方法 const del = require('del'); // 设定打包规范 // css打包规范 找文件 加前缀 压缩 写入 const cssHandler = function(){ // 1,找到需要打包的文件 // 2,通过 pipe() 来执行 打包规范 // 3,将打包好的文件 写入到指定位置 return gulp.src('./src/css/*.css') .pipe(autoprefixer()) .pipe(cssmin()) .pipe(gulp.dest('./dist/css')); } // js文件 找文件 转ES5 压缩 写入 const jsHandler = function(){ return gulp.src('./src/js/*.js') .pipe(babel( {presets:['@babel/env']} )) .pipe(uglify()) .pipe(gulp.dest('./dist/js')) } // 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代码 })) .pipe(gulp.dest('./dist/pages')); } // 图片,音频,第三方插件等,都不用压缩打包,直接复制文件到新的地址即可 // 图片复制 const imgHandler = function(){ return gulp.src('./src/images/**') .pipe(gulp.dest('./dist/images')); } // 第三方插件等复制 const libHandler = function(){ return gulp.src('./src/lib/**') .pipe(gulp.dest('./dist/lib')); } // 解决问题 // 问题1: 压缩文件存在重复内容 // 在执行新的压缩之前,先删除旧的压缩文件 // 执行一个删除规范 // 删除规范 const delHandler = function(){ return del([ './dist' ]); } // 问题2:搭建服务器 // 使用 webserver 依赖包 设定参数即可 // 参数 1,设定一个服务器显示页面的文件夹 这个文件夹的作用类似于 phpstudy的 www // 现在我们要显示的不是源文件,是压缩之后的文件 在 dist 文件夹中 // 2,通过 pipe() 来启动服务器 使用 webserver 依赖包 // 并且设定 webserver 的参数 const serverHandler = function(){ return gulp.src('./dist') .pipe(webserver({ host:'127.0.0.1', // 地址域名,可以根据实际需求来设定,设定方式与配置站点方式一样 // 需要修改 hosts 文件内容 port:8080, // 端口根据实际需求设定 范围 0 -65535 之间 推荐使用 1023 以后的 open:'./pages/index.html', // 设定打开首页的地址,路径是从 设定dist 文件夹路径开始的 livereload: true, // 开启热重启,页面内容有改变,直接会自动刷新页面 proxies:[ // 设置代理,如果你打开的页面中有跨域需要执行,就要设定代理 // 在 webserver 中设定,就不需要去服务器中设定了 // 代理语法与服务器代理语法相同 { source: '/dt', // 设定代理名称 target: '代理的地址' // 设定代理地址 }, { source: '/jd', // 设定代理名称 target: '代理的地址' // 设定代理地址 } ], })) } // 问题3 时时监控 // 使用 gulp.watch() 方法 这个方法是 gulp 提供的方法 // 源码变 ---> 监听 ---> 压缩变 ---> 热重启 ---> 页面变 // 最终的结果就是源码变,页面就自动变 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 ); // 图片源码变,重新压缩,压缩文件变,通过热重启,页面显示变 gulp.watch( './src/lib/**' , libHandler ); // 第三方插件源码变,重新压缩,压缩文件变,通过热重启,页面显示变 } // 导入,默认执行 // 设定default 之后,在cmd中直接执行 gulp就可以了 module.exports.default = gulp.series( // 1,先删除旧的压缩文件 // 2,执行新的压缩--可以同时执行 // 3,开启服务器 // 4,时时监听源文件 delHandler, gulp.parallel(cssHandler,jsHandler,htmlHandler,imgHandler,libHandler), serverHandler, watchHandler )
五、执行 gulp 程序
建立导入 default 内容 也就是 gulp 默认执行的程序 module.exports.default = 程序 这是 gulp 一种 固定语法 这样定义为 默认值性的程序之后 在 控制台 项目路径下 直接输入 gulp 就可以执行设定的默认程序
gulp.series() 有序执行定义的方法 必须只能写 方法的名称 ,会根据方法名称来执行相应的程序 方法名称,没有 () gulp.parallel() 同时执行定义的方法 , 也是要写函数名称 // 先删除旧的,重新打包新的,再启动服务器,监听源文件 // 顺序执行 module.exports.default = gulp.series( 删除规范 gulp.parallel(同步执行所有的打包规范) 启动服务器规范 监听源文件规范 )
