使用 Gulp 输出缩小版本和非缩小版本
Output a minified version and non minified version with Gulp
我在 Gulpfile.js 中有这个捆绑器,它运行良好:
var compile = (watch) => {
var bundler = watchify(browserify('./src/index.js', { debug: true }).transform(babel));
var rebundle = () => {
bundler.bundle()
.on('error', function(err) { console.error(err); this.emit('end'); })
.pipe(source('lib.js'))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./dist/'));
};
if (watch) {
bundler.on('update', function() {
console.log('-> bundling...');
rebundle();
});
}
rebundle();
};
这给了我:arli.js 和 arli.js.map
但是当试图像这样丑化它时:
var compile = (watch) => {
var bundler = watchify(browserify('./src/index.js', { debug: true }).transform(babel));
var rebundle = () => {
bundler.bundle()
.on('error', function(err) { console.error(err); this.emit('end'); })
.pipe(source(lib.js))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./dist/'));
return gulp.src('./dist/lib.js')
.pipe(rename('lib.min.js'))
.pipe(sourcemaps.init())
.pipe(uglify({
preserveComments: 'license',
}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./dist/'));
};
if (watch) {
bundler.on('update', function() {
console.log('-> bundling...');
rebundle();
});
}
rebundle();
};
这给了我相同的两个文件,但如果我重复这个任务,它也会给我 lib.min.js 和 lib.min.js.map,因为第一次 lib.js 是不存在。
我试过 运行-sequence 但它也是一样的。
您可以尝试使用 end
回调吗?
var compile = (watch, done) => {
var bundler = watchify(browserify('./src/index.js', { debug: true }).transform(babel));
var rebundle = () => {
bundler.bundle()
.on('error', function(err) { console.error(err); this.emit('end'); })
.pipe(source(lib.js))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./dist/')).on('end', function () {
gulp.src('./dist/lib.js')
.pipe(rename('lib.min.js'))
.pipe(sourcemaps.init())
.pipe(uglify({
preserveComments: 'license',
}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./dist/')).on('end', function() {
done();
});
});
};
if (watch) {
bundler.on('update', function() {
console.log('-> bundling...');
rebundle();
});
}
rebundle();
};
我在 Gulpfile.js 中有这个捆绑器,它运行良好:
var compile = (watch) => {
var bundler = watchify(browserify('./src/index.js', { debug: true }).transform(babel));
var rebundle = () => {
bundler.bundle()
.on('error', function(err) { console.error(err); this.emit('end'); })
.pipe(source('lib.js'))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./dist/'));
};
if (watch) {
bundler.on('update', function() {
console.log('-> bundling...');
rebundle();
});
}
rebundle();
};
这给了我:arli.js 和 arli.js.map
但是当试图像这样丑化它时:
var compile = (watch) => {
var bundler = watchify(browserify('./src/index.js', { debug: true }).transform(babel));
var rebundle = () => {
bundler.bundle()
.on('error', function(err) { console.error(err); this.emit('end'); })
.pipe(source(lib.js))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./dist/'));
return gulp.src('./dist/lib.js')
.pipe(rename('lib.min.js'))
.pipe(sourcemaps.init())
.pipe(uglify({
preserveComments: 'license',
}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./dist/'));
};
if (watch) {
bundler.on('update', function() {
console.log('-> bundling...');
rebundle();
});
}
rebundle();
};
这给了我相同的两个文件,但如果我重复这个任务,它也会给我 lib.min.js 和 lib.min.js.map,因为第一次 lib.js 是不存在。
我试过 运行-sequence 但它也是一样的。
您可以尝试使用 end
回调吗?
var compile = (watch, done) => {
var bundler = watchify(browserify('./src/index.js', { debug: true }).transform(babel));
var rebundle = () => {
bundler.bundle()
.on('error', function(err) { console.error(err); this.emit('end'); })
.pipe(source(lib.js))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./dist/')).on('end', function () {
gulp.src('./dist/lib.js')
.pipe(rename('lib.min.js'))
.pipe(sourcemaps.init())
.pipe(uglify({
preserveComments: 'license',
}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./dist/')).on('end', function() {
done();
});
});
};
if (watch) {
bundler.on('update', function() {
console.log('-> bundling...');
rebundle();
});
}
rebundle();
};