一、Gulp入门
dependencies跟devDependencies的区别:
dependencies是依赖,项目上线时,这个依赖会一起放到服务器上 jquery $()
devDependencies是专指开发过程中使用的依赖,只会在本地起作用 less sass
复制 $ npm i jquery@3.5.1 --save-dev
等同于==> $ npm i jquery@3.5.1 -D
$ npm i jquery@3.5.1 --save
等同于==> $ npm i jquery@3.5.1 -S
等同于==> $ npm i jquery@3.5.1
$ npm install cnpm -g --registry=https://registry.npm.taobao.org
安装淘宝镜像,安装到全局 -g ==> --global
npm 的全局安装路径
C:\Users\EDZ\AppData\Roaming\npm
1、gulp安装
复制 $ npm install gulp@3.9.1 -g // **使用npm 安装gulp -g 表示全局安装,没有-g表示本地安装**
$ npm install gulp@3.9.1
$ gulp -v 查看gulp版本
$ npm init -y npm初始化,生成package.json
2、体验gulp:项目中使用gulp编译来文件(重点)
现在在刚才创建的gulpwolf项目中,新建以下几个新文件(夹),目录如下:
node_modules目录 : 是项目开发时 依赖的库,比如:less编译插件, js 和并插件等(不用打包到项目)node环境依赖
src目录 : 是源代码存放目录,编写代码,编写好之后需要编译
gulpfile.js : gulp的配置文件,就是让咱们的src目录的源代码按照我们的意愿 去执行。
在gulpfile.js中写入以下代码:
复制 var gulp = require ( 'gulp' ); // 在node_modules下找到gulp包,寻找它里面的index.js
//gulp对'myhtml'这个任务进行后面函数里面内容的处理
gulp .task ( 'myhtml' , function (){ //'myhtml' 是任务名
// 对这个'src/index.html'文件进行编译输出到目的地build文件夹(和dist)下
gulp .src ( 'src/index.html' )
.pipe ( gulp .dest ( 'build' ))
.pipe ( gulp .dest ( 'dist' ))
});
之后在项目目录下命令行窗口中执行 gulp myhtml 就能生成build和dist两个目录,里面是编译生成好的index.html
3、使用gulp编译less成css,并最终压缩css
我们可以用上上面同样的方法来编译less文件成为css:
安装gulp-less插件: (直接复制以下命令去执行)
复制 $ npm install --save-dev gulp-less@4.0.1 //在根目录下执行(下载less编译插件) 4.0.1
在gulpfile.js中添加以下代码:
复制 var less = require ( 'gulp-less' );
gulp .task ( 'myless' , function (){
gulp .src ( 'src/less/index.less' )
.pipe ( less ()) //编译成为css
.pipe ( gulp .dest ( 'build/css' )) //输出到指定目录
});
到src/index.html中引入输出目录'build/css'下的css文件
复制 < link rel = "stylesheet" href = "css/index.css" >
之后在项目目录下命令行窗口中执行 gulp myless, 打开build目录下的index.html就可以看到样式了。
安装gulp-cssmin: (直接复制以下命令去执行)
复制 $ npm install --save-dev gulp-cssmin@0.2.0 //在根目录下执行(下载css压缩插件) 0.2.0
在gulpfile.js中添加以下代码:
复制 var cssmin = require ( 'gulp-cssmin' );
gulp .task ( 'myless' , function (){
gulp .src ( 'src/less/index.less' )
.pipe ( less ()) //编译成为css
.pipe ( cssmin ()) //读取和压缩css文件
.pipe ( gulp .dest ( 'build/css' )) //输出到指定目录
});
之后在项目目录下命令行窗口中执行 gulp myless, 打开build目录下的index.css就可以看到被压缩的css了
tips:
**gulp.task('all', ['myhtml', 'myless']);**表示所有任务一起执行
4、合并和压缩js
把 src/js 下的 js 文件编译后合并成一个js文件再打包到build 和 dist(添加压缩)目录下
安装gulp-concat和gulp-uglify (直接复制以下命令去执行)
复制 $ npm install --save-dev gulp-concat@2.6.1 //在根目录下执行(下载js合并插件) 2.6.1
复制 $ npm install --save-dev gulp-uglify@3.0.1 //在根目录下执行(下载js压缩插件) 3.0.1
在gulpfile.js中添加以下代码:
复制 var concat = require ( 'gulp-concat' );
var uglify = require ( 'gulp-uglify' );
gulp .task ( 'myjs' , function (){
gulp .src ( 'src/js/*.js' )
.pipe ( concat ( 'main.js' )) //合并成为main.js文件
.pipe ( gulp .dest ( 'build' )) //输出到build目录下
.pipe ( uglify ()) //读取和压缩js文件
.pipe ( gulp .dest ( 'dist' )) //输出到dist目录下
});
之后在项目目录下命令行窗口中执行 gulp all, 在build可以看到js,在dist可以看到被压缩的js
注意
uglify压缩前,会先判断有没有es6,如果有es6语法,则无法转换,需要在此之前先将es6转es5:
安装以下插件:
复制 $ npm install --save-dev gulp-babel@7.0.0 babel-preset-es2015 babel-core // 在根目录下执行(下载babel以转es6为es5)
代码:
复制 var concat = require ( 'gulp-concat' );
var uglify = require ( 'gulp-uglify' );
var babel = require ( 'gulp-babel' );
gulp .task ( 'myjs' , function () {
gulp .src ( './src/js/*' )
.pipe ( concat ( 'main.js' ))
.pipe ( babel ({presets : [ 'es2015' ]})) // 先转es5再压缩
.pipe ( uglify ())
.pipe ( gulp .dest ( 'build/js' ))
})
5、压缩图片
把 src/image 下的 图片文件压缩到build 和 dist(添加压缩)目录下
安装gulp-concat和gulp-uglify (直接复制以下命令去执行)
复制 $ npm install --save-dev gulp-imagemin@4.1.0 //在根目录下执行(下载压缩图片的插件,最好用 npm)
在gulpfile.js中添加以下代码:
复制 var imagemin = require ( 'gulp-imagemin' );
gulp .task ( 'myimage' , function () {
gulp .src ( 'src/images/*' ) /*读取所有的图片文件*/
/*将读取所有的图片文件进行压缩 */
.pipe ( imagemin () )
.pipe ( gulp .dest ( 'build/images' )) /*再将读取压缩后的文件写到build目录(没有会自动新建)*/
});
之后在项目目录下命令行窗口中执行 gulp all, 在build/images可以被压缩的图片
tips: **gulp.task('default',['all']);**表示所有任务一起执行
6、编写server服务
安装gulp-connect (直接复制以下命令去执行)
复制 $ npm install --save-dev gulp-connect@5.6.1 //安装gulp-connect插件,创建一个node服务
在gulpfile.js中添加以下代码:
复制 var connect = require ( 'gulp-connect' );
gulp .task ( 'server' , function () {
connect .server ();
});
// 记得添加server
gulp .task ( 'all' , [ 'myhtml' , 'myless' , 'myjs' , 'myimage' , 'server' ]);
gulp .task ( 'default' , [ 'all' ]);
之后在项目目录下命令行窗口中执行 gulp , 在浏览器中访问http://localhost:8080/build/ 就可以看到我们的页面了。
7、添加热更新功能
复制 gulp .task ( 'server' , function () {
/*1.设置web服务器*/
connect .server ({
root : [ 'build' ] , //服务器管理/运行哪个目录(默认是项目的根目录)
livereload : true , //是否热更新。
port : 9999 //指定web服务的端口号(默认是8080)
});
/*2.gulp监视文件,并且可以在文件发生改动时候做一些事情.
* 参数一:监视的文件
* 参数二: 在文件变动后执行的一个task任务
* */
gulp .watch ( 'src/less/*' , [ 'myless' ]);
});
//3.在myless任务中添加重新加载功能
gulp .task ( 'myless' , function (){
gulp .src ( 'src/less/index.less' )
.pipe ( less ()) //编译成为css\
.pipe ( cssmin ()) //读取和压缩css文件
.pipe ( gulp .dest ( 'build/css' )) //输出到指定目录
.pipe ( connect .reload ()) //当内容发生改变时, 重新加载。
});
二、Animate.css简介
animate.css 是一个来自国外的跨浏览器的 CSS3 动画库 ,它预设了多种动画效果,例如弹跳,抖动,闪烁,淡入淡出等多种css3动画效果可以直接调用。
官网(特效参考): https://daneden.github.io/animate.css/
备用地址:https://animate.style/
源码下载地址:https://github.com/daneden/animate.css
兼容性:
animate.css底层是通过css3实现的,当然是只兼容支持 CSS3 animate 属性的浏览器:
IE10+、Firefox、Chrome、Opera、Safari。
三、体验Animate.css
使用步骤:
1 引入下载好的animate.css文件
2 给要做动画的元素添加类名
要添加两个类名,分别是:
animated(控制时间)
要添加的动画效果类名(控制效果)
复制 < head >
< meta charset = "UTF-8" >
< title >Title</ title >
< style >
div {
width : 200 px ;
height : 200 px ;
background-color : pink ;
margin : 100 px auto ;
}
</ style >
< link rel = "stylesheet" href = "animate/animate.css" >
</ head >
< body >
< div class = "animated bounceInDown" ></ div >
</ body >
四、静态登录框动效添加
参考JQ文档:http://jquery.cuishifeng.cn/ ,查看addClass() 的使用
复制 $ ( ".login" ) .click ( function () {
$ ( ".loginBox" ) .addClass ( "animated bounce" );
setTimeout ( function (){
$ ( ".loginBox" ) .removeClass ( "animated bounce" );
} , 500 );
})
五、WOW.js简介
wow.js是做网页滚动动画的js框架,配合animate.css使用,可以在网页滚动的过程中释放animate.css动画效果 。
官网地址:http://mynameismatthieu.com/WOW/index.html
源码下载地址:https://github.com/matthieua/WOW
兼容性: 同animate.css
六、体验WOW.js
使用步骤:
1 引入animate.css文件和wow.js文件
2 书写html结构
在要做滚动动画的元素身上添加两个类名
wow(声明元素使用混动动画)
动画名称(滚动释放的动画名称)
3 初始化wow: new WOW().init()
体验案例:
复制 < head >
< meta charset = "UTF-8" >
< title >Title</ title >
< style >
div {
width : 200 px ;
height : 200 px ;
background-color : pink ;
margin : 100 px auto ;
}
</ style >
< link rel = "stylesheet" href = "animate/animate.css" >
</ head >
< body >
< div class = "wow bounceInLeft" ></ div >
< script src = "wow/wow.js" ></ script >
< script >
new WOW () .init ()
</ script >
</ body >
七、wow的使用
尝试多个元素都使用上wow,可以看到进场动画效果
复制 < head >
< meta charset = "UTF-8" >
< title >Title</ title >
< style >
ul {
padding : 0 ;
list-style : none ;
}
.box {
width : 500 px ;
/*background: pink;*/
margin : 0 auto ;
overflow : hidden ;
}
li {
width : 200 px ;
height : 200 px ;
background-color : #ccc ;
margin-bottom : 30 px ;
}
.left {
float : left ;
}
.right {
float : right ;
}
</ style >
< link rel = "stylesheet" href = "animate/animate.css" >
</ head >
< body >
< ul class = "box" >
< li class = "wow bounceInLeft left" ></ li >
< li class = "wow bounceInRight right" ></ li >
< li class = "wow bounceInLeft left" ></ li >
< li class = "wow bounceInRight right" ></ li >
< li class = "wow bounceInLeft left" ></ li >
< li class = "wow bounceInRight right" ></ li >
< li class = "wow bounceInLeft left" ></ li >
< li class = "wow bounceInRight right" ></ li >
< li class = "wow bounceInLeft left" ></ li >
< li class = "wow bounceInRight right" ></ li >
< li class = "wow bounceInLeft left" ></ li >
< li class = "wow bounceInRight right" ></ li >
< li class = "wow bounceInLeft left" ></ li >
</ ul >
< script src = "wow/wow.js" ></ script >
< script >
new WOW () .init ()
</ script >
</ body >
八、wow动画的配置
wow元素的标签属性:
data-wow-duration 动画持续时间,以秒/s为单位
data-wow-delay动画延时时间,以秒/s为单位
data-wow-iteration动画播放次数,值是纯数字,infinite表示循环播放
data-wow-offset 元素顶部偏离可视区(容器)底部动画出现的距离(用于设置动画在页面的出场位置)
复制 < ul class = "box" >
< li class = "wow bounceInLeft left" ></ li >
< li class = "wow bounceInRight right" ></ li >
< li class = "wow bounceInLeft left" ></ li >
< li class = "wow bounceInRight right" data-wow-duration = "4s" >持续</ li >
< li class = "wow bounceInLeft left" ></ li >
< li class = "wow bounceInRight right" ></ li >
< li class = "wow bounceInLeft left" ></ li >
< li class = "wow bounceInRight right " ></ li >
< li class = "wow bounceInLeft left" data-wow-delay = "5s" >延迟</ li >
< li class = "wow bounceInRight right" ></ li >
< li class = "wow bounceInLeft left" ></ li >
< li class = "wow bounceInRight right" ></ li >
< li class = "wow bounceInLeft left " data-wow-offset = “300” >offset</ li >
< li class = "wow bounceInRight right" ></ li >
< li class = "wow bounceInLeft left" data-wow-iteration = "10" data-wow-duration = ".2s" >次数</ li >
< li class = "wow bounceInRight right" ></ li >
< li class = "wow bounceInLeft left" ></ li >
< li class = "wow bounceInRight right" ></ li >
< li class = "wow bounceInLeft left" ></ li >
< li class = "wow bounceInRight right" ></ li >
</ ul >
< script src = "wow/wow.js" ></ script >
< script >
new WOW ({
boxClass : 'wow' , //动画元素的CSS类 (默认类名 wow)
animateClass : 'animated' , //动画CSS类 (默认类名 animated)
offset : 0 , //距离可视区域多少开始执行动画(默认值 0)
mobile : true , //是否在移动设备上执行动画(默认值 true)
}) .init ()
</ script >
带参数的WOW对象:
复制 var wow = new WOW ({
boxClass : 'wow' , //动画元素的CSS类 (默认类名 wow)
animateClass : 'animated' , //动画CSS类 (默认类名 animated)
offset : 0 , //距离可视区域多少开始执行动画(默认值 0)
mobile : true , //是否在移动设备上执行动画(默认值 true)
});
wow .init ();
九、完成oppo项目
项目地址:http://codesohigh.com/oppo/
效果图参考: