1.gulp是什么
gulp是基于stream（流）的自动构建工具；按官网上说，gulp将开发流程中让人痛苦或耗时的任务自动化；因此我们可以通过gulp对我们的代码进行自动的编译（比如说将es6代码转为浏览器可以直接执行的es5；将用sass写的样式转成css;）；而且我们也可以实现将代码自动压缩，监控等功能。
2.怎么搭环境
1.首先要有node环境（这块不介绍了）
2.命令行全局安装gulp
// 为什么需要全局安装，这块也不是太清楚；
// 看网上有博主说这是故意设计的，原因是为了版本和依赖控制；具体不是太了解。
npm i gulp -g
- 初始化项目
新建一个空文件夹并进入，然后通过命令初始化项目，命令如下。
// 按自己的需求填写信息
npm init
// 默认填写的话可以在命令后加-y，如下
npm init -y
4.本地安装gulp
在本地有安装了一次gulp
npm i gulp -D
5.创建gulpfile.js文件
在项目根目录中建一个gulpfile.js文件gulpfile.js文件是帮助gulp实现自动化功能的核心文件。
gulpfile.js的文件写入如下内容
const { src, dest } = require('gulp');
function clean(done) {
console.log('clean');
done();
/* 为什么要执行一个done函数：
显式地发出异步完成的信号，
gulp自动将回调函数（done）作为第一个参数传递过来。完成后调用该函数
*/
}
exports.clean = clean;
6.测试
// 命令行中进入该项目，并执行命令
gulp clean
返回下面结果
返回结果
以上我们搭建了gulp环境，并使用了gulp执行了第一个任务
3.常用API了解
-
src 创建一个流，用于冲文件系统读取
Vinyl对象
函数原型是src(globs, [options])：src()方法接受一个glob字符串或多个glob字符串组成的数组作为参数，用于确定哪些文件需要被操作。glob或glob数组至少需要匹配到一个匹配项，否则src()将报错。
返回值：返回一个可以在管道的开始或中间使用的流，用于根据给定的globs添加文件。
Vinyl是什么：vinyl是描述文件的元数据对象，vinyl十六的主要属性是文件系统中文件核心的path和contents核心方面
glob是什么：glob是由普通字符和/或通配符组成的字符串，用于匹配文件路径。可以利用一个或多个global在文件系统中定位文件。
-
dest 创建一个用于将
Vinyl对象写入到文件系统的流
函数原型dest(directory, [options])
返回值：返回一个可以在管道的中间或末尾使用的流，用于在文件系统上创建文件。
directory是什么：将写入文件输出到输出目录的路径
-
task 用于将函数注册为任务,这个api不再是推荐模式了
函数原型task([taskName], taskFunction) - watch 监听globs并在发生改变时运行任务（即在文件修改或删除或者其它修改之后，gulp会立即运行和修改文件相关的任务）
-
series & parallel
这两个函数作用都是将任务和/或组合操作，组合成更大的操作；这两个函数对于组合操作的嵌套深度是没有强制限制的。而且series()和parallel()是可以互相嵌套至任意深度。
不同之处在于series()是按顺序来依次执行这些操作的。当希望以最大并发量来运行任务时可以使用parallel()。
代码实际操作如下：
const { series, src, dest, watch } = require('gulp');
function buildJs() {
return src('src/*.js')
.pipe(dest('dist/js'));
}
function buildCss() {
return src('src/*.css')
.pipe(dest('dist/css'));
}
function watcher() {
watch(['src/*.js'], buildJs);
watch(['src/*.css'], buildCss);
}
exports.doing = series(buildJs, buildCss);
exports.watching = watcher;
/*
执行gulp doing 可以看到一下执行buildJs, buildCss两个任务 ;
执行gulp watching，然后修改src文件夹下的js文件或css文件，保存之后可以看到dist文件夹下的同名js或css也一并改动了；
*/
pipe是什么：gulp的pipe方法是来自于node的stream的api；同字面意思一样，pipe只是一个管道
4.插件的使用
-
sass
使用sass需要两个插件node-sass和gulp-sass。 -
babel
想要使用es6，babel是必不可少的；你需要安装@babel/core,@bebl/preset-nev,gulp-babel。 -
压缩
如果想要压缩js文件你要安装gulp-uglify；压缩css需要安装gulp-minify-css； -
模板
HTML模板插件有很多，例如gulp-ejs,gulp-nunjucks等等
gulp的插件不是只有这几个的还有很多很多的，以上列举的不一定适合每个人，可以去官网查找自己需要的插件
/* 插件使用的例子 */
const { watch, src, dest } = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
sass.compiler = require('node-sass');
function styleTransform() {
return src('src/*.scss')
.pipe(
sass({
outputStyle: 'compact'
}).on('error', sass.logError)
)
.pipe(autoprefixer())
.pipe(dest('dist/css'));
}
function scriptTransform() {
return src('src/*.js')
.pipe(babel())
.pipe(dest('dist/js'));
}
function watcher() {
watch(['src/*.scss'], styleTransform);
watch(['src/*.js'], scriptTransform);
}
exports.watching = watcher;
/* 执行gulp watching 查看结果 */
网友评论