gulp4.0分离了cli和核心部分,所以需要分别安装这两个包,另外对环境要求如下:
node >= 8.11.1
npm >= 5.6.0
npx >= 9.7.1
全局安装gulp-cli
npm i -g gulp-cli
本地安装gulp
npm i -D gulp
查看版本号
$ gulp -v
# 输出
CLI version: 2.2.0
Local version: 4.0.2
在项目根目录创建gulpfile.js文件(如果使用ts或者babel,也可用gulpfile.ts、gulpfile.babel.js分别代替),此文件即gulp会默认读取的配置文件,我们可以在里面配置需要的task。
如果task较多或者较复杂,可以创建gulpfile.js目录,在目录中拆分task为多个文件,只要保证该目录下有个index.js作为入口即可。
task分为两种:
Private tasks:配置文件中的一个function,仅能在该文件中使用
Public tasks:将Private tasks导出,可以供gulp命令执行
const { series, parallel } = require('gulp');
// Private tasks
function clean(cb) {
// body omitted
cb();
}
// Private tasks
function build(cb) {
// body omitted
cb();
}
exports.build = build; // Public tasks, 执行gulp build
exports.default = series(clean, parallel(css, javascript)); // Public tasks, 执行gulp
注意:
在task中,操作完成时,我们必须要通过cb()或者return的方式来告知gulp此任务已完成。
// cb
function clean(cb) {
del(['dist]);
cb();
});
// return
function minifyjs() {
return src('src/**/*.js')
.pipe(minify())
.pipe(dest('dist'));
});
function promiseTask() {
return new Promise(function(resolve, reject) {
// body omitted
resolve();
});
});
gulp <export task name>
gulp // 导出为default的task可以直接运行gulp
gulp scripts --env development // 传递环境变量
series:序列(顺序执行)
// task1执行完再执行task2
exports.taskName = series(task1, task2)
parallel:并行(同时执行)
// task1和task2同时执行
exports.taskName = parallel(task1, task2)
混用:
exports.taskName = series(clean, parallel(css, javascript))
gulp借鉴了Unix的管道(pipe)思想,处理文件采用流的方式,前一步的输出作为后一步的输入,中途不会在磁盘写入文件,仅在dest时输出文件,所以非常快速高效。
gulp提供了src及dest方法分别来进行文件读入、输出操作,同时提供了pipe管道方法来链式执行其他操作。
const { src, dest } = require('gulp');
// 将src目录下的所有js输出到output目录
exports.default = function() {
return src('src/*.js')
.pipe(dest('output/'));
}
如果我们想在中途添加文件可以采用如下方式:
const { src, dest } = require('gulp');
const uglify = require('gulp-uglify');
exports.default = function() {
return src('src/*.js')
.pipe(uglify())
.pipe(src('vendor/*.js')) // 添加文件
.pipe(dest('output/'));
}
当然我们也可以进行多次输出:
const { src, dest } = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
exports.default = function() {
return src('src/*.js')
.pipe(babel())
.pipe(dest('temp/'))
.pipe(uglify())
.pipe(dest('output/'));
}
往往我们在使用src方法的时候需要输入多个或者一类文件,而不仅仅是某个具体的文件,这时我们就可以使用gulp提供的匹配规则来处理。
"src/file.js":单个文件
["src/file1,src/file2.js"]:多个文件
*: 所有文件
src('src/*.js') // src自身目录所有的js文件,不含后代文件夹中
src('src/a*c.js')
**:0或者多个文件夹
src('src/**/*.js') // src目录所有的js文件,含后代文件夹中的
{}:多个属性
src('src/*.{jpg,png,gif}') // src自身目录下的所有jpg、png和gif文件
!:排除
src(['**/*.js', '!node_modules/**']) // 所有的js文件,但是node_modules下的除外
注意:src 接收的文件匹配字符串会顺序解释,所以你可以写成这样 gulp.src(['.js', '!b.js', 'bad.js'])(排除所有以 b 开头的 JS 文件但是除了 bad.js)
匹配符 说明
* 匹配文件路径中的0个或多个字符,但不会匹配路径分割符,
除非分隔符出现在末尾
** 匹配路径的0个会多个目录 及子目录 需要单独出现,
即他左右不能有其他的东西了如果出现在末尾,也能匹配文件
? 匹配文件路径中的一个字符(不能匹配路径分割符/)
[...] 匹配方括号中 出现字符的任意一个,当方括号中第一个字符为^或!时,
则表示不匹配方括号中出现字符中的任意一个,
类似于js中正则表达式中的用法
!(pattern|pattern|pattern) 匹配任何与括号中给定的任意模式都不匹配
?(pattern|pattern|pattern) 匹配括号中给定的任意模式0次或1次
+(pattern|pattern|pattern) 匹配括号中的至少一次
*(pattern|pattern|pattern) 匹配括号中给定的任意模式0次或多次
@(pattern|pattern|pattern) 匹配括号中 给定的任意模式一次
gulp推荐每个插件应该只专注的做一小部分工作,然后通过pipe将它们连接起来,就可以完成我们需要做的事情。
const { src, dest } = require('gulp');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
exports.default = function() {
return src('src/*.js')
// The gulp-uglify plugin won't update the filename
.pipe(uglify())
// So use gulp-rename to change the extension
.pipe(rename({ extname: '.min.js' }))
.pipe(dest('output/'));
}
当然,除了插件,我们也可以使用其他库:
const del = require('delete');
exports.default = function(cb) {
// Use the `delete` module directly, instead of using gulp-rimraf
del(['output/*.js'], cb);
}
最后也可以借助through2插件使用内联方式自行处理,也可以利用次through2进行gulp插件开发:
const { src, dest } = require('gulp');
const uglify = require('uglify-js');
const through2 = require('through2');
exports.default = function() {
return src('src/*.js')
// Instead of using gulp-uglify, you can create an inline plugin
.pipe(through2.obj(function(file, _, cb) {
if (file.isBuffer()) {
const code = uglify.minify(file.contents.toString())
file.contents = Buffer.from(code)
}
cb(null, file);
}))
.pipe(dest('output/'));
}
我们可以使用watch方法来监听文件的改动,以便在改动时执行相应的处理任务。
const { watch, series } = require('gulp');
function clean(cb) {
// body omitted
cb();
}
function javascript(cb) {
// body omitted
cb();
}
function css(cb) {
// body omitted
cb();
}
exports.default = function() {
watch('src/*.css', css);
watch('src/*.js', series(clean, javascript));
};
globs[string|array]: 要处理文件的路径匹配规则
options:配置项,点击查看详情
const { src, dest } = require('gulp');
function copy() {
return src('input/*.js', { sourcemaps: true })
.pipe(dest('output/'));
}
directory[string|function]: 输出的路径
options:配置项,点击查看详情
const { src, dest } = require('gulp');
const uglify = require('gulp-uglify');
src('input/**/*.js', { sourcemaps: true })
.pipe(uglify())
.pipe(dest('output/', { sourcemaps: '.' }));
注意: dest的路径默认是基于当前路径,并不是输入文件的路径,如果需要输出到输入文件的相对路径,可以使用gulp-rename插件来实现。如我要将所有目录下的scss目录中的scss文件输出到scss同目录的css文件中:
src('./SCOs/**/scss/*.scss')
.pipe(sass())
.pipe(rename(path=> path.dirname += '../../css'))
.pipe(dest('./SCOs'));
tasks[function|string]:任务名或者function
const { series } = require('gulp');
function javascript(cb) {
// body omitted
cb();
}
function css(cb) {
// body omitted
cb();
}
exports.build = series(javascript, css);
tasks[function|string]:任务名或者function
const { parallel } = require('gulp');
function javascript(cb) {
// body omitted
cb();
}
function css(cb) {
// body omitted
cb();
}
exports.build = parallel(javascript, css);
const { watch } = require('gulp');
watch(['input/*.js', '!input/something.js'], function(cb) {
// body omitted
cb();
});
监听方法会返回一共实例,该实例提供了如下几个方法:
eventName[string]:事件名称,可以是add, addDir, change, unlink, unlinkDir, ready, error, or all
eventHandler[function]:事件处理函数,该函数接收path和stats两个参数。
const { watch } = require('gulp');
const watcher = watch(['input/*.js']);
watcher.on('change', function(path, stats) {
console.log(`File ${path} was changed`);
});
watcher.on('add', function(path, stats) {
console.log(`File ${path} was added`);
});
watcher.on('unlink', function(path, stats) {
console.log(`File ${path} was removed`);
});
watcher.close();
globs[string|array]: 要添加的文件
globs[string|array]: 要移除的文件
taskName[string]:任务名称
taskFunction[function]:处理函数
const { task } = require('gulp');
task('build', function(cb) {
// body omitted
cb();
});
const build = task('build');
task[function|string]:指定获取的任务
precision[number]:精度,默认1000
可使用此方法进行增量编译。
const { src, dest, lastRun, watch } = require('gulp');
const imagemin = require('gulp-imagemin');
function images() {
return src('src/images/**/*.jpg', { since: lastRun(images) })
.pipe(imagemin())
.pipe(dest('build/img/'));
}
exports.default = function() {
watch('src/images/**/*.jpg', images);
};
options[object]:deep默认为false,只会返回顶级任务,如果为true,则会返回整个任务树。
gulp.tree({ deep: true })
具体的用法见gulp源码解析(二)—— vinyl-fs
我常用的api就这些,其他的api可以自行查看官方文档。
gulp-clean:用于清理;
gulp-notify:用于打印消息文本;
gulp-rename:用于修改名字;
gulp-concat:用于合并文件;
gulp-zip:用于生成一个zip压缩包;
gulp-minify-css:用于压缩css;
gulp-autoprefixer:用于给css添加前缀;
gulp-imagemin:用于给图片进行优化;
gulp-uglify:用于压缩js;
amd-optimize:用于amd模块引用编译;
gulp-import-css:如果css文件是通过import导入的可以使用此插件进行合并优化;
gulp-rev-replace:用于替换;
gulp-useref:引入使用build标记,进行替换;
gulp-rev:生成md5文件名;
gulp-filter:对文件进行过滤;
gulp-header:压缩之后将注释写入到文件的头部
gulp-if:进行逻辑判断
gulp-size:获取文件大小
gulp-less:编译less文件
gulp-sass:编译sass文件
gulp-file-include:对文件进行引入
gulp-sourcemaps:生成map文件
gulp-livereload:自动刷新
gulp-clean-css:css压缩
browserSync:启动server并启动热更新
gulp-plumber : 监测工作流,报错,防止遇到错误时直接退出gulp
gulp-rev : 文件名添加版本号
gulp.spritesmith:根据css文件自动生成雪碧图
如果要查找gulp插件,一般有两个地方:
gulp本身其实非常简单,提供的api很少,但是简洁够用。在了解这些api后,你可能觉得最复杂的还是了解各插件的用法。
其实,构建工具(gulp、webpack之类)本身都是相对较简单的,这才是它们该有的样子,本身就很复杂了,我才懒得用。但是在使用过程中,我觉得有两个难点:
gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快。如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧。
安装步骤:1.首先确定是否安装了node.js,如果未安装,请先安装node.js;2.确定是否安装了包管理工具npm,如未安装请安装:npm install npm -g;3.安装gulp: npm install gulp --save-dev;
gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器 ,这篇文件整理了一些gulp常用插件
Gulp自动化构建工具可以增强你的工作流程!易于使用、易于学习、构建快速、插件高质!在日常开发中,可以借助Gulp的一些插件完成很多的前端任务。
在文件根目录初始化npm,出现package.json,在根目录下面新建gulpfile.js文件,并配置,运行命令(顺序不要变,先把ES6转化问ES5,然后开始压缩混淆,uglify不支持ES6压缩混淆,会报错)
vinyl 是 gulp 所使用的虚拟的文件格式,在它的自述文件是这么说的:“当提到文件时你首先想到的是什么?肯定是路径和内容吧”,它主要记录的信息有:path:文件路径,contents:文件内容
在网站正式上线前,压缩程式码是必要的过程,因为可以节省空间还能提高网页整体的效能,这里会介绍三压缩程式码的套件,分别是gulp-htmlmin 、gulp-clean-css、gulp-terser。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!