GULP使用指南（二）常用的API

See_you
464 阅读4分钟

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

gulp 常用的 API

  • 我们先要学习一些 gulp 常用的 API
  • 因为我们就是要使用这些 API 去 gulpfile.js 文件里面进行打包的配置
  • 这些 API 就是我们安装完毕项目依赖以后得到的能力

1. gulp.task()

  • 这个方法是创建任务使用的

  • 我们的配置文件里面其实就是在书写一个一个的任务

  • 写好以后通过在命令行执行这些任务来完成

  • 语法：

    // gulp.task('任务名称'， function () {})

// 创建一个打包 html 文件的任务
gulp.task('heml', function () {
    // 书写打包 html 文件的操作
})
    • 将来当我们执行 html 这个任务的时候， 就可以把 html 文件打包了

2. gulp.src()

  • 用来找到源文件使用的

  • 也就是找到我们要打包的文件

  • 语法：

    // gulp.src('文件路径')

// 找到要打包的 html 文件
gulp.src('./src/pages/*.html')
    • 上面哪个路径就是找到 src 文件夹下的 pages 文件夹下的所有后缀为 .html 的文件

3. gulp.pipe()

  • 是用来帮我们做事的方法

  • 我们也叫做管道函数

  • 也就是在管道函数里面帮我们来压缩 html 文件

  • 语法：

    // gulp.pipe(你要做的事情)

// 执行 压缩 html 文件的事情
gulp.pipe(htmlmin())
    • 上面的代码一执行， 就会把 html 文件给压缩了

4. gulp.dest()

  • 是用来写入文件的， 也就是把我们打包好的文件写入到哪一个目录下

  • 语法：

    // gulp.dest('要写入文件的目录')

// 把打包好的 html 文件写入 dist 文件夹里面
gulp.dest('./dist/pages')

5. gulp.watch()

  • 用来监控文件的

  • 一旦被监控的文件发生变化， 那么就会执行你指定好的任务

  • 语法：

    // gulp.watch('你要监控的文件目录', 你要指定的任务名称)

// 当 pages 里面的 html 文件发生变化的时候， 就执行 html 任务
gulp.watch('./src/pages/*.html', html)
    • 当 pages 里面的任意一个 html 文件发生改变的时候， 就会自动执行 html 这个任务再次打包

6. gulp.series()

  • 用来逐个执行任务的

  • 也就是可以传递多个任务名称， 会在上一个任务完成之后执行下一个任务

  • 语法:

    // gulp.series(任务1， 任务2， ...)

// 逐个执行多个任务
gulp.series(html, css, js)
    • 他就会先执行准备好的 html 任务， 完毕后执行 css 任务， 完毕后执行 js 任务

7. gulp.parallel()

  • 用来并行执行任务的

  • 也可以传递多个任务名称， 会同时开始执行

  • 语法：

    // gulp.parallel(任务1， 任务2， ...)

// 同步执行多个任务
gulp.parallel(html, css, js)
    • 他就会把准备好的 html / css / js 三个任务同时开始执行

gulp 的配置

  • 这个时候我们就可以去 gulpfile.js 里面进行配置了
  • 制作我们一个一个的任务， 然后让 gulp 工具来帮我们打包了

创建一个打包 css 的任务

  • 最简单的就是要把 css 文件里面的空格去掉

  • 我们不能自己一个一个的去删除， 也不能自己写一个正则去替换

    • 因为一个是太麻烦了， 一个是我们自己也不好写这个正则

  • 所以我们就需要一个第三方的依赖来帮我们完成

  • 这个依赖直接在项目里面下载就好了

    • $ npm install --save-dev gulp-cssmin

  • 接下来我们开始进行配置

    • 在这里我们写一个 gulp 3.x.x 的配置
    • 在写一个 gulp 4.x.x 的配置
    • 因为两个版本的配置是不一样的，所以我们两个都学习一下
    • 至于你使用的时候， 就使用一个就好了， 由你的 gulp 的版本决定

  • 我们这里只是以 css 为例做一个示范

    • 其他的任务是一样的， 只是使用的第三方包不一样

gulp 3.x.x

// gulpfile.js

// 1. 引入 gulp 依赖
const gulp = require('gulp')

// 2. 引入 gulp-cssmin 依赖
const cssmin = require('gulp-cssmin')

// 创建一个打包 css 的任务
gulp.task('css', function () {
    return gulp.src('./src/css/*.css')           // 找到要压缩的文件
    		   .pipe(cssmin())					 // 进行压缩
    		   .pipe(gulp.dest('./dist/css'))    // 把压缩的结果写入 dist 目录
})
  • 这样一个任务就写完了， 我们就去命令行执行一下这个任务就可以了
  • $ gulp css
  • 稍等一会， 就会把 src/css/*.css 文件全部打包了， 放在 dist/css 这个目录下面

gulp 4.x.x

  • gulp4 里面不需要 task 创建任务了， 直接写成一个函数就可以了
// gulpfile.js

// 1. 引入 gulp 依赖
const gulp = require('gulp')

// 2. 引入 gulp-cssmin 依赖
const cssmin = require('gulp-cssmin')

// 一个打包 css 文件的处理函数
const cssHandler = () => {
    return gulp.src('./src/css/*.css')           // 找到要压缩的 css 文件
    		   .pipe(cssmin())					 // 进行压缩
    		   .pipe(gulp.dest('./dist/css'))    // 把压缩的结果写入 dist 目录
}

// 因为是一个函数， 不是一个任务， 我们需要导出才能使用
module.exports.css = cssHandler
  • 然后就可以去命令行执行一个叫做 css 的任务了
  • $ gulp css

创建一个监控的任务

  • 我们创建一个监控文件的文件
  • 当文件改变的时候， 直接触发任务重新打包
  • 我们也是分成 gulp 3.x.x 和 gulp 4.x.x 来进行示例书写

gulp 3.x.x

gulp.task('watch', function () {
    gulp.watch('./src/css/*.css', gulp.series('css'))
})
  • 当你执行了这个 watch 任务以后
  • 那么只要 ./src/css/*.css 所有的 css 文件发生改变， 就会重新去执行 css 这个任务

gulp 4.x.x

  • gulp4 里面还是使用 函数的形式来书写
const watchHandler = () => {
    gulp.watch('./src/css/*.css', css)
}

// 导出这个任务
module.exports.watch = watchHandler
avatar
文章
阅读
粉丝