2

自从前端各种框架出来以后,很少用原生的js写项目了。最近做一个cas统一登录系统,涉及多重登录方式,一开始用vue写的,后来为了性能优化,用原生js重构了一遍,项目写完打包的时候用到了自动化构建工具gulp。重新捡起来,温故一下。

gulp使用

有时间的话还是多看看开发文档,gulp API文档,这里简单介绍一下。
gulp.js是一个前端构建工具,上手非常容易。适合简单原生JavaScript项目压缩处理。

1. gulp安装

首先确定电脑已装node环境。
然后以全局方式安装gulp:
npm install -g gulp

全局安装完gulp后,还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中,然后在命令行中执行:
npm install gulpnpm install --save-dev gulp

2. 开始使用gulp

此处省去gulp各种插件的安装。
简单介绍一下jshtmlcssimages压缩方法。
使用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: testGulp
Did 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.seriesgulp.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.
}));
 

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


AaronYuan
1.5k 声望57 粉丝

代码逻辑很重要


引用和评论

0 条评论