iLe*_*ing 7 coffeescript browserify gulp
如何启用源映射?我这样做:
var browserify = require("gulp-browserify")
gulp.task("compile:client", function() {
gulp.src("src/client/app.coffee", {
read: false
})
.pipe(browserify({
debug: true // THIS DOES NOTHING :(
transform: ['coffeeify'],
extensions: ['.coffee']
}))
.pipe(rename('app.js'));
});
Run Code Online (Sandbox Code Playgroud)
哎呀...出于某种原因,在gulub-browserify 的github页面上,它说:PLUGIN是BLACKLISTED.
我不明白......我觉得如何使用浏览器和我的coffeescript文件呢?
UPD:哈!我错了:debug选项有效.它只是将源地图信息粘贴到输出javascript文件中.真棒.问题仍然悬而未决:为什么这个插件被列入黑名单?
abo*_*get 11
我通过抓取网络找到了解决方案,它看起来像这样:
var browserify = require('browserify');
var gulp = require('gulp');
var exorcist = require('exorcist');
var source = require('vinyl-source-stream');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps'); // https://www.npmjs.org/package/gulp-sourcemaps
gulp.task('browserify', function(){
return browserify({
entries: ['./file1.js'],
debug: true
})
.bundle()
.pipe(exorcist('./output.js.map'))
.pipe(source('output.js'))
.pipe(gulp.dest('./'));
});
gulp.task('together', ['browserify'], function() {
return gulp.src('output.js')
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(concat('all-with-maps.js'))
.pipe(uglify())
.pipe(sourcemaps.write('.', {addComment: true /* the default */, sourceRoot: '/src'}))
.pipe(gulp.dest('dist'));
});
Run Code Online (Sandbox Code Playgroud)
确保你安装了最新版本的browserify(我今天使用5.10.0)..你曾经需要传递{debug: true}给bundle()电话..但它已经browserify()直接转移到了.
关于黑名单:我们认为最好browserify()直接使用,就像我们在这里做的那样.它看起来不需要插件.
看看这里:
https://github.com/gulpjs/plugins/issues/47
和这里:
https://github.com/gulpjs/gulp/issues/369
更新:
我不认为下面的内容是“混乱的”。
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var bundler = browserify('./js/index.js');
gulp.task('compile', function(){
return bundler.bundle({standalone: 'noscope'})
.pipe(source('noscope.js'))
.pipe(gulp.dest('./dist'));
});
Run Code Online (Sandbox Code Playgroud)