browserify-transform的写法

1.前言

最近在研究

Browserify

构建工程，主要通过

gulp

，

browserify

，

gulp-browserify

配合。但是在工程中发现使用

lessify

插件配合

less-plugin-inline-urls

需要传参，但是通过

gulp-browserify

配合

gulp

的时候

transform

无法传参。略显坑爹。所以决定自己写一个

transform

。

2.代码

首先是要用到的库，

through2

库，这是一个专门用来处理stream的库，比较简单实用，也可以自己写原生的。

var gulp = require('gulp');
var gulpRename = require('gulp-rename');
var browserify = require('browserify');
var gulpBrowserify = require('gulp-browserify');

gulp.task('js', function (){
gulp.src('./index.js', {read: false})
.pipe(gulpBrowserify({
transform: ['./transforms/youTransform.js'],  // 这里存放你自定义的transform函数
extensions: ['.less']
}))
.pipe(gulpRename('output.js'))
.pipe(gulp.dest('./'))
});

gulp.start('js');

youTransform.js

var through = require('through2');  // stream 库
var less = require('less');        // less
var inlineurl = require('less-plugin-inline-urls');    // less 转base64插件

module.exports = function (file, props) {
if (!/\.less$/.test(file)){
return through();    // 检测到不是 less 文件就返回一个空的stream
}
return through(function (buf, enc, next) {
var self = this;
less.render(buf.toString('utf8'), {
plugins: [inlineurl],
filename: file,    // filename如果不设置，会出问题。而且不报错，需要注意
}, function(err, output) {
if (err) {
next(err)  // 捕获错误，通过 next 把err传到steam对象上
}
else {
self.push('module.exports = ' + JSON.stringify(output.css));  // 输出转换后的内容
next();
}
});
}, function (next){
next();    // _flushFunction 是必须写的，否则browserify无法知道transform已经完成
})

// 通过上面的next捕获到的err，在这里进行错误处理
.on('error', function (err){
console.log(err.message + ' -filename: ' + err.filename + ' -index: ' + err.index + ' -line: ' + err.line)
});
};