gulp使用介绍及常见问题

40次阅读

共计 3446 个字符,预计需要花费 9 分钟才能阅读完成。

gulp 使用
有时间的话还是多看看开发文档,gulp API 文档,这里简单介绍一下。gulp.js 是一个前端构建工具,上手非常容易。适合简单原生 JavaScript 项目压缩处理。
1. gulp 安装
首先确定电脑已装 node 环境。然后以全局方式安装 gulp:npm install -g gulp
全局安装完 gulp 后,还需要在每个要使用 gulp 的项目中都单独安装一次。把目录切换到你的项目文件夹中,然后在命令行中执行:npm install gulp 或 npm install –save-dev gulp
2. 开始使用 gulp
此处省去 gulp 各种插件的安装。简单介绍一下 js、html、css、images 压缩方法。使用 gulp,仅需知道 4 个 API 即可:gulp.task(),gulp.src(),gulp.dest(),gulp.watch() 这里推荐看这篇文章,介绍的很详细前端构建工具 gulpjs 的使用介绍及技巧
直接上例子:
‘use strict’;

var gulp = require(‘gulp’);
var imagemin = require(‘gulp-imagemin’); // 图片压缩
var uglify = require(“gulp-uglify”); // js 压缩
var babel = require(“gulp-babel”); // babel
var minifyCss = require(“gulp-minify-css”); // css 文件压缩
var minifyHtml = require(“gulp-minify-html”); // html 文件压缩
var clean = require(‘gulp-clean’);

// js 压缩
gulp.task(‘minify-cas_login-js’, async function () {
await gulp.src(‘src/cas-login/cas.js’)
.pipe(babel())
.pipe(uglify())
.pipe(gulp.dest(‘dist/cas-login’));
});

// js 复制
gulp.task(‘copy-cas_login-js’, async function () {
await gulp.src(‘src/cas-login/*.min.js’)
.pipe(gulp.dest(‘dist/cas-login’));
});

// css 压缩
gulp.task(‘minify-cas_login-css’, async function () {
await gulp.src(‘src/cas-login/*.css’) // 要压缩的 css 文件
.pipe(minifyCss()) // 压缩 css
.pipe(gulp.dest(‘dist/cas-login’));
});

// html 压缩
gulp.task(‘minify-cas_login-html’, async function () {
await gulp.src(‘src/cas-login/*.html’) // 要压缩的 html 文件
.pipe(minifyHtml()) // 压缩
.pipe(gulp.dest(‘dist/cas-login’));
});

// 图片压缩
gulp.task(‘minify-cas_login-images’, async function () {
await gulp.src(‘src/cas-login/images/*’)
.pipe(imagemin())
.pipe(gulp.dest(‘dist/cas-login/images’));
});

// Clean existed build
gulp.task(‘clean-cas_login’, async function () {
await gulp.src(
[
‘dist/cas-login/*’
])
.pipe(clean({force: true}));
});

// Build cas-login
gulp.task(‘login-build’, gulp.series(‘clean-cas_login’, gulp.parallel(‘minify-cas_login-js’, ‘minify-cas_login-css’, ‘minify-cas_login-html’, ‘minify-cas_login-images’), done => {
done();
}));

这里重点介绍常见问题。
问题一:gulp: Did you forget to signal async completion? 控制台打出如下提示:The following tasks did not complete: testGulpDid you forget to signal async completion?
解决办法:使用 async 和 await。方法一:
const gulp = require(‘gulp’);
gulp.task(‘testGulp’, async() => {
await console.log(‘Hello World!’);
});
方法二:官方方法向 task 的函数里传入一个名叫 done 的回调函数,以结束 task
gulp.task(‘testGulp’, done => {
console.log(‘Hello World!’);
done();
});
问题二:AssertionError: Task function must be specified。出现这个问题,主要是版本造成的,gulp 3 和 gulp 4 运行方式是不一样的,所以会出现错误。Gulp3,如果有一个任务 A,B 和 C 的列表,你想在一个序列中运行(确保 A 在 B 开始之前完成,而 B 在 C 开始之前完成),代码如下:
gulp.task(‘a’, function () {
// Do something.
});
gulp.task(‘b’, [‘a’], function () {
// Do some stuff.
});
gulp.task(‘c’, [‘b’], function () {
// Do some more stuff.
});

Gulp 4 中,你不能再这样做了,会得到以下错误:
assert.js:85
throw new assert.AssertionError({
^
AssertionError: Task function must be specified
at Gulp.set [as _setTask] (/home/hope/web/node_modules/undertaker/lib/set-task.js:10:3)
at Gulp.task (/home/hope/web/node_modules/undertaker/lib/task.js:13:8)
at Object.<anonymous> (/home/hope/web/gulpfile.js:31:6)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)

需要使用 gulp.series 和 gulp.parallel,因为 gulp 任务现在只有两个参数。gulp.series:按照顺序执行 gulp.paralle:可以并行计算
gulp.task(‘my-tasks’, gulp.series(‘a’, ‘b’, ‘c’, function() {
// Do something after a, b, and c are finished.
}));

gulp.task(‘build’, gulp.parallel(‘styles’, ‘scripts’, ‘images’, function () {
// Build the website.
}));

如果 b,c 任务依赖 a 任务,这样
gulp.task(‘my-tasks’, gulp.series(‘a’, gulp.parallel(‘b’, ‘c’), function() {
// Do something after a, b, and c are finished.
}));

多任务进行会遇到的问题主要就是这个

正文完
 0