网站首页 » 前端开发 » 前端工具 » 自己开发的第一个 gulp 插件-文件筛选
上一篇:
下一篇:

自己开发的第一个 gulp 插件-文件筛选

前言

自动化工具 gulp 的出现给我们这些从事前端的开发人员提供了很多便利,这让我们的开发效率得到了很大的提高。首先npm 官网上的gulp插件就非常地多,常用的插件基本都可以找到(图片压缩,CSS压缩,js压缩,文件重命名……),如果对这些基本的插件还不了解的可以看看这篇文章《前端自动化工具gulp 初识》。但在实践的项目中,很多时候需要也不是那么简单或者说单纯的现有插件已经满足不了自己的需要,但么你能做的就是要么把几个插件配合使用(如果可以的话)来满足现在需要,或者还有一种方法就是自己去开发一个插件。

实战

下面我就分享下自己在实践开发中,所做的第一个 gulp 插件,在这里不妨把它叫做“文件筛选”。

需求:查找内容含有指定字符串的文件,并筛选出来。

下面我就直接贴出代码,虽然代码不多,但这个功能确定很实用

'use strict';
var through = require('through2');
var gutil = require('gulp-util');
var PluginError = gutil.PluginError;
// 常量
const PLUGIN_NAME = 'gulp-filterfile';
function filterfile(search){
 var stream = through.obj(function(file, enc, cb) {
 if (file.isStream()) {
 this.emit('error', new PluginError(PLUGIN_NAME, 'Streams are not supported!'));
 return callback();
 }
 if (file.isBuffer()) {
 if(String(file.contents).indexOf(search) > 0){
 // 确保文件进入下一个 gulp 插件
 this.push(file);
 }
 }
 // 告诉 stream 引擎,我们已经处理完了这个文件
 cb();
 })
 return stream;
};
module.exports = filterfile;
注意

这里有一个地方需要你注意的,你需要把这个文件放在一个文件夹中,并且你得给这个文件夹起个高大尚点的名字如 gulp-filterfile,然后把这个文件放到 gulp 插件存放目录。现在你就可以像下面这样在 gulpfile.js 里使用它了。

var filterfile = require('gulp-filterfile');
gulp.task('filterfile',function(){
 gulp.src('assets/html/ztmoban/*.htm')
 .pipe(filterfile('朝夕熊'))
 .pipe(gulp.dest('dist/html'))
 .pipe(notify({ message: 'filterfile task complete' }));
});

相关资料

编写插件:http://www.gulpjs.com.cn/docs/writing-a-plugin/

推荐插件:http://gulpjs.com/plugins/

插件大全:https://www.npmjs.com/

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/my-first-gulp-plugin-file-filter/

评论1
  1. amen 2017年3月8日 at pm11:55 回复

    我需要循环2次全部文件,
    第一次扫描获取指定标签位置,
    第二次扫描替换相关内容,
    但在后面没办法一次过把2个功能一起执行,有办法把数据传到下一个管道吗?

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END