背景
在最近的项目开发中，有一个部署前端包的场景，一直需要人工进行命令行操作。久而久之，就觉得这部分的工作很重复，思考有没有办法将部署地操作自动化、脚本化。
网上查了一下资料，前端做自动化最有名的是gulp，因此这样，跟着gulp官方文档，学了起来。
gulp 任务
const gulp = require('gulp')
/** callback */
gulp.task('hello_one', done => {
console.log('hello')
done()
})
/** 返回stream */
gulp.task('hello_two', () => {
return gulp.src('./test.json');
})
/** 返回promise */
gulp.task('hello_three', () => {
return Promise.resolve(1);
})
/** 返回event emitter */
const { EventEmitter } = require('events')
gulp.task('hello_four', () => {
const emitter = new EventEmitter();
setTimeout(()=> emitter.emit('finish'), 200);
return emitter;
}
/** 返回child process */
const { exec } = require('child_process');
gulp.task('hello_five', () => {
return exec('date');
}
/** 返回 observable */
const { Observable } = require('rxjs');
gulp.task('hello_six', () => {
return Observable.of(1, 2, 3);
})
/** 使用 async/await */
gulp.task('hello_six', async () => {
await Promise.resolve('some result');
})
gulp.js v4 版本已经不支持同步任务，声明的任务都需要是异步任务
正是因为
gulp.js - 基于流(stream)的自动化构建工具
所以
每个 gulp 任务（task）都是一个异步的 JavaScript 函数，此函数是一个可以接收 callback 作为参数的函数，或者是一个返回 stream、promise、event emitter、child process 或 observable (后面会详细讲解) 类型值的函数。
任务（tasks）可以是 public（公开） 或 private（私有） 类型的。
- 公开任务（Public tasks） 从 gulpfile 中被导出（export），可以通过 gulp 命令直接调用。
- 私有任务（Private tasks） 被设计为在内部使用，通常作为 series() 或 parallel() 组合的组成部分。
gulp 任务的串行/并行执行
const gulp = require('gulp')
gulp.task('hello', done => {
console.log('hello')
done()
})
gulp.task('world', done => {
console.log('world')
done()
})
# 串行执行
gulp.series('series', ['hello', 'world']);
# 并行执行
gulp.parallel('parallel', ['hello', 'world']);
gulp 模块化
将gulpfile.jsJS 文件，修改为gulpfile.js文件夹，文件夹下创建index.js，其他任务可声明在gulpfile.js文件夹下，通过import或者require引入即可实现模块化
执行以下命令，能够正常输出即可
gulp --tasks
webpack 和 gulp 的区别
| Webpack | Gulp |
|---|---|
| 前端模块打包器 | 自动化构建工具 |
| webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 | gulp 基于 node 强大的流(stream)能力，gulp 在构建过程中并不把文件立即写入磁盘，从而提高了构建速度。 |
实践
问题：打包 Less 为 Css 并进行丑化压缩，生成一个 Css 文件
将问题拆分为具体的步骤点
- 打包 Less 为 Css
- 压缩生成的 Css 文件
- 将所有的生成的 Css 文件集成一个 Css 文件
接下来，我们一步一步地完成它
const gulp = require('gulp');
/** 第一步，读取文件，写文件到磁盘 */
gulp.task('transformLess', () => {
gulp.src('./page.less')
.dest('./page.css')
})
/** 第二步，引入gulp-less转换less */
const less = require('gulp-less')
gulp.task('transformLess', () => {
gulp.src('./less/**/*.less')
.pipe(less())
.dest('./css')
})
/** 第三步，引入gulp-clean-css压缩css */
const less = require('gulp-less')
const cleanCSS = require('gulp-clean-css');
gulp.task('transformLess', () => {
gulp.src('./less/**/*.less')
.pipe(less())
.pipe(cleanCSS())
.dest('./css')
})
/** 第四步，引入gulp-concat-css合并所有的css文件 */
const less = require('gulp-less')
const cleanCSS = require('gulp-clean-css');
const concatCss = require('gulp-concat-css');
gulp.task('transformLess', () => {
gulp.src('./less/**/*.less')
.pipe(less())
.pipe(concatCss())
.pipe(cleanCSS())
.dest('./css')
})
总结
gulp 是一个专业的自动化构建工具，在我们遇到重复的工作的时候，可以思考一下，我们能否使用 gulp 将重复的工作自动化？帮助我们的工作提效
最后，好好学习不会差，我是970，我们一起进步😎
