关于javascript:Gulp基本概念

简介

Gulp 基于 Node.js 的前端自动化构建工具

• 工作化
• 基于流（输出流和输入流）
• 异步执行工作
• 底层封装基于 Node 的读写模块

主要用途：

• css 解决：压缩，转码（比方主动增加兼容前缀）
• js 解决：压缩，转码（ES6 语法转 ES5，Typescript, Coffescript）
• html 解决：压缩，转码（格局转换，比方 pug 模板转.html）
• 动态文件解决（图片等等）

gulpfile.js

gulpfile.js 位于 gulp 我的项目的根目录，用于编写执行 gulp 工作的程序，应用 Javascript 编写，能够调用 Node 模块

gulp 每个工作都能够编写到一个独立的文件中，在 gulpfile.js 中通过 import 的形式引入，便于保护。

次要 API 介绍

API 文档：https://www.gulpjs.com.cn/docs/api/concepts/

gulp 提供一系列的 API 来构建和管制每个工作流程，上面介绍的是在 gulp 开发中次要用到的 API

gulp.src(path);

path 指定源文件的门路

作用：查找指定的指标源文件，读取文件到内存中，返回文件流、

示例：

• gulp.src('./a/b.html'); 指定某个文件
• gulp.src('./a/*.html'); 指定某个目录下的所有扩大名为.html
• gulp.src('./a/**'); 指定目录下的所有文件

gulp.dest(path);

指定输入文件目录，将通过解决之后的文件输入到该目录下

gulp.dest('./dist');

gulp.task();

创立一个基于流的 gulp 工作

gulp.task('[工作名]', function() {// 具体任务的业务逻辑});

gulp.watch(门路, 工作名)

监听文件扭转，执行工作

gulp.watch('./a/*.*' , 'html');

gulp.series(taskA, taskB)

一一执行多个工作，即 taskA 执行完了，再执行 taskB

function taskA() {// 工作 A}
function taskB() {// 工作 B}
gulp.series(taskA, taskB);

gulp.parallel(taskA, taskB)

并行执行多个工作，即 taskA 和 taskB 同时执行

function taskA() {// 工作 A}
function taskB() {// 工作 B}
gulp.parallel(taskA, taskB);

gulp.pipe(gulpTask)

管道函数，接管以后的流解决完了，再传递到一下个管道工作

gulp.src('./src').pipe(压缩).pipe(转码).pipe(dest('./dist'));

插件

插件是构建 gulp 工作时经常会应用一些插件来实现特定的工作，比方压缩文件，合并文件，转换程序等等。

常见的插件（实战章节会对相干的插件应用进行介绍）：

• gulp-concat 合并文件
• gulp-uglify 压缩 js 文件
• gulp-less 编译 less
• gulp-mincss 压缩 CSS
• gulp-sass CSS 预编译

应用办法：

• 装置 npm install gulp-concat --save-dev
• 援用 const concat = require('gulp-concat');
• 调用 gulp.pipe(concat())