前言

最近在学习浏览器插件FeHelper，发现FeHelper使用了gulp来处理项目中的js、css等文件，因此打算学习一下。

参考：FeHelper、/

安装

安装 gulp 命令行工具

npm install --global gulp-cli

创建项目目录并进入

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

npm init

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

npm install --save-dev gulp

检查 gulp 版本

gulp --version

创建 gulpfile 文件

利用任何文本编辑器在项目大的根目录下创建一个名为 gulpfile.js 的文件，并在文件中输入以下内容：

function defaultTask(cb) {// place code for your default task herecb();}exports.default = defaultTask

设置构建命令

// package.json"scripts": {"build": "gulp"},

创建任务

每个 gulp 任务（task）都是一个异步的 JavaScript 函数，此函数是一个可以接收 callback 作为参数的函数，或者是一个返回 stream、promise、event emitter、child process 或 observable (后面会详细讲解) 类型值的函数。

组合任务

Gulp 提供了两个强大的组合方法： series() 和 parallel()，允许将多个独立的任务组合为一个更大的操作。这两个方法都可以接受任意数目的任务（task）函数或已经组合的操作。series() 和 parallel() 可以互相嵌套至任意深度。

如果需要让任务（task）按顺序执行，请使用 series() 方法。

const {series } = require('gulp');function transpile(cb) {// body omittedcb();}function bundle(cb) {// body omittedcb();}exports.build = series(transpile, bundle);

当 series() 或 parallel() 被调用时，任务（tasks）被立即组合在一起。这就允许在组合中进行改变，而不需要在单个任务（task）中进行条件判断。

const {series } = require('gulp');function minify(cb) {// body omittedcb();}function transpile(cb) {// body omittedcb();}function livereload(cb) {// body omittedcb();}if (process.env.NODE_ENV === 'production') {exports.build = series(transpile, minify);} else {exports.build = series(transpile, livereload);}

异步执行

当从任务（task）中返回 stream、promise、event emitter、child process 或 observable 时，成功或错误值将通知 gulp 是否继续执行或结束。如果任务（task）出错，gulp 将立即结束执行并显示该错误。

当使用 series() 组合多个任务（task）时，任何一个任务（task）的错误将导致整个任务组合结束，并且不会进一步执行其他任务。当使用 parallel() 组合多个任务（task）时，一个任务的错误将结束整个任务组合的结束，但是其他并行的任务（task）可能会执行完，也可能没有执行完。

返回stream

我们这里更多的是处理文件，因此其他返回类型就忽略，感兴趣的可以看官方文档：异步执行

const {src, dest } = require('gulp');function streamTask() {return src('*.js').pipe(dest('output'));}exports.default = streamTask;

使用 callback

如果任务（task）不返回任何内容，则必须使用 callback 来指示任务已完成。在如下示例中，callback 将作为唯一一个名为 cb() 的参数传递给你的任务（task）

function callbackTask(cb) {// `cb()` should be called by some async workcb();}exports.default = callbackTask;

处理文件

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

src() 接受 glob 参数，并从文件系统中读取文件然后生成一个 Node 流（stream）。它将所有匹配的文件读取到内存中并通过流（stream）进行处理。由 src() 产生的流（stream）应当从任务（task）中返回并发出异步完成的信号，就如 创建任务（task） 文档中所述。

流（stream）所提供的主要的 API 是 .pipe() 方法，用于连接转换流（Transform streams）或可写流（Writable streams）。

dest() 接受一个输出目录作为参数，并且它还会产生一个 Node 流（stream），通常作为终止流（terminator stream）。当它接收到通过管道（pipeline）传输的文件时，它会将文件内容及文件属性写入到指定的目录中。

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

向流中添加文件

src() 也可以放在管道（pipeline）的中间，以根据给定的 glob 向流（stream）中添加文件。新加入的文件只对后续的转换可用。如果 glob 匹配的文件与之前的有重复，仍然会再次添加文件。

这对于在添加普通的 JavaScript 文件之前先转换部分文件的场景很有用，添加新的文件后可以对所有文件统一进行压缩并混淆（uglifying）。

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(src('vendor/*.js')).pipe(uglify()).pipe(dest('output/'));}

分阶段输出

dest() 可以用在管道（pipeline）中间用于将文件的中间状态写入文件系统。此功能可用于在同一个管道（pipeline）中创建未压缩（unminified）和已压缩（minified）的文件。

const {src, dest } = require('gulp');const babel = require('gulp-babel');const uglify = require('gulp-uglify');const rename = require('gulp-rename');exports.default = function() {return src('src/*.js').pipe(babel()).pipe(src('vendor/*.js')).pipe(dest('output/')).pipe(uglify()).pipe(rename({extname: '.min.js' })).pipe(dest('output/'));}

Glob 详解

glob 是由普通字符和/或通配字符组成的字符串，用于匹配文件路径。可以利用一个或多个 glob 在文件系统中定位文件。

src() 方法接受一个 glob 字符串或由多个 glob 字符串组成的数组作为参数，用于确定哪些文件需要被操作。glob 或 glob 数组必须至少匹配到一个匹配项，否则 src() 将报错。当使用 glob 数组时，将按照每个 glob 在数组中的位置依次执行匹配 - 这尤其对于取反（negative） glob 有用。

*

在一个字符串片段中匹配任意数量的字符，包括零个匹配。对于匹配单级目录下的文件很有用。

**

在多个字符串片段中匹配任意数量的字符，包括零个匹配。 对于匹配嵌套目录下的文件很有用。请确保适当地限制带有两个星号的 glob 的使用，以避免匹配大量不必要的目录。

!

由于 glob 匹配时是按照每个 glob 在数组中的位置依次进行匹配操作的，所以 glob 数组中的取反（negative）glob 必须跟在一个非取反（non-negative）的 glob 后面。第一个 glob 匹配到一组匹配项，然后后面的取反 glob 删除这些匹配项中的一部分。如果取反 glob 只是由普通字符组成的字符串，则执行效率是最高的。

['script/**/*.js', '!scripts/vendor/']

插件

这块不介绍了，相应的插件可以在npm仓库中搜索gulp

文件监控

gulp api 中的 watch() 方法利用文件系统的监控程序（file system watcher）将 globs 与 任务（task） 进行关联。它对匹配 glob 的文件进行监控，如果有文件被修改了就执行关联的任务（task）。如果被执行的任务（task）没有触发 异步完成 信号，它将永远不会再次运行了。

const {watch, series } = require('gulp');function clean(cb) {// body omittedcb();}function javascript(cb) {// body omittedcb();}function css(cb) {// body omittedcb();}// 可以只关联一个任务watch('src/*.css', css);// 或者关联一个任务组合watch('src/*.js', series(clean, javascript));

初次执行

调用 watch() 之后，关联的任务（task）是不会被立即执行的，而是要等到第一次文件修之后才执行。

如需在第一次文件修改之前执行，也就是调用 watch() 之后立即执行，请将 ignoreInitial 参数设置为 false。

const {watch } = require('gulp');// 关联的任务（task）将在启动时执行watch('src/*.js', {ignoreInitial: false }, function(cb) {// body omittedcb();});

参考FeHelper配置自己的项目

创建目录

在项目根目录下创建app和output文件夹，app存放插件的相关代码、文件；output存放打包后的输出文件

创建一个基础的插件项目

在app文件夹下创建一个基础的插件项目。这块不说了，不会的可以看我之前的文章。

css 用于存放插件需要的样式img 用于存放插件需要的图片、图标js 用于存放插件的相应逻辑vendor 用于存放使用到的库，比如jQuery、uikitmanifest.json 插件的配置文件popup.html 点击插件弹窗的界面

本地加载

本地加载一下，测试项目能否正常运行

配置gulp

//引入gulplet gulp = require('gulp');//用于删除文件、文件夹let clean = require('gulp-clean');//用于复制文件let copy = require('gulp-copy');//用于压缩let zip = require('gulp-zip');// 用于文件压缩let uglifyjs = require('gulp-uglify-es').default;//用于压缩csslet uglifycss = require('gulp-uglifycss');//用于压缩htmllet htmlmin = require('gulp-htmlmin');//用于压缩jsonlet jsonmin = require('gulp-jsonminify');// node的文件模块let fs = require('fs');//用于处理文件流let through = require('through2');// 管道let path = require('path');//用于获取文件字节数let pretty = require('pretty-bytes');//用于使用shell脚本let shell = require('shelljs');//按指定顺序运行一系列 gulp 任务let runSequence = require('run-sequence');//这是为了扩展 gulp.watch（event）。有些任务错误可能导致被终止，使用可以解决问题。let watchPath = require('gulp-watch-path');//回调let gcallback = require('gulp-callback');// 创建清理任务，使output文件不可读，立即清理gulp.task('clean', () => {return gulp.src('output', {read: false}).pipe(clean({force: true}));});//将apps文件夹下的图片复制到output文件夹下gulp.task('copy', () => {return gulp.src(['apps/**/*.{gif,png,jpg,jpeg}']).pipe(copy('output'));});//将apps文件夹下的json文件压缩并写入到output/apps下gulp.task('json', () => {return gulp.src('apps/**/*.json').pipe(jsonmin()).pipe(gulp.dest('output/apps'));});//将apps文件夹下的html，去除空格压缩写入到output/apps下gulp.task('html', () => {return gulp.src('apps/**/*.html').pipe(htmlmin({collapseWhitespace: true})).pipe(gulp.dest('output/apps'));});// 合并 & 压缩 jsgulp.task('js', () => {let jsMerge = () => {return through.obj(function (file, enc, cb) {//将文件转化为utf8格式let contents = file.contents.toString('utf-8');//下面的不清是干嘛的let tpl = 'let #VARNAME# = (function(module){ #CODES# ; return module.exports; })({exports:{}});\r\n';let merge = (fp, fc) => {let js = {};let rfc = fc.replace(/Tarp\.require\(\s*(['"])(.*)\1\s*\)/gm, function (frag, $1, mod, $2, code) {let mp = path.resolve(fp, '../' + mod + (/\.js$/.test(mod) ? '' : '.js'));let mc = fs.readFileSync(mp).toString('utf-8');frag = frag.replace(/[^\w]/g, '').replace('Tarprequire', 'TR');js[frag] = merge(mp, mc);return frag;});return Object.keys(js).map(k => {return tpl.replace('#VARNAME#', k).replace('#CODES#', () => js[k]);}).join('; ') + rfc;};contents = merge(file.path, contents);file.contents = new Buffer(contents);this.push(file);return cb();})};//将apps文件下的js文件进行合并、压缩，最后写入到output/appsreturn gulp.src('apps/**/*.js').pipe(jsMerge()).pipe(uglifyjs()).pipe(gulp.dest('output/apps'));});// 合并 & 压缩 cssgulp.task('css', () => {let cssMerge = () => {return through.obj(function (file, enc, cb) {let contents = file.contents.toString('utf-8');let merge = (fp, fc) => {return fc.replace(/\@import\s+(url\()?\s*(['"])(.*)\2\s*(\))?\s*;?/gm, function (frag, $1, $2, mod) {let mp = path.resolve(fp, '../' + mod + (/\.css$/.test(mod) ? '' : '.css'));let mc = fs.readFileSync(mp).toString('utf-8');return merge(mp, mc);});};contents = merge(file.path, contents);file.contents = new Buffer(contents);this.push(file);return cb();})};// 处理css文件 return gulp.src('apps/**/*.css').pipe(cssMerge()).pipe(uglifycss()).pipe(gulp.dest('output/apps'));});// 清理冗余文件，并且打包成zip，发布到chrome webstoregulp.task('zip', () => {// 读取manifest文件let pathOfMF = './output/apps/manifest.json';let manifest = require(pathOfMF);// background、content-script中的文件，可以作为例外// let excludes = manifest.background.scripts.concat(manifest.content_scripts.map(cs => {//return cs.js.join(',');// }).join(',').split(','));//这块 v2和v3版本不一样，模仿上面的进行修改let excludes = manifest.background.service_worker.concat(manifest.content_scripts.map(cs => {return cs.js.join(',');}).join(',').split(','));// ============冗余文件清理================================================shell.cd('output/apps');let fileList = shell.find('./').filter(file => {let included = 'yes';if (file.match(/\.css$/) && !/index\.css$/.test(file)) {included = shell.grep('-l', file, './**/*.{css,html,js}').stdout;} else if (file.match(/\.js$/) && !/index\.js$/.test(file)) {included = shell.grep('-l', file.replace(/\.js$/, ''), './**/*.{html,js}').stdout;}// 如果没有搜索到，再尝试下在js、css文件的当前目录下搜寻if (!included.trim().length && /\.(js|css)$/.test(file)) {let arr = file.split(/\//);let filename = arr.splice(-1);let dirname = arr.join('/');included = shell.grep('-l', filename, (dirname || '.') + '/*.{html,js,css}').stdout;}return !included.trim().length;});fileList = fileList.filter(f => excludes.indexOf(f) === -1);fileList.forEach(f => {shell.rm('-rf', f);console.log(new Date().toLocaleString(), '> 清理掉冗余文件：', f);});shell.cd('../../');// web_accessible_resources 中也不需要加载这些冗余的文件了//用于指定插件中的哪些资源开源被网页和其他扩展访问到，v2和v3有些不一样，并且我这里没有用到，因此注释掉//manifest.web_accessible_resources = manifest.web_accessible_resources.filter(f => fileList.indexOf(f) === -1);manifest.name = manifest.name.replace('-Dev', '');fs.writeFileSync(pathOfMF, JSON.stringify(manifest));// ============压缩打包================================================//压缩打包的代码有问题，没想明白如何修改，就删除了，只是最后不会生成压缩包而已});//打包发布到火狐，平常一般用chrom和edge，因此这块不用了，有用到的可以参考fehelper//构建gulp.task('default', ['clean'], () => {runSequence(['copy', 'css', 'js', 'html', 'json'], 'zip');});// 将apps文件下的文件同步写入到output/appsgulp.task('sync', () => {gulp.src('apps/**/*').pipe(gulp.dest('output/apps'));});// 开发过程中用，相当于热更新，不用每次改完都要到浏览器里重新加载一下扩展gulp.task('watch', () => {gulp.watch('apps/**/*.*', (event) => {let wp = watchPath(event, './', './output');gulp.src(wp.srcPath).pipe(copy('output')).pipe(gcallback(() => {console.log(new Date().toLocaleString(), '> 文件发生变化，已编译：', wp.srcPath);}));});});

使用

之前在package.json里添加了打包命令，现在再添加开始时的命令

{"name": "chrome-juqery","version": "1.0.0","description": "基于jQuery开发chrom插件的项目","main": "index.js","scripts": {"watch": "gulp watch","build": "gulp"},"author": "","license": "ISC","devDependencies": {"gulp": "^3.9.1","gulp-callback": "0.0.3","gulp-clean": "^0.4.0","gulp-copy": "^1.1.0","gulp-htmlmin": "^4.0.0","gulp-jsonminify": "^1.1.0","gulp-uglify-es": "^1.0.1","gulp-uglifycss": "^1.0.9","gulp-watch-path": "^0.1.0","gulp-zip": "^4.1.0","pretty-bytes": "^4.0.2","run-sequence": "^2.2.1","shelljs": "^0.8.1"}}

使用

npm install 下载响应依赖npm run watch 进行本地开发npm run build 插件打包

问题：

查了下原因是gulp版本与node版本不兼容的问题，网上解决方案大体两种：

1、降低node版本，这里我们使用nvm将node版本切换到11

不清除nvm如何使用的可以看：使用nvm实现Windows下多个node版本之间的切换

2、修改package.json，修改完如下

{"name": "chrome-juqery","version": "1.0.0","description": "基于jQuery开发chrom插件的项目","main": "index.js","scripts": {"watch": "gulp watch","build": "gulp","preinstall": "npx npm-force-resolutions"},"resolutions": {"graceful-fs": "^4.2.4"},"author": "","license": "ISC","devDependencies": {"gulp": "^3.9.1","gulp-callback": "0.0.3","gulp-clean": "^0.4.0","gulp-copy": "^1.1.0","gulp-htmlmin": "^4.0.0","gulp-jsonminify": "^1.1.0","gulp-uglify-es": "^1.0.1","gulp-uglifycss": "^1.0.9","gulp-watch-path": "^0.1.0","gulp-zip": "^4.1.0","pretty-bytes": "^4.0.2","run-sequence": "^2.2.1","shelljs": "^0.8.1"}}

我这里采用的第二种，最后效果如下图

在本地加载时还是加载apps目录，当内容发生改变后会重新构建，并在控制台里打印，浏览器插件也会被更新。

打包

npm run build

我们加载一下output目录下的apps，确认一下插件是否可以正常运行。我这里是可以正常运行的

项目地址

/idonotyou/chrome-jquery ，感觉还不错的话点个收藏。