Gulp入门与项目实战

一、Gulp入门

dependencies跟devDependencies的区别：

dependencies是依赖，项目上线时，这个依赖会一起放到服务器上 jquery $()

devDependencies是专指开发过程中使用的依赖，只会在本地起作用 less sass

$ npm i [email protected] --save-dev
等同于==> $ npm i [email protected] -D

$ npm i [email protected] --save
等同于==> $ npm i [email protected] -S
等同于==> $ npm i [email protected]

$ npm install cnpm -g --registry=https://registry.npm.taobao.org
安装淘宝镜像，安装到全局  -g ==>  --global  

npm 的全局安装路径
C:\Users\EDZ\AppData\Roaming\npm

1、gulp安装

$ npm install [email protected]  -g      //  **使用npm 安装gulp     -g 表示全局安装，没有-g表示本地安装**
$ npm install [email protected] 
$ gulp -v      查看gulp版本
$ npm init -y			npm初始化，生成package.json

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

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

gulpfile.js文件
src目录

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

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

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

$ npm install --save-dev  [email protected]       //在根目录下执行（下载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就可以看到样式了。

压缩css

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

$ npm install --save-dev [email protected]     //在根目录下执行（下载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 [email protected]       //在根目录下执行（下载js合并插件） 2.6.1

$ npm install --save-dev [email protected]       //在根目录下执行（下载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 [email protected] 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 [email protected]   //在根目录下执行（下载压缩图片的插件，最好用 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 [email protected]   //安装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: 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>

四、静态登录框动效添加

参考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: 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>

七、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>

八、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/

效果图参考：

上一页Gulp前端自动化下一页更多学习资料

最后更新于3年前

这有帮助吗？