贡献gulp插件两枚

来源：互联网发布：淘宝购物客户资源编辑：程序博客网时间：2024/04/27 05:32

最近将项目的构建工具换成了gulp.js，实在受不了ant了，也没打算考虑grunt。具体为啥选gulp，最主要的原因还是讨厌写配置。

编写构建脚本过程中发现有些功能都没有现成插件可用，干脆自己写了得了。

我们做前端项目可能会面对如下两种场景：

有些页面（比如网站登录页）脚本并不多，为了减少请求不会引用外部脚本，而改用行间脚本。但这样有个问题，行间脚本没办法压缩。
样式文件中引用的图片地址为了防止缓存，需要加上版本号。手工改实在是太low了，另外，普通的将日期作为版本号的方式也不妥当。

针对上面两种场景，我写了两个插件来实现对应功能，分别是gulp-minify-inline-scripts和gulp-make-css-url-version。用法很简单：

gulp-minify-inline-scripts

var minifyInline = require('gulp-minify-inline-scripts');gulp.task('minify', function() {  gulp.src('html/*.html')    .pipe(minifyInline())    .pipe(gulp.dest('dist'))});

gulp-make-css-url-version

var makeUrlVer = require('gulp-make-css-url-version');gulp.task('stylesheets', function() {  gulp.src('css/*.css')    .pipe(makeUrlVer())    .pipe(gulp.dest('dist'))});

gulp-make-css-url-version默认是取图片文件的md5值作为版本号。

其实编写gulp.js插件是件十分容易的事，明确插件的功能，按照下面的模板，分分钟就可以来上一个。

var gutil = require('gulp-util');var through = require('through2');module.exports = function (options) {    return through.obj(function (file, enc, cb) {        options = options || {};        var self = this;        if (file.isNull()) {            this.push(file);            return cb();        }        if (file.isStream()) {            this.emit('error', new gutil.PluginError(PLUGIN_NAME, 'Streaming not supported'));            return cb();        }        var html = file.contents.toString();        /**  replace html func        */        file.contents = new Buffer(html);        self.push(file);        cb();    });};

0 0