Gulp4的基本使用

Posted 前端学堂

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Gulp4的基本使用相关的知识,希望对你有一定的参考价值。

基本功能

  • 复制静态资源

  • 打包Less(自动CSS前缀, 转换为小程序可用的wxss样式)

  • 打包javascript(Babel转换代码,压缩及生成sourcemap)

基本介绍

gulp的特点

1. 灵活

使用JavaScript配置你的gulpfile,可以使用您自己的代码或链接的单一用途插件编写任务,也可以随意组合多个任务,以提高速度和准确性。

2. 高效

通过使用gulp流,可以在将任何内容写入磁盘之前对内存中的文件进行转换,减少磁盘写入次数,从而极大地加快了构建过程。

安装gulp

  • 如果你需要在命令行中使用gulp,则需要全局安装gulp-cli,运行 yarn global add gulp-cli 或npm install -g gulp-cli

  • 如果你只需要在scripts中使用gulp,则只需要安装gulp即可,运行yarn add -D gulp 或 npm install -D gulp

创建一个gulpfile文件

在项目的根目录下创建一个名为gulpfile.js的文本文件(当然,这个文件可以存在于任何目录中,只需要在使用时通过 gulp --gulpfile filepath指定其路径即可, 本文中默认gulp配置文件存在于项目根目录下的build/gulp.config.js中),并在文件中输入以下内容:

const defaultTask = async () => {
console.log('gulp default task')
}

exports.default = defaultTask
  • 如果你安装的是gulp-cli,则在命令行中运行gulp就即可,此时控制台输出相应的字符串gulp default task

  • 如果你安装的是gulp,则需要在package.json中添加scripts命令,如: "start": "gulp --gulpfile build/gulp.config.js",然后在控制台运行yarn run start即可。

复制静态资源

在gulp.config.js中添加如果代码, 即可将src/static中的静态资源文件复制到dist/static目录中


const taskCopyStatic = () => {
return gulp.src('./src/static/**/*.*')
.pipe(gulp.dest('./dist/static'))
}

const taskWatch = () => {
gulp.watch('./src/static/**/*.*', gulp.series(taskCopyStatic))
}

exports.default = gulp.parallel(taskCopyStatic, taskWatch)

打包Less

1. 安装依赖

yarn add -D gulp-less gulp-postcss gulp-cssnano autoprefixer gulp-rename

2. 添加Less任务

const gulp = require('gulp')
const less = require('gulp-less')
const postcss = require('gulp-postcss')
const cssnano = require('gulp-cssnano')
const autoprefixer = require('autoprefixer')

const taskCopyStatic = () => {
return gulp.src('./src/static/**/*.*')
.pipe(gulp.dest('./dist/static'))
}

const taskLess = () => {
return gulp.src(['./src/**/*.less', '!./src/styles/var.less'])
.pipe(less())
.on('error', ({ message }) => {
throw new Error(message)
})
.pipe(postcss([autoprefixer(['ios >= 8', 'android >= 4.1'])]))
.pipe(cssnano({
zindex: false,
autoprefixer: false,
discardComments: { removeAll: true },
svg: false
}))
// 如果是在小程序中使用, 则需要将后缀名改为'wxss'并引入gulp-rename
// const rename = require('gulp-rename')
// .pipe(rename((path) => {
// path.extname = '.wxss'
// return path
// }))
.pipe(gulp.dest('dist'))
}

const taskWatch = () => {
gulp.watch('./src/**/*.less', gulp.series(taskLess))
gulp.watch('./src/static/**/*.*', gulp.series(taskCopyStatic))
}

exports.default = gulp.parallel(taskCopyStatic, taskLess, taskWatch)

3. 运行命令 yarn run gulp, 这样src目录下的Less文件就被打包到了dist/styles目录中了.

但是需要注意的是, gulp无法打包Less中的依赖资源(如字体, 图片等)

打包JavaScript

使用babel

  • 安装babel yarn add -D gulp-babel @babel/core @babel/preset-env

  • 添加JS任务

const taskJS = () => {
return gulp.src('../src/**/*.js')
.pipe(babel({
presets: ['@babel/preset-env']
}))
.pipe(gulp.dest('../dist'))
}
  • 在src/js目录下index.js文件, 并写入以下代码, 重新运行 yarn run start, 即可看到js已经被成功打包到dist/js目录中。

class Animal {
constructor(name) {
this.name = name
}

static sleep() {
console.log(`${this.name} is sleeping`)
}

eat() {
console.log(`${this.name} is eating`)
}
}

class Cat extends Animal {
constructor(name) {
super(name)
}
}

const cat = new Cat('hellokitty')

生成sourcemap

  1. 安装依赖yarn add -D gulp-sourcemaps

  2. 将JS任务更改为如下

const taskJS = () => {
return gulp.src('../src/**/*.js')
.pipe(sourcemaps.init())
.pipe(babel({
presets: ['@babel/preset-env']
}))
.pipe(sourcemaps.write())
// 如果需要将sourcemap分离到单独的文件中,则需要指定sourcemap文件路径
// .pipe(sourcemaps.write('sourcemap path'))
.pipe(gulp.dest('../dist'))
}


回复gulp4获取源码 


及时获取更新,了解更多动态,请关注 https://www.gogoing.site


以上是关于Gulp4的基本使用的主要内容,如果未能解决你的问题,请参考以下文章

9012教你如何使用gulp4开发项目脚手架

Glob观看多个文件,处理一个

前端构建之谈:Gulp3升级到Gulp4?

Gulp4.0入门和实战

gulp4.0.2使用实例

gulp4.0 存在的错误信息 The following tasks did not complete: default,Did you forget to signal async complet