本文简单介绍gulp概念及基本使用
gulp
是一个基于流的自动化构建工具grunt
运用配置的思想来写打包脚本一切皆配置,配置项比较多且不同的插件会有扩展字段,认知成本高;更像一个工具库,为你提供各种螺丝刀,采用流式写法来编写构建脚本grunt
默认采用串行的方式执行任务,想要并行则以大任务包含小任务, 一种树形结构)的方式运行,不灵活;gulp
并行串行课随便组装gulp
流的形式 是将文件写入内存,而grunt
是写入临时文件,所以gulp
构建项目比grunt
快先有的grunt
再有的gulp
,gulp
一诞生就迅速取代了grunt
gulp
的核心理念是task runner
webpack的核心理念是module bundler
gulp
相对与webpack
的优缺点:
gulp
相对webpack
思想更加的简单、易用,更适合编写一些自动化的任务gulp
来构建,gulp
默认也是不支持模块化的每个Gulp
任务都是一个异步的JavaScript
函数:
callback
作为参数,调用callback
函数表示任务结束steam
、promise
、event emmitter
、child process
或者observer
类型的函数任务可以是public
或者private
类型的
gulpfile.js
中被导出,可以通过npx gulp [command]
命令直接调用;series()
或parallel()
组合的组成部分;javascript// 定义任务 `npx gulp foo`
module.exports.foo = (cb) => {
console.log("foo");
cb();
}
// 默认任务 `npx gulp`
module.exports.default = (cb) => {
console.log("default task");
cb();
}
// gulp4之前, 定义任务的方式 `npx gulp bar`
const gulp = require('gulp');
gulp.task("bar", (cb) => {
console.log("bar");
cb();
})
// 私有任务
const abc = (cb) => {
cb();
}
module.exports.def = () => console.log('不是任务');
// npx gulp def
// [20:47:04] The following tasks did not complete: def
// [20:47:04] Did you forget to signal async completion?
series()
串行任务组合parallel()
并行任务组合他们可以接受任意数量的任务函数或者已经组合的操作
javascriptconst { series, parallel } = require('gulp');
const task1 = (cb) => {
setTimeout(() => {
console.log("task1");
cb();
}, 2000);
}
const task2 = (cb) => {
setTimeout(() => {
console.log("task2");
cb();
}, 3000);
}
const seriesTask = series(task1, task2);
const parallelTask = parallel(task1, task2);
const composeTask = series(parallelTask, seriesTask);
module.exports = {
seriesTask,
parallelTask,
composeTask
}
// 1. npx gulp seriesTask
// Finished 'seriesTask' after 5.01 s
// 2. npx gulp parallelTask
// Finished 'parallelTask' after 3 s
// 3. npx gulp composeTask
// 串行 parallelTask 和 parallelTask 3+5 = 8
gulp
暴露了src()
和dist()
方法处理计算机上存放的文件
src()
接受参数从文件系统中读取文件然后生成一个Node
流,它将所有匹配的文件读到内存中并通过流进行处理
src
产生的流应从任务中返回并发出异步完成的信号;dest()
接受一个输出目录作为参数,并且他还会产生一个Node
流,通过该流将内容输出到文件中流所提供的主要API
是 .pipe()
方法 其原理是什么呢?
pipe
方法接受一个转换流或可写流pipe
方法可以做哪里事情?
es6
转换成es5
,可以使用babel
插件uglify
或者terser
插件glob
文件匹配
src
方法接受一个glob
字符串或有多个glob
字符串组成的数组作为参数,用于确定哪些文件要被执行glob
的匹配规则 可以看我的另一篇文章 glob模式匹配
*.js
匹配当前目录下任意js
文件script/**/*.js
script
目录下的任意目录下的任意js
文件['script/**/*.js', '!script/vender']
排除script/vender
目录后,script
目录下的任意目录下的任意js文件javascriptconst gulp = require('gulp');
const babel = require("gulp-babel");
const jsTask = async () => {
return gulp.src('./src/**/*.js')
.pipe(babel())
// .pipe(terser({mangle: {toplevel: true }}))
.pipe(gulp.dest("./dist"))
}
module.exports = {
jsTask
}
详细案例点击这里
javascriptconst { src, dest, watch, series, parallel } = require('gulp');
const htmlMin = require('gulp-htmlmin');
const babel = require('gulp-babel');
const terser = require('gulp-terser');
const less = require('gulp-less'); // less
const postcss = require('gulp-postcss'); // postcss
const postcssPresetEnv = require('postcss-preset-env');
const inject = require('gulp-inject');
const browserSync = require('browser-sync');
const del = require('del');
const htmlTask = () => {
return src("./src/*.html", {base: "./src"})
.pipe(htmlMin({
collapseWhitespace: true
}))
.pipe(dest("./dist"))
}
const jsTask = () => {
return src("./src/js/**.js", {base: "./src"})
.pipe(babel({presets: ["@babel/preset-env"]}))
.pipe(terser({mangle: {toplevel: true}}))
.pipe(dest("./dist"))
}
const lessTask = () => {
return src("./src/css/*.less", {base: "./src"})
.pipe(less())
.pipe(postcss([postcssPresetEnv()]))
.pipe(dest("./dist"))
}
/**
* 配合
* <!-- inject:css --> <!-- endinject -->
* <!-- inject:js --> <!-- endinject -->
* 使用
*/
const injectHtml = () => {
return src("./dist/*.html")
.pipe(inject(src(["./dist/js/*.js", "./dist/css/*.css"]), {relative: true}))
.pipe(dest('./dist'))
}
// 搭建本地服务器
const bs = browserSync.create();
const serve = () => {
watch("./src/*.html", series(htmlTask, injectHtml));
watch("./src/js/*.js", series(jsTask, injectHtml));
watch("./src/css/*.less", series(jsTask, lessTask));
bs.init({
port: 8080,
open: true,
files: "./dist/*",
server: {
baseDir: "./dist"
}
})
}
const clean = () => {
return del(["dist"])
}
const buildTask = series(clean, parallel(htmlTask, jsTask, lessTask), injectHtml);
const serveTask = series(buildTask, serve);
module.exports = {
htmlTask,
serveTask,
buildTask
}
本文作者:郭敬文
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!