打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
贡献gulp插件两枚

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

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

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

  1. 有些页面(比如网站登录页)脚本并不多,为了减少请求不会引用外部脚本,而改用行间脚本。但这样有个问题,行间脚本没办法压缩。
  2. 样式文件中引用的图片地址为了防止缓存,需要加上版本号。手工改实在是太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();    });};
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
Gulp自动添加版本号
加速hexo
Gulp解决发布线上文件(CSS和JS)缓存问题
常用gulp插件介绍(一)
PostCSS
Gulp自动化构建案例---文件压缩
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服