Как упростить вывод с помощью Browserify в Gulp?

112

Я пытался скрыть вывод Browserify в Gulp, но это не сработало.

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'));
});

Насколько я понимаю, я не могу сделать это по шагам, как показано ниже. Нужно ли делать в одну трубу, чтобы сохранить последовательность?

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');
});
Ник Терентьев
источник

Ответы:

186

Вы действительно подошли довольно близко, за исключением одного:

  • вам необходимо преобразовать объект потокового винилового файла, заданный с source()помощью, vinyl-bufferпотому что gulp-uglify(и большинство плагинов gulp) работает с буферизованными объектами винилового файла

Так что вместо этого у вас будет это

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'));
});

Или вы можете использовать vinyl-transformвместо этого, который заботится как о потоковых, так и о буферизованных объектах виниловых файлов для вас, например

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'));
});

Оба приведенных выше рецепта позволят добиться одного и того же.

Это как раз о том, как вы хотите управлять своими каналами (преобразование между обычными потоками NodeJS и потоковыми объектами виниловых файлов и буферизованными объектами виниловых файлов)

Изменить: я написал более длинную статью об использовании gulp + browserify и различных подходах по адресу: https://medium.com/@sogko/gulp-browserify-the-gulp-y-way-bb359b3f9623

Хафиз Исмаил
источник
Решение с преобразованием винила приводит к созданию расширенного пакета для каждого файла в глобусе, а не одного пакета для всех файлов. @ hafiz-ismail как можно использовать подход винилового преобразования для создания единого пакета?
Brian Leathem
@BrianLeathem: каждый файл из шаблона glob будет отдельным основным файлом записи для просмотра, и каждый файл записи будет иметь отдельный пакет. Если вы хотите объединить все выходные данные пакета в один файл, вы можете использовать его gulp-concatи добавить в конец конвейера gulp. Это будет эквивалентом работы browserify <options> > single-file.jsв терминале. Сообщите мне, если я отвечу на ваш вопрос. Ура!
Хафиз Исмаил
11
Хм, я думаю, второй пример с vinyl-transformуже не работает, а ?!
yckart
По поводу винилового преобразования: github.com/substack/node-browserify/issues/1198
Эгон Олие
Как сохранить уведомления об авторских правах в этом сценарии?
Pankaj
12

Два дополнительных подхода, взятых со страницы NPM винилового источника :

Дано:

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');

Подход 1 Использование gulpify (устарело)

gulp.task('gulpify', function() {
  gulp.src('index.js')
    .pipe(gulpify())
    .pipe(uglify())
    .pipe(gulp.dest('./bundle.js'));
});

Подход 2 Использование винилового источника-потока

gulp.task('browserify', function() {
  var bundleStream = browserify('index.js').bundle();

  bundleStream
    .pipe(source('index.js'))
    .pipe(streamify(uglify()))
    .pipe(gulp.dest('./bundle.js'));
});

Одним из преимуществ второго подхода является то, что он напрямую использует API Browserify, а это означает, что вам не нужно ждать, пока авторы gulpify обновят библиотеку, прежде чем вы сможете.

Дрю Ноукс
источник
"gulpify устарел в пользу использования" browserify "непосредственно в сочетании с модулем" vinyl-source-stream "или" gulp-browserify ", если вы хотите использовать плагин" Источник: npmjs.org/package/gulpify Также обратите внимание, что "gulp-browserify" находится в черном списке.
ZeeCoder 01
@ZeeCoder, что вы подразумеваете под черным списком?
Giszmo 05
4
@Giszmo Я имею в виду следующее: github.com/gulpjs/plugins/blob/master/src/blackList.json
ZeeCoder
Второй мне пригодился. Работает как шарм. :) Спасибо!
dnvtrn
3

вы можете попробовать browserify transform uglifyify .

Eihero
источник
3
Важные примечания: похоже, что uglifyify не поддерживается и застрял в Uglify v1, который устарел.
Эван Кэрролл,
2
Uglifyify в настоящее время использует Uglify v2. Возможно, он обновляется не так часто, но это не кажется необходимым, поскольку это просто зависит от пакета uglify-js.
inta