Gulp

Gulp 的概念

自动化构建工具，增强你的工作流程！
关键词：”管道流“

一、Gulp 初始化：

npm install gulp-cli -g
npm install gulp -D
npx -p touch nodetouch gulpfile.js
gulp --help

gulpfile.js 文件配置：

点击查看官网提供的 gulpfile.js 代码

const { src, dest, parallel } = require("gulp");
const pug = require("gulp-pug");
const less = require("gulp-less");
const minifyCSS = require("gulp-csso");
const concat = require("gulp-concat");

function html() {
  return src("client/templates/*.pug").pipe(pug()).pipe(dest("build/html"));
}

function css() {
  return src("client/templates/*.less")
    .pipe(less())
    .pipe(minifyCSS())
    .pipe(dest("build/css"));
}

function js() {
  return src("client/javascript/*.js", { sourcemaps: true })
    .pipe(concat("app.min.js"))
    .pipe(dest("build/js", { sourcemaps: true }));
}

exports.js = js;
exports.css = css;
exports.html = html;
exports.default = parallel(html, css, js);

二、Gulp 详细操作流程：

• 首先你要先在本地安装 nodejs，“傻瓜式”安装即可，一路点击下一步

node - v; // 查看安装的nodejs版本，出现版本号，说明已经正确安装

• 全局安装 gulp

npm install gulp -g

• 单个项目安装 gulp 以及 gulp 相关的插件，首先新建项目文件夹，然后运行以下命令

npm install gulp --save-dev
npm install gulp-less --save-dev
// ......

• 配置 gulpfile.js

// 详见上文

• 运行任务

// gulp 任务名称（gulp.task方法中定义的名称）
// 当执行gulp default或者gulp时，将会调用default任务里面的所有任务

三、Gulp 常用插件：

// gulp-less：处理less预编译文件
// gulp-minify-css：css文件压缩
// gulp-rename：改变文件名
// gulp-autoprefixer：自动添加css前缀
// gulp-concat：合并js文件
// gulp-uglify：压缩js代码
// gulp-imagemin：压缩图片
// gulp-livereload：自动刷新页面
// gulp-cache：图片缓存，只有图片替换了才压缩
// gulp-htmlmin：压缩HTML
// gulp-babel/babel-core/babel-preset-es2015：用于解析ES6转换为ES5

四、Gulp 常用 API：

// src()：创建一个流，用于从文件系统读取 Vinyl 对象。
// dest()：创建一个用于将 Vinyl 对象写入到文件系统的流。
// series()：将任务函数和/或组合操作组合成更大的操作，这些操作将按顺序依次执行。关键词“串行（顺序）执行”
// parallel()：将任务功能和/或组合操作组合成同时执行的较大操作。关键词“并行执行”
// watch()：监听 globs 并在发生更改时运行任务。任务与任务系统的其余部分被统一处理。

案例源码：
gulp-basis
参考：
官网（中文）
官网（英文）