J'ai essayé de modifier la sortie de Browserify dans Gulp, mais cela ne fonctionne pas.
gulpfile.js
var browserify = require('browserify');
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var source = require('vinyl-source-stream');
gulp.task('browserify', function() {
return browserify('./source/scripts/app.js')
.bundle()
.pipe(source('bundle.js'))
.pipe(uglify()) // ???
.pipe(gulp.dest('./build/scripts'));
});
Si je comprends bien, je ne peux pas le faire par étapes comme ci-dessous. Dois-je créer un tuyau pour conserver la séquence?
gulp.task('browserify', function() {
return browserify('./source/scripts/app.js')
.bundle()
.pipe(source('bundle.js'))
.pipe(uglify()) // ???
.pipe(gulp.dest('./source/scripts'));
});
gulp.task('scripts', function() {
return grunt.src('./source/scripts/budle.js')
.pipe(uglify())
.pipe(gulp.dest('./build/scripts'));
});
gulp.task('default', function(){
gulp.start('browserify', 'scripts');
});
Vous êtes en fait assez proche, sauf pour une chose:
source()
avec vinyl-buffer
parce que gulp-uglify
(et la plupart des plugins gulp) fonctionne sur des objets de fichier vinyle tamponnés Donc, vous auriez ceci à la place
var browserify = require('browserify');
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
gulp.task('browserify', function() {
return browserify('./source/scripts/app.js')
.bundle()
.pipe(source('bundle.js')) // gives streaming vinyl file object
.pipe(buffer()) // <----- convert from streaming to buffered vinyl file object
.pipe(uglify()) // now gulp-uglify works
.pipe(gulp.dest('./build/scripts'));
});
Ou, vous pouvez choisir d'utiliser vinyl-transform
_ à la place, qui s'occupe des deux streaming et buffered des objets de fichier vinyle pour vous, comme si
var gulp = require('gulp');
var browserify = require('browserify');
var transform = require('vinyl-transform');
var uglify = require('gulp-uglify');
gulp.task('build', function () {
// use `vinyl-transform` to wrap the regular ReadableStream returned by `b.bundle();` with vinyl file object
// so that we can use it down a vinyl pipeline
// while taking care of both streaming and buffered vinyl file objects
var browserified = transform(function(filename) {
// filename = './source/scripts/app.js' in this case
return browserify(filename)
.bundle();
});
return gulp.src(['./source/scripts/app.js']) // you can also use glob patterns here to browserify->uglify multiple files
.pipe(browserified)
.pipe(uglify())
.pipe(gulp.dest('./build/scripts'));
});
Les deux recettes ci-dessus vont réaliser la même chose.
C’est à peu près ce que vous voulez faire pour gérer vos tubes (conversion entre les flux NodeJS classiques et la lecture en continu d’objets de fichier vinyle et d’objets de fichier vinyle mis en mémoire tampon)
Edit: J'ai écrit un article plus long sur l'utilisation de gulp + browserify et différentes approches à l'adresse suivante: https://medium.com/@sogko/gulp-browserify-the-gulp-y-way-bb359b3f962
Deux approches supplémentaires, tirées de la page vinyl-source-stream NPM:
Donné:
var source = require('vinyl-source-stream');
var streamify = require('gulp-streamify');
var browserify = require('browserify');
var uglify = require('gulp-uglify');
var gulpify = require('gulpify');
var gulp = require('gulp');
Approche 1 Utiliser gulpify (obsolète)
gulp.task('gulpify', function() { gulp.src('index.js') .pipe(gulpify()) .pipe(uglify()) .pipe(gulp.dest('./bundle.js')); });
Approche 2 Utilisation de vinyl-source-stream
gulp.task('browserify', function() {
var bundleStream = browserify('index.js').bundle();
bundleStream
.pipe(source('index.js'))
.pipe(streamify(uglify()))
.pipe(gulp.dest('./bundle.js'));
});
L'un des avantages de la deuxième approche est qu'elle utilise directement l'API Browserify, ce qui signifie que vous n'avez pas à attendre que les auteurs de gulpify mettent à jour la bibliothèque avant de pouvoir.
vous pouvez essayer browserify transformer glify .