gulp基础

gulp

Gulpfile 详解
gulpfile 是项目目录下名为 gulpfile.js （或者首字母大写 Gulpfile.js，就像 Makefile 一样命名）的文件，在运行 gulp 命令时会被自动加载。在这个文件中，你经常会看到类似 src()、dest()、series() 或 parallel() 函数之类的 gulp API，除此之外，纯 JavaScript 代码或 Node 模块也会被使用。任何导出（export）的函数都将注册到 gulp 的任务（task）系统中。

安装 gulp 命令行工具

npm install --global gulp-cli

创建项目目录并进入

npx mkdirp my-project

在项目目录下创建 package.json 文件

npm init

安装 gulp，作为开发时依赖项

npm install --save-dev gulp

编写程序

const gulp = require('gulp');
// 使用gulp.task()方法建立任务
gulp.task('first', (callback) => {
	// 获取要处理的文件
	gulp.src('./src/css/base.css')
	// 将处理后的文件输出到dist目录
	// .pipe()函数作用：只是对文件处理的结果进行包装，并不会直接操作文件
	.pipe(gulp.dest('./dist/css’));
callback（）
});

处理文件

gulp 暴露了 src() 和 dest() 方法用于处理计算机上存放的文件。

src() 从文件系统中读取文件

const { src, dest } = require('gulp');

exports.default = function() {
return src('src/*.js')
    .pipe(dest('output/'));
}

流（stream）所提供的主要的 API 是 .pipe() 方法

const { src, dest } = require('gulp');
const babel = require('gulp-babel');

exports.default = function() {
return src('src/*.js')
    .pipe(babel())
    .pipe(dest('output/'));
}

dest() 接受一个输出目录，它会将文件内容及文件属性写入到指定的目录中。

利用 .pipe() 方法将插件放置在 src() 和 dest() 之间

插件

Gulp 插件实质上是 Node 转换流（Transform Streams），它封装了通过管道（pipeline）转换文件的常见功能，通常是使用 .pipe() 方法并放在 src() 和 dest() 之间。他们可以更改经过流（stream）的每个文件的文件名、元数据或文件内容。

托管在 npm 上的插件 - 标记有 “gulpplugin” 和 “gulpfriendly” 关键词 - 可以在 插件搜索页面 上浏览和搜索。

每个插件应当只完成必要的工作，因此你可以把它们像构建块一样连接在一起。获得想要的结果可能需要把一组插件组合在一起使用。

常用插件
gulp-concat : 合并文件(js/css)

gulp-htmlmin : html文件压缩

gulp-uglify : 压缩js文件

gulp-rename : 文件重命名

gulp-less : 编译less

gulp-clean-css : 压缩css

gulp-livereload : 实时自动编译刷新