# Gulp教学

# 一、Gulp

工程化、模块化、自动化 grunt gulp webpack

中文官网:https://www.gulpjs.com.cn/

Gulp (opens new window) 是一个基于流的自动化构建工具。除了可以管理任务和执行任务,还支持监听文件、读写文

。Gulp 被设计的非常简单,只通过下面5个方法就可以支持几乎所有构建场景:

  • 通过 gulp.task 注册一个任务;
  • 通过 gulp.src 读取文件;
  • 通过 gulp.dest 写入文件。
  • 通过 gulp.watch 监听文件变化;
  • 通过 gulp.run 执行任务;

Gulp 的优点:好用又不失灵活,既可以单独完成构建,也可以和其他工具搭配使用。

Gulp 的缺点:和Grunt 类似。集成度不高,要写很多配置后才可以用,无法做到开箱即用。

#

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
2
3
4
5
6
7
8
9
10
11
12

# 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
1
2
3
4

# 2、体验gulp:项目中使用gulp编译来文件(重点)

现在在刚才创建的gulpwolf项目中,新建以下几个新文件(夹),目录如下:

gulpfile.js文件
src目录
1
2

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'))
});
1
2
3
4
5
6
7
8
9
10

之后在项目目录下命令行窗口中执行 gulp myhtml 就能生成build和dist两个目录,里面是编译生成好的index.html

# 3、使用gulp编译less成css,并最终压缩css

  • 编译less

我们可以用上上面同样的方法来编译less文件成为css:

安装gulp-less插件: (直接复制以下命令去执行)

npm install --save-dev  gulp-less@4.0.1       //在根目录下执行(下载less编译插件) 4.0.1
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'))    //输出到指定目录
});
1
2
3
4
5
6
7
8

到src/index.html中引入输出目录'build/css'下的css文件

<link rel="stylesheet" href="css/index.css">
1

之后在项目目录下命令行窗口中执行 gulp myless, 打开build目录下的index.html就可以看到样式了。

  • 压缩css

安装gulp-cssmin: (直接复制以下命令去执行)

npm install --save-dev gulp-cssmin@0.2.0     //在根目录下执行(下载css压缩插件)  0.2.0
1

在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'))    //输出到指定目录
});
1
2
3
4
5
6
7
8

之后在项目目录下命令行窗口中执行 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
1
npm install --save-dev gulp-uglify@3.0.1       //在根目录下执行(下载js压缩插件)  3.0.1
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目录下
});
1
2
3
4
5
6
7
8
9
10

之后在项目目录下命令行窗口中执行 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)
1

代码:

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'))
})
1
2
3
4
5
6
7
8
9
10
11

# 5、压缩图片

把 src/image 下的 图片文件压缩到build 和 dist(添加压缩)目录下

安装gulp-concat和gulp-uglify (直接复制以下命令去执行)

cnpm install --save-dev gulp-imagemin@4.1.0   //在根目录下执行(下载压缩图片的插件,最好用cnpm)
1

在gulpfile.js中添加以下代码:

var imagemin = require('gulp-imagemin');

gulp.task('myimage', function() {

    gulp.src('src/images/*')  /*读取所有的图片文件*/
  			/*将读取所有的图片文件进行压缩 */
        .pipe( imagemin() )  
        .pipe( gulp.dest('build/images'))    /*再将读取压缩后的文件写到build目录(没有会自动新建)*/
});
1
2
3
4
5
6
7
8
9

之后在项目目录下命令行窗口中执行 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服务
1

在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']);
1
2
3
4
5
6
7
8
9
10
11

之后在项目目录下命令行窗口中执行 gulp , 在浏览器中访问http://localhost:8080/build/ (opens new window) 就可以看到我们的页面了。

# 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())     //当内容发生改变时, 重新加载。
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 二、Animate.css简介

animate.css 是一个来自国外的跨浏览器的 CSS3 动画库,它预设了多种动画效果,例如弹跳,抖动,闪烁,淡入淡出等多种css3动画效果可以直接调用。

官网(特效参考): https://daneden.github.io/animate.css/ (opens new window)

备用地址:https://animate.style/

源码下载地址:https://github.com/daneden/animate.css (opens new window)

兼容性:

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: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
        }
    </style>
    <link rel="stylesheet" href="animate/animate.css">
</head>
<body>
    <div class="animated bounceInDown"></div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 四、静态登录框动效添加

参考JQ文档:http://jquery.cuishifeng.cn/ (opens new window) ,查看addClass() 的使用

	$(".login").click(function () {
        $(".loginBox").addClass("animated bounce");
        setTimeout(function(){
            $(".loginBox").removeClass("animated bounce");
        }, 500);
    })
1
2
3
4
5
6

# 五、WOW.js简介

wow.js是做网页滚动动画的js框架,配合animate.css使用,可以在网页滚动的过程中释放animate.css动画效果

官网地址:http://mynameismatthieu.com/WOW/index.html

源码下载地址:https://github.com/matthieua/WOW (opens new window)

兼容性: 同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: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 七、wow的使用

尝试多个元素都使用上wow,可以看到进场动画效果

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            padding: 0;
            list-style: none;
        }
        .box{
            width: 500px;
            /*background: pink;*/
            margin: 0 auto;
            overflow: hidden;
        }
        li{
            width: 200px;
            height: 200px;
            background-color: #ccc;
            margin-bottom: 30px;
        }
        .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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

# 八、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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

带参数的WOW对象:

var wow = new WOW({
    boxClass:     'wow',             //动画元素的CSS类 (默认类名 wow)
    animateClass: 'animated',        //动画CSS类 (默认类名 animated)
    offset:       0,                 //距离可视区域多少开始执行动画(默认值 0)
    mobile:       true,              //是否在移动设备上执行动画(默认值 true)
});
wow.init();
1
2
3
4
5
6
7

# 九、完成oppo项目

项目地址:http://codesohigh.com/oppo/

效果图参考:

支付宝打赏 微信打赏
Last Updated: 12/16/2021, 5:56:10 PM