# Gulp使用

# 一、简介

WARNING

gulp是基于Nodejs的自动任务运行器,它能自动化地完成前端代码的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。

使用第三方插件(重点)

npm install <package> -D  // 下载并安装插件

通过 require() 引入文件
1
2
3

# 二、编写第一个任务

const gulp = require('gulp')

gulp.task('hello', () => {
    console.log('hello world')
})
1
2
3
4
5

# 三、整理 html 文件

TIP

gulp.src() 找到源文件路径

gulp.dest() 找到目的文件路径

pipe() 可以理解为程序的运行管道

如果设置的这个目的文件路径不存在,会自动创建

const gulp = require('gulp')

gulp.task('copy-html', () => {
    return gulp
        .src('index.html')
        .pipe(gulp.dest('dist/'))
        .pipe(connect.reload())
})
1
2
3
4
5
6
7
8

# 四、拷贝静态文件

const gulp = require('gulp')

gulp.task('images', () => {
    // return gulp.src("img/*.jpg").pipe(gulp.dest("dist/images"));
    // return gulp.src("img/*.{jpg,png}").pipe(gulp.dest("dist/images"));
    // return gulp.src("img/*/*").pipe(gulp.dest("dist/images"));
    return gulp
        .src('img/**/*')
        .pipe(gulp.dest('dist/images'))
        .pipe(connect.reload())
})
1
2
3
4
5
6
7
8
9
10
11

# 五、拷贝多个文件到一个目录中

const gulp = require('gulp')

gulp.task('data', () => {
    return gulp
        .src(['json/*.json', 'xml/*.xml', '!xml/04.xml'])
        .pipe(gulp.dest('dist/data'))
        .pipe(connect.reload())
})
1
2
3
4
5
6
7
8

# 六、一次性执行多个任务的操作

const gulp = require('gulp')

gulp.task('build', ['copy-html', 'images', 'data'], function() {
    console.log('任务执行完毕')
})
1
2
3
4
5

# 七、处理 CSS 文件

const gulp = require('gulp')

// less预编译并自动生成CSS文件
const less = require('gulp-less')

// 自动压缩CSS文件
const minifyCSS = require('gulp-minify-css')

// 自动重命名文件
const rename = require('gulp-rename')

gulp.task('less', () => {
    return gulp
        .src('stylesheet/index.scss')
        .pipe(less())
        .pipe(gulp.dest('dist/css'))
        .pipe(minifyCSS())
        .pipe(rename('index.min.css'))
        .pipe(gulp.dest('dist/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

# 八、处理 JS 文件

const gulp = require('gulp')

// 将文件的代码自动合并至指定文件中
const concat = require('gulp-concat')

// 自动压缩JS文件
const uglify = require('gulp-uglify')

// 自动重命名文件
const rename = require('gulp-rename')

gulp.task('scripts', () => {
    return gulp
        .src('javascript/*.js')
        .pipe(concat('index.js'))
        .pipe(gulp.dest('dist/js'))
        .pipe(uglify())
        .pipe(rename('index.min.js'))
        .pipe(gulp.dest('dist/js'))
        .pipe(connect.reload())
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 九、监听处理

const gulp = require('gulp')

// 监听,如果监听到文件有改变,会自动去执行对应的任务,更新数据
gulp.task('watch', () => {
    /**
     * 第一个参数:监听文件的路径,可以是一个文件也可以是一个文件夹
     * 第二个参数:任务名称
     */
    gulp.watch('index.html', ['copy-html'])
    gulp.watch('img/*_/_', ['images'])
    gulp.watch(['json/*.json', 'xml/*.xml', '!xml/04.xml'], ['data'])
    gulp.watch('stylesheet/index.scss', ['sass'])
    gulp.watch('javascript/*.js', ['scripts'])
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 十、热更新与自动刷新

TIP

当任务名为 default 的时候,可以直接在控制台通过 gulp 命令启动

const gulp = require('gulp')

const connect = require('gulp-connect')
gulp.task('server', () => {
    connect.server({
        root: 'dist', //设置根目录
        port: 8888, // 监听端口
        livereload: true //启动实时刷新功能
    })
})

gulp.task('default', ['watch', 'server'])
1
2
3
4
5
6
7
8
9
10
11
12

# Gulp 实现前端自动化部署

对于现在这个 2020 年即将结束的时代,熟悉 Gulp 之后发现它好像没有什么替代性的作用,但是它的最大特点就在 插件支持

目测是 3000 多个插件,也就是说它拥有了 3000 多个自动化功能可以被使用,同时自己也可以根据需求自行开发插件

这篇文章主要说说一个叫 gulp-ssh 的插件,它同时拥有 SSHFTPS 的功能,此插件主要实现对服务器文件的远程操作

# 安装

npm install gulp -D // 对项目文件夹进行安装

npm install gulp-cli -g // 安装gulp全局命令

npm install gulp-ssh -D // 安装包为开发依赖
1
2
3
4
5

# 使用示例

TIP

当任务名为 default 的时候,可以直接在控制台通过 gulp 命令启动,无需跟任务名

这里本人只写了上传文件的任务,删除的任务可以看 文档 (opens new window) 按需添加

const gulp = require('gulp')

// 引入插件
const GulpSSH = require('gulp-ssh')

/**
 * 配置SSH插件
 * 用于连接云服务器
 */
const config = {
    host: <IP地址>,
    port: 22, // 默认端口号,因为SSH协议默认22端口
    username: '***', // 服务器账号,一般为root
    password: '********' // 服务器密码
}
const gulpSSH = new GulpSSH({
    ignoreErrors: false, // 执行命令时忽略错误
    sshConfig: config
})

// 将本地文件上传到远程服务器
gulp.task('default', () => {
    return gulp
            .src('./docs/.vuepress/dist/**' /* 本地目录 */, { buffer: false })
            .pipe(gulpSSH.dest('/www/wwwroot/123mtr.top/' /* 服务器目录 */ ))
})
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