最近将项目的构建工具换成了gulp.js,实在受不了ant了,也没打算考虑grunt。具体为啥选gulp,最主要的原因还是讨厌写配置。
编写构建脚本过程中发现有些功能都没有现成插件可用,干脆自己写了得了。
我们做前端项目可能会面对如下两种场景:
针对上面两种场景,我写了两个插件来实现对应功能,分别是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(); });};
联系客服