गुलप में ब्राउजरिफ़ के साथ आउटपुट को कैसे छोटा करें?

Question

मैंने गुल्प में ब्राउजराइज़ के आउटपुट को छोटा करने की कोशिश की, लेकिन यह काम नहीं करता है।

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

Answer 1

आप वास्तव में एक चीज को छोड़कर, बहुत करीब हो गए:

• आप बदलने की आवश्यकता स्ट्रीमिंग विनाइल फ़ाइल द्वारा दिए गए वस्तु source()के साथ vinyl-bufferक्योंकि gulp-uglify(और सबसे घूंट प्लगइन्स) पर काम करता बफ़र विनाइल फ़ाइल वस्तुओं

तो आप इसके बजाय यह होगा

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

उपरोक्त दोनों व्यंजनों को एक ही चीज प्राप्त होगी।

इसका सिर्फ यह है कि आप अपने पाइप को कैसे प्रबंधित करना चाहते हैं (नियमित एनडीजेजे धाराओं के बीच परिवर्तित करना और विनाइल फ़ाइल ऑब्जेक्ट और बफ़र्ड फ़ाइल फ़ाइलों को स्ट्रीमिंग करना)

संपादित करें: मैंने gulp + Browserify और अलग-अलग तरीकों का उपयोग करने के बारे में एक लंबा लेख लिखा है: https://medium.com/@sogko/gulp-browserify-the-gulp-y-way-bb359b3f9623

Comments

सभी फ़ाइलों के लिए एकल बंडल के बजाय ग्लोब में प्रत्येक फ़ाइल के लिए एक broswerified बंडल में विनाइल-ट्रांसफ़ॉर्म समाधान होता है। @ हाफ़िज़-इस्माइल विनाइल-ट्रांसफ़ॉर्म दृष्टिकोण का उपयोग एक बंडल बनाने के लिए कैसे किया जा सकता है?

— ब्रायन लीथेम

@BrianLeathem: ग्लोब पैटर्न से प्रत्येक फ़ाइल ब्राउजर के लिए एक अलग मुख्य प्रविष्टि फ़ाइल होगी, और प्रत्येक प्रविष्टि फ़ाइल का परिणाम अलग बंडल होगा। यदि आप बंडल आउटपुट के सभी को एक ही फाइल में सम्‍मिलित करना चाहते हैं, तो आप gulp-concatइसे अपने गॉलप पाइपलाइन के अंत में उपयोग और जोड़ सकते हैं । जो browserify <options> > single-file.jsटर्मिनल में चलने के बराबर होगा । मुझे पता है अगर मैं आपके सवाल का जवाब दिया। चीयर्स!

— हाफिज इस्माइल

हम्म, मुझे लगता है कि दूसरा उदाहरण vinyl-transformअब और काम नहीं करता है, एह ?!

— yckart

विनाइल-ट्रांसफॉर्म के बारे में: github.com/substack/node-browserify/issues/1198

— Egon Olieux

इस परिदृश्य में कॉपीराइट नोटिस कैसे संरक्षित करें?

— पंकज

Answer 2

विनाइल-सोर्स-स्ट्रीम एनपीएम पृष्ठ से लिए गए दो अतिरिक्त दृष्टिकोण :

दिया हुआ:

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

दूसरे दृष्टिकोण का एक लाभ यह है कि यह सीधे Browserify API का उपयोग करता है, जिसका अर्थ है कि आपको लाइब्रेरी को अपडेट करने से पहले gulpify के लेखकों का इंतजार नहीं करना होगा।

Comments

"gulpify का उपयोग कर के पक्ष में पदावनत किया गया है" विनाइल स्रोत धारा "के साथ संयोजन में सीधे" browserify "मॉड्यूल, या" घूंट-browserify स्रोत "यदि आप एक प्लगइन का उपयोग करना चाहते हैं": npmjs.org/package/gulpify यह भी ध्यान दें कि "gulp-browserify" blaclist पर है।

— ज़ीकोडर

@ZeeCoder आपको ब्लैकलिस्ट से क्या मतलब है?

— गिज़्मो

@Giszmo मेरा यह मतलब है: github.com/gulpjs/plugins/blob/master/src/blackList.json

— ZeeCoder

दूसरा मेरे लिए उपयोगी था। एक जादू की तरह काम करता है। :) Tks!

— dnvtrn

Answer 3

आप ब्राउज़र को बदसूरत रूप देने की कोशिश कर सकते हैं ।

Comments

महत्वपूर्ण नोट, ऐसा लगता है कि बदसूरत है अस्वाभाविक और Uglify v1 पर अटक गया है जो कि पदावनत है।

— इवान कैरोल

Uglifyify वर्तमान में Uglify v2 का उपयोग करता है। हो सकता है कि यह बार-बार अपडेट न किया जाए, लेकिन यह जरूरी नहीं लगता क्योंकि यह सिर्फ कुरूपि-जस पैकेज पर निर्भर करता है।

— इंट