Gulp简单介绍

Posted 2022-01-04 caominjie

Gulp

介绍

自动化构建工具，可以通过gulp对我们的代码进行全自动的编译。可以实现代码的自动压缩、编译、实时监测等功能。

特点

1. 任务化
2. 基于流(数据流io:input/output)操作
   1. 整个操作都是基于数据流进行操作
   2. 具备属于gulp的内存，所有的操作全部在gulp的内存当中
   3. 对应着输入流和输出流。会将数据通过src方法输入，通过dest方法输出。
3. 简易的API

官网网站:https://gulpjs.com/

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

插件中心:https://gulpjs.com/plugins/

安装

下面我们来通过npm来安装一下gulp。

#初始化项目package.json
npm init

#全局安装gulp-cli
npm install gulp-cli -g

#局部安装gulp
npm install [email protected] --save-dev

全局安装也可以使用 npm install --global gulp，但是却不能够随意的在项目目录切换gulp版本，不够灵活，所以选择使用gulp-cli。

安装完成之后，在项目目录下开启cmd，输入gulp，出现下面的提示则表示安装成功。

[22:40:15] No gulpfile found

使用

一般情况下，使用gulp,主要有两步操作，第一步，注册事件，第二步执行默认事件。

// 注册
gulp.task('事件名',function()
    
)

// 默认事件
gulp.task('default',['参数'])

gulp演示配置

下面为了讲解gulp的基本功能，将目录结构模拟成项目的目录结构，大致如下:

// src 目录项目的根目录
src
    --| dist   编译之后的代码所在目录
        --|--| js  编译之后的js
        --|--| css 编译之后的css
    --| css    待编译的css
        --|--| a.css 用于测试的css文件
        --|--| b.css 用于测试的css文件
    --| js     待编译的js
        --|--| 01.js 用于测试的js文件
        --|--| 02.js 用于测试的js文件
    --| less   待编译的less文件
        --|--| c.less 用于测试的less文件
    index.html 首页文件
    gulpfile.js gulp配置文件

gulpfile.js文件的创建

首先，我们先来创建一个gulpfile.js文件，因为gulp执行之后会默认的在当前目录查找这个文件。

文件创建好之后，现在文件中引入gulp，并且先设置好default事件。

var gulp = require("gulp");


gulp.task("default",[]);

JS文件的处理

首先，我们先来学习如何压缩js代码。压缩js代码我们需要使用三个插件，先通过下面的命令进行安装。

npm install gulp-concat gulp-uglify gulp-rename --save-dev

安装完成后，我们可以在package.json文件中检查一下：

  "name": "src",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": 
    "test": "echo \"Error: no test specified\" && exit 1"
  ,
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": 
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-rename": "^1.4.0",
    "gulp-uglify": "^3.0.2"
  

在上面的文件代码中，已经看到，我们新安装的插件已经成功的安装。

为了避免安装失败导致的报错，尽可能的在每次安装插件后都检查一下package.json文件，看一下是否插件被写入其中。

安装完成后，可以完成下面的代码：

var gulp = require("gulp");
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// 注册事件
gulp.task('js',function()
    return gulp.src("js/*.js")
        .pipe(concat("bundle.js"))
        .pipe(gulp.dest("dist/js/"))
        .pipe(uglify())
        .pipe(rename(suffix:".min"))
        .pipe(gulp.dest("dist/js/"))
)
// 默认事件
gulp.task("default",[]);

上面代码中，首先引入三个插件。

var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

然后注册一个js事件。

gulp.task('js',function()
    
)

在回调函数当中return返回数据。

gulp.task('js',function()
  return ....  
)

紧接着通过gulp的src方法来将需要编译的数据放入gulp内存中。

 return gulp.src("js/*.js")

*.js表示在js目录下找到后缀名为.js的全部文件。

然后通过管道流的形式进行下列操作。

    .pipe(concat("bundle.js")) // 合并代码为bundle.js
     .pipe(gulp.dest("dist/js/")) // 将合并的文件输出查看一下
     .pipe(uglify()) // 将文件进行压缩
     .pipe(rename(suffix:".min")) // // suffix 后缀名 .min ，也可以不传入一个json，而是直接传入一个文件名，例如bundle.min.js
     .pipe(gulp.dest("dist/js/")) // // 将压缩的文件再次输出查看

完成代码后，在终端当中执行。

gulp js

既可以在dist/js目录查看到压缩之后的bundle.min.js文件。

less文件的处理

首先需要安装两个插件。

npm install gulp-less gulp-clean-css --save-dev

安装完成插件后执行下面的代码。

var gulp = require("gulp");
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
// 注册事件
gulp.task('js', function () 
    return gulp.src("js/*.js")
        .pipe(concat("bundle.js"))
        .pipe(gulp.dest("dist/js/"))
        .pipe(uglify())
        .pipe(rename(
            suffix: ".min"
        ))
        .pipe(gulp.dest("dist/js/"))
)

// 注册less编译事件
gulp.task('less', function () 
    return gulp.src("less/*.less")
        .pipe(less()) // 编译less文件 为css文件
        .pipe(gulp.dest("css/")) // 将转换文件输出查看 
)


// 默认事件
gulp.task("default", []);

上面代码中，首先引入插件。

var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");

注册事件。

gulp.task('less', function () 
    
)

将内容插入到gulp内存当中。

return gulp.src("less/*.less")

编译文件。

.pipe(less()) // 编译less文件 为css文件

输出到指定目录。

 .pipe(gulp.dest("dist/css")) // 将转换文件输出查看 

css文件的处理

处理css文件，不需要额外的下载其他的插件，直接运行即可。

var gulp = require("gulp");
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
// 注册事件
gulp.task('js', function () 
    return gulp.src("js/*.js")
        .pipe(concat("bundle.js"))
        .pipe(gulp.dest("dist/js/"))
        .pipe(uglify())
        .pipe(rename(
            suffix: ".min"
        ))
        .pipe(gulp.dest("dist/js/"))
)

// 注册less编译事件
gulp.task('less', function () 
    return gulp.src("less/*.less")
        .pipe(less()) // 编译less文件 为css文件
        .pipe(gulp.dest("css/")) // 将转换文件输出查看 
)

gulp.task('css',function()
    return gulp.src("css/*.css")
        .pipe(concat("build.css"))
        .pipe(cleanCss(compatibility:'ie8'))
        .pipe(rename(suffix:".min"))
        .pipe(gulp.dest("dist/css/"))

)
// 默认事件
gulp.task("default", []);

上述代码中，通过cleanCss方法进行代码压缩，并且传入参数compatibility，能够让代码的压缩适应ie8。

.pipe(cleanCss(compatibility:'ie8'))

异步任务的执行

下面在来说一下默认事件，也就是异步任务的执行，我们只需要将我们注册的事件传入默认事件的第二个参数数组当中即可。

// 默认事件
gulp.task("default", ['js','less','css']);

此时，我们需要思考一个问题，less转换成css文件后才能执行css的解析，也就是说css的编译是依赖less的，为了处理这个问题，可以在css事件中传入第二个参数。

gulp.task('css',['less'],function()
    return gulp.src("css/*.css")
        .pipe(concat("build.css"))
        .pipe(cleanCss(compatibility:'ie8'))
        .pipe(rename(suffix:".min"))
        .pipe(gulp.dest("dist/css/"))

)

这样，当我们在执行css之前就会先去等待less的编译完成。

下面执行gulp，就可以执行在cmd中输入gulp命令即可。

此时执行过程中，我们会发现执行的顺序其实是一个异步执行的顺序，如果我们想要采取同步顺序，只需要将每个事件中的return去掉即可。

半自动编译

想要实现半自动编译，我们需要下载一个插件。

npm install gulp-livereload --save-dev

安装完成后引入插件并且执行下面的代码：

var gulp = require("gulp");
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
var livereload = require("gulp-livereload");
// 注册事件
gulp.task('js', function () 
    return gulp.src("js/*.js")
        .pipe(concat("bundle.js"))
        .pipe(gulp.dest("dist/js/"))
        .pipe(uglify())
        .pipe(rename(
            suffix: ".min"
        ))
        .pipe(gulp.dest("dist/js/"))
        .pipe(livereload());// 实时监听
)

// 注册less编译事件
gulp.task('less', function () 
    return gulp.src("less/*.less")
        .pipe(less()) // 编译less文件 为css文件
        .pipe(gulp.dest("css/")) // 将转换文件输出查看 
        .pipe(livereload());// 实时监听
)

gulp.task('css',['less'],function()
    return gulp.src("css/*.css")
        .pipe(concat("build.css"))
        .pipe(cleanCss(compatibility:'ie8'))
        .pipe(rename(suffix:".min"))
        .pipe(gulp.dest("dist/css/"))
        .pipe(livereload());// 实时监听

)

// 注册半自动监听
gulp.task('watch',['default'],function()
    // 开启监听
    livereload.listen();
    // 确认监听的目标以及绑定相应的任务 
    gulp.watch('js/*.js',['js']);
    gulp.watch(['css/*.css','less/*.less'],['css'])
)
// 默认事件
gulp.task("default", ['js','less','css']);

上面代码中，半自动监听的事件需要注册，并且传入参数default。

gulp.task('watch',['default'],function()
    
)

然后在回调函数中开启监听。

livereload.listen();

并且确定监听的任务。

 gulp.watch('js/*.js',['js']);
 gulp.watch(['css/*.css','less/*.less'],['css'])

最后在所有的事件的最后都启用监听。

 .pipe(livereload());// 实时监听

之后，我们想要执行gulp，可以采用下面的命令。

gulp watch

这样只要我们一更改内容，那么就会自动编译。

全自动编译

首先我们来下载插件。

npm install gulp-connect --save-dev

插件安装完成后可以执行下面的代码。

var gulp = require("gulp");
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
var livereload = require("gulp-livereload");
var connect = require("gulp-connect")
// 注册事件
gulp.task('js', function () 
    return gulp.src("js/*.js")
        .pipe(concat("bundle.js"))
        .pipe(gulp.dest("dist/js/"))
        .pipe(uglify())
        .pipe(rename(
            suffix: ".min"
        ))
        .pipe(gulp.dest("dist/js/"))
        .pipe(livereload())// 实时监听
        .pipe(connect.reload())
)

// 注册less编译事件
gulp.task('less', function () 
    return gulp.src("less/*.less")
        .pipe(less()) // 编译less文件 为css文件
        .pipe(gulp.dest("css/")) // 将转换文件输出查看 
        .pipe(livereload())// 实时监听
        .pipe(connect.reload())
)

gulp.task('css',['less'],function()
    return gulp.src("css/*.css")
        .pipe(concat("build.css"))
        .pipe(cleanCss(compatibility:'ie8'))
        .pipe(rename(suffix:".min"))
        .pipe(gulp.dest("dist/css/"))
        .pipe(livereload())// 实时监听
        .pipe(connect.reload())

)

// 注册半自动监听
gulp.task('watch',['default'],function()
    // 开启监听
    livereload.listen();
    // 确认监听的目标以及绑定相应的任务 
    gulp.watch('js/*.js',['js']);
    gulp.watch(['css/*.css','less/*.less'],['css'])
)
// 全自动监听
gulp.task('server',['default'],function()
    // 配置服务器的选项
    // gulp-connect 会提供一个微型的服务器，执行之后会自动的读取所有的文件，然后提供一个服务器的地址，访问即可
    connect.server(
        root:"dist/",
        livereload:true,// 实时刷新
        port:5000 // 端口 
    )

    gulp.watch('js/*.js',['js']);
    gulp.watch(['css/*.css','less/*.less'],['css'])
)
// 默认事件
gulp.task("default", ['js','less','css']);

上面代码中，创建一个server事件。

gulp.task('server',['default'],function())

其中配置server的基础配置

connect.server(
        root:"dist/", // 服务器根目录
        livereload:true,// 实时刷新
        port:5000 // 端口 
    )

同时需要在每一个事件最后执行加载。

.pipe(connect.reload())

配置完成后可以在cmd中直接执行：

gulp server 

为了便于测试可以在dist目录下创建一个index.html，并且引入压缩之后的css和js文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/build.min.css">
    <script src="./js/bundle.min.js"></script>
</head>
<body>
    <div class="index1"></div>
</body>
</html>

打开浏览器，输入http://localhost:5000即可访问。

自动打开网页

可以下载插件open。

npm install open --save-dev

然后在最后加上open方法的调用，并且在其中传入访问的地址。

var gulp = require("gulp");
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
var livereload = require("gulp-livereload");
var connect = require("gulp-connect")
var open = require("open");
// 注册事件
gulp.task('js', function () 
    return gulp.src("js/*.js")
        .pipe(concat("bundle.js"))
        .pipe(gulp.dest("dist/js/"))
        .pipe(uglify())
        .pipe(rename(
            suffix: ".min"
        ))
        .pipe(gulp.dest("dist/js/"))
        .pipe(livereload())// 实时监听
        .pipe(connect.reload())
)

// 注册less编译事件
gulp.task('less', function () 
    return gulp.src("less/*.less")
        .pipe(less()) // 编译less文件 为css文件
        .pipe(gulp.dest("css/")) // 将转换文件输出查看 
        .pipe(livereload())// 实时监听
        .pipe(connect.reload())
)

gulp.task('css',['less'],function()
    return gulp.src("css/*.css")
        .pipe(concat("build.css"))
        .pipe(cleanCss(compatibility:'ie8'))
        .pipe(rename(suffix:".min"))
        .pipe(gulp.dest("dist/css/"))
        .pipe(livereload())// 实时监听
        .pipe(connect.reload())

)

// 注册半自动监听
gulp.task('watch',['default'],function()
    // 开启监听
    livereload.listen();
    // 确认监听的目标以及绑定相应的任务 
    gulp.watch('js/*.js',['js']);
    gulp.watch(['css/*.css','less/*.less'],['css'])
)
// 全自动监听
gulp.task('server',['default'],function()
    // 配置服务器的选项
    // gulp-connect 会提供一个微型的服务器，执行之后会自动的读取所有的文件，然后提供一个服务器的地址，访问即可
    connect.server(
        root:"dist/",
        livereload:true,// 实时刷新
        port:5000 // 端口 
    )

    gulp.watch('js/*.js',['js']);
    gulp.watch(['css/*.css','less/*.less'],['css'])
    // 设置访问路径 
    open("http://localhost:5000/");
)
// 默认事件
gulp.task("default", ['js','less','css']);

命令行输入gulp server即可。