5.1.什么是gulp
-
前端自动化打包工具
-
运行需要依赖node环境
- 自动化打包，不需要手动做事，但是需要你手动编辑好一个步骤
- 打包：就是把零散的东西给你结合在一起，对代码进行压缩/混淆/合并
- 工具：就是帮我们完成这个事情的东西
-
5.2.安装gulp
npm install --global gulp（简写：npm i -g gulp）- 安装gulp指令
npm uninstall --global gulp（简写：npm un -g gulp）- 卸载gulp指令
npm cache clear -f- 清除缓存
-
gulp配置打包
-
需要手动写一个配置文件，告诉gulp按照我们的这个配置文件来打包
-
每一个项目一个配置文件，每个项目打包的时候使用的都是当前的项目文件
-
gulp使用之前
-
-
先准备一个项目文件夹--------------------我的整个项目文件夹
-src/ -------------------------我的所有原始代码
+pages/ ----------------------放我所有的html文件
+css/ -----------------------放我所有的css文件
+js/ -----------------------放我所有的js文件
+images/ -----------------------放我所有的图片
+lib/ -------------------------放我所有的第三方 文件 （比如jquery swiper）
-package.json -------------------------用来记录我项目信息的描述的文件
-
使用
npm init初始化一下项目 +因为我们的项目一定会用到很多第三方工具
+我就用npm下载第三方工具
+最好就是使用
npm init给我生成一个package.json文件来记录一下我用了哪些包 +顺便也记录一下自己的项目
3.自己手在项目的根目录创建一个叫
gulpfile.js的文件 +名字必须是
gulpfile.js +这个文件里就用来书写我们项目的打包规则（也就是这个项目打包的配置文件 ）
+使用gulp的时候会默认读取
gulpfile.js的打包配置文件 -
-
-
gulpfile.js的打包配置文件规则 -
借助一些gulp的API方法来帮助我们打包，所以先在项目文件夹里安装一个gulp，作为开发依赖
-
项目里安装的gulp和node 全局安装的gulp区别
- 项目里面安装的gulp（
npm install gulp简写npm i gulp）- 一个第三方依赖包
- 也是一个node的第三方模块
- 也是也别人写好的一堆方法，放在了里面
- 用来给我提供一些API使用的
- 全局安装的gulp（
npm install --golbal gulp简写npm i -g gulp）- 是为我们的电脑增加一个可以使用gulp的能力
- 也就是可以再命令行
gulp xx的指令，一台电脑安装一次，可以以后一直使用
- 项目里面安装的gulp（
-
gulpfile.js文件
//1.导入gulp这个第三方模块的时候，会优先去内置模块寻找，如果内置模块里没有，那么就会自动去node-modules的文件里面查找，导入这个gulp以后，就可以使用gulp.xxx()的各种方法了 const gulp =require('gulp') //2.导入gulp-cssmin这个第三方模块 const cssmin = require('gulp-cssmin') //3.先写一个打包css的方法 const cssHandler=()=>{ //找到src目录下对的css目录下的所有后缀为.css的文件 return gulp.src('./src/css/*.css') //压缩css代码 .pipe(cssmin()) //压缩完毕的css代码放在dist文件夹里 .pipe(gulp.dest('./dist/css')) } //4.最后导出我准备好的这个方法 module.exports.css=cssHandler-
gulp里面的一些方法
- src()
- 用来找到你要打包的文件的
- src('你要打包的文件的地址’)
- 返回值是一个二进制流，就可以继续去调用别的方法
- pipe()
- 用来帮你做事情的
- pipe('你要做的事情'）
- 返回值：又是一个二进制流，又可以接着调用别的方法
- dest()
- 用来写入文件的
- dest('你要放的文件夹')
- 你要把你已经压缩好的代码放在哪一个文件夹里
- 如果没有指定文件夹，会自动创建一个文件夹 放进去
- src()
-
parallel()
- 用来并行多个任务的
- gulp.parallel(你定义的任务1，你定义的任务2，...)
- 他会把几个任务都给你执行了
- 只要这个返回值一执行，就能把你准备好的几个任务同时开始执行
- series()
- 用来逐个执行多个任务的
- gulp.series(你定义的任务1，你定义的任务2，...)
- 只要这个返回值一执行，就能把你准备好的几个任务逐个开始执行
- watch()
- 监控src文件夹下的文件，只要已修改就执行对应的任务
- gulp.watchr(你要监控的文件目录，你要执行的任务)
-
执行各种压缩代码的方法，都是第三方依赖包
-
一个小问题
- 当我在项目文件夹里安装gulp以后，package.json文件就会记录我下载了gulp包
-
当我在项目文件夹里安装jQuery以后，也会在package.json文件记录我下载了jQuery包
-
但是我下载gulp仅仅是为了打包项目使用，打包完成后就不用了了；jQuery是我在项目里一直使用的第三方，
-
既然有区别，那就记录的时候分开记录，现在都是记录在dependencies里面
-
我们安装一些上线不需要的包的时候，就使用另外一套指令
-
npm install --save-dev 包名的指令（简写：npm i -D 包名）- 和
npm install 包名的下载没有任何区别
- 和
- 唯一的区别就是在package.json里面的记录位置不一样了，现在记录在devdependencies里面
-
-
gulp-cssmin专门用来压缩css文件的，你需要下载导入-
下载指令
npm install --save-dev gulp-cssmin（简写：npm i -D gulp-cssmin） -
导入第三方模块：
const cssmin = require('gulp-cssmin') -
导出这个方法：
module.exports.css=cssHandler -
cmd命令行 执行 gulp css，就会执行压缩
-
gulp-autoprefixer第三方模块是专门用来加前缀，解决浏览器兼容问题-
下载指令
npm install --save-dev gulp-autoprefixer（简写：npm i -D gulp-autoprefixer） -
导入第三方模块：
const autoprefixer = require('gulp-autoprefixer') -
//1.导入gulp这个第三方模块的时候，会优先去内置模块寻找，如果内置模块里没有，那么就会自动去node-modules的文件里面查找，导入这个gulp以后，就可以使用gulp.xxx()的各种方法了 const gulp =require('gulp') //2.导入gulp-cssmin这个第三方模块 const cssmin = require('gulp-cssmin') //3.导入gulp-autoprefixer`这个第三方模块 const autoprefixer = require('gulp-autoprefixer') //4.先写一个打包css的方法 const cssHandler=()=>{ //找到src目录下对的css目录下的所有后缀为.css的文件 return gulp.src('./src/css/*.css') //给css代码加前缀 .pipe(autoprefixer({ browsers:['last 2 versions'] })) //压缩css代码 .pipe(cssmin()) //压缩完毕的css代码放在dist文件夹里 .pipe(gulp.dest('./dist/css')) } //5.最后导出我准备好的这个方法 module.exports.css=cssHandler
-
-
gulp-uglify第三方模块是专门用来压缩js的- 下载指令
npm install --save-dev gulp-uglify（简写：npm i -D gulp-uglify） - 导入第三方模块：
const uglify = require('gulp-uglify') - 导出这个方法：
module.exports.js=jsHandler - 这个安装包不认识es6的语法，所以要用
gulp-bable先把es6语法转换成es5语法
- 下载指令
-
gulp-bable这个第三方模块是专门用来把es6语法转换成es5的语法-
这个第三方包还依赖了另外两个第三方包
@babel/core和@babel/preset-env -
下载的时候需要下载三个包，导入的时候只要导入一个gulp-babel就可以了
-
下载指令
npm install --save-dev gulp-bable @babel/core babel/preset-env -
导入第三方模块：
const bable = require('gulp-bable') -
//1.导入gulp这个第三方模块的时候，会优先去内置模块寻找，如果内置模块里没有，那么就会自动去node-modules的文件里面查找，导入这个gulp以后，就可以使用gulp.xxx()的各种方法了 const gulp =require('gulp') //3.导入gulp-uglify这个第三方模块 const uglify = require('gulp-uglify') //4.先写一个打包js的方法 const jsHandler=()=>{ //找到src目录下对的js目录下的所有后缀为.js的文件 return gulp.src('./src/js/*.js') //es6转es5 .pipe(babel({ prests:['@bable/env'] })) .pipe(uglify()) //压缩完毕的js代码放在dist文件夹里 .pipe(gulp.dest('./dist/js')) } //5.最后导出我准备好的这个方法 module.exports.js=jsHandler -
cmd命令行 执行 gulp js，就会执行压缩
-
-
gulp-htmlmin专门用来压缩html文件的，你需要下载导入-
下载指令
npm install --save-dev gulp-htmlmin（简写：npm i -D gulp-htmlmin） -
导入第三方模块：
const htmlmin = require('gulp-htmlmin') -
导出这个方法：
module.exports.html=htmlHandler -
cmd命令行 执行 gulp html，就会执行压缩
-
//1.导入gulp这个第三方模块的时候，会优先去内置模块寻找，如果内置模块里没有，那么就会自动去node-modules的文件里面查找，导入这个gulp以后，就可以使用gulp.xxx()的各种方法了 const gulp =require('gulp') //3.导入gulp-uglify这个第三方模块 const htmlmin = require('gulp-htmlmin') //4.先写一个打包js的方法 const htmlHandler=()=>{ //找到src目录下对的pages目录下的所有后缀为.html的文件 return gulp.src('./src/html/*.html') .pipe(htmlmin({ removeAttributeQuotes:ture,//移除属性上的双引号 removeComments:ture,//移除注释 collapseBooleanAttributes:ture,//把值为布尔的属性简写 collapseWhitespace:ture,//移除所有空格 minifyCSS:true,//style里的css样式给去空格 minifyJS:true,//script里的JS样式给去空格 })) //压缩完毕的js代码放在dist文件夹里 .pipe(gulp.dest('./dist/js')) } //5.最后导出我准备好的这个方法 module.exports.html=htmlHandler
-
-
书写一个移动img文件的方法
-
图片我们尽量不压缩，设计师给图片的时候是已经压缩好的
-
我们再压缩的话，图片就会在失帧的基础上压缩
-
const imgHandler=()=>{ //找到src目录下对的images目录下的所有后缀为**的文件 return gulp.src('./src/images/**') .pipe(gulp.dest('./dist/images')) } //5.最后导出我准备好的这个方法 module.exports.img=imgHandler
-
-
书写一个移动lib文件夹的方法
-
第三方插件/框架放在lib文件夹下，不需要压缩 只需要移动就好了
-
const libHandler=()=>{ //找到src目录下对的lib目录下的所有后缀为**的文件 return gulp.src('./src/lib/**') .pipe(gulp.dest('./dist/lib')) } //5.最后导出我准备好的这个方法 module.exports.lib=libHandler
-
-
导出一个默认任务
- 当你在执行gulp default的时候，可以不写default
- 你在执行gulp这个指令，就是在执行default
//第一种：导出默认任务，这个parallel是同时执行 module.exports.default = gulp.parallel(cssHandler,jsHandler,htmlHandler,imgHandler,libHandler ) //第二种：导出默认任务，这个series是逐个执行,在这里是先执行删除delHandler,再同时执行parallel() module.exports.default = gulp.series( delHandler, gulp.parallel(cssHandler,jsHandler,htmlHandler,imgHandler,libHandler ), serverHandler, watchHandler ) -
再书写一个任务自动删除dist文件夹里的东西
-
下载指令
npm install --save-dev del（简写：npm i -D del） -
const delHandler=()=>{ //这个函数的目的是为了删除dist目录里的东西 return del(['./dist']) } //5.最后导出我准备好的这个方法 module.exports.del=delHandler
-
-
在书写一个配置服务器的任务
-
下载指令
npm install --save-dev gulp-webserver（简写：npm i -D gulp-webserver） -
这个是专门用来配置node服务器的
-
导入第三方模块：
const webserver = require('gulp-webserver') -
配置代理---webserver可以配置代理
- 直接在webserver的时候 添加一个配置项
-
const webserver = require('gulp-webserver') const serverHandler=()=>{ //要把页面在服务器上打开 //打开的是dist目录里面我已经压缩好的页面 //找到我要打开的页面的文件夹，把这个文件夹当做网站根目录 return gulp.src('./dist') .pipe(webserver({ //需要一些配置项 host：'localhost',//域名 port：8080,//端口号 open：'./pages/index.html',//默认打开的页面 livereload:true,//-热重启-当dist里面的东西改变就自动刷新浏览器 //所有的代理配置都是在proxies里面 proxies：[ { source:'/gx'//源 代理标识符 target:'http//127.0.0.1/test.php'//目标地址 } ] })) } //5.最后导出我准备好的这个方法 module.exports.server=serveHandler -
自定义域名
- 如果你想要自定义域名，前提：建议别使用已经存在的域名
- 修改一下你电脑里的hosts文件
-
window-我的电脑--C--windows --system32--drivers --etc--hosts
-
在最后添加 127.0.0.1 你自己定义的域名
-
-
-
书写一个自动监控文件的任务
const watchHandler=()=>{ //这个函数的目的是为了监控src里的东西 gulp.watch('./src/css/*.css',cssHandler) gulp.watch('./src/js/*.js',jsHandler) gulp.watch('./src/pages/*.html',htmlsHandler) gulp.watch('./src/images/**',imgHandler) gulp.watch('./src/lib/**',libHandler) } //5.最后导出我准备好的这个方法 module.exports.watch=watchHandler
-
-
-
nodejs端口被占用的原因及处理问题
-
首先打开cmd命令窗口，输入
netstat -ano|findstr 8080 -
此时可以获取8080端口对应的tcp信息，如下，TCP号是15528
-
在cmd 输入 taskkill /f /t /im 15528 号，来关掉被占用的端口；此时可正常使用访问 8080 端口
taskkill /f /t /im 15528
-
