গুলপিতে ব্রাউজারফি দিয়ে আউটপুটকে কীভাবে সাজানো যায়?

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 + ব্রাউজরিফি এবং বিভিন্ন পদ্ধতির ব্যবহার সম্পর্কে দীর্ঘতর নিবন্ধ লিখেছি: https://medium.com/@sogko/gulp-browserify-the-gulp-y-way-bb359b3f9623

Comments

ভিনাইল-ট্রান্সফর্ম সমাধানটি সমস্ত ফাইলের জন্য একক বান্ডিলের পরিবর্তে গ্লোব-র প্রতিটি ফাইলের ব্রোসওয়ারফাইড বান্ডেলে ফলাফল দেয়। @ হাফিজ-ইসমাইল কীভাবে একক বান্ডিল তৈরি করতে ভিনাইল-ট্রান্সফর্ম পদ্ধতির ব্যবহার করতে পারে?

— ব্রায়ান লেইথেম

@ ব্রায়ানলিথাম: গ্লোব প্যাটার্ন থেকে প্রাপ্ত প্রতিটি ফাইল ব্রাউজারিফাইয়ের জন্য পৃথক প্রধান এন্ট্রি ফাইল হবে এবং প্রতিটি এন্ট্রি ফাইলের জন্য পৃথক বান্ডিল হবে। আপনি যদি সমস্ত বান্ডিল আউটপুটগুলিকে একটি একক ফাইলে সংযুক্ত করতে চান gulp-concatতবে আপনি এটি ব্যবহার করতে পারেন এবং এটি আপনার গাল্প পাইপলাইনের শেষে যুক্ত করতে পারেন । এটি browserify <options> > single-file.jsটার্মিনাল চলমান সমতুল্য হবে । আমি যদি আপনার প্রশ্নের উত্তর দিয়েছি তবে আমাকে জানান। চিয়ার্স!

— হাফিজ ইসমাইল

হুম, আমি মনে করি এর সাথে দ্বিতীয় উদাহরণটি vinyl-transformআর কাজ করে না, তাই ?!

— ইয়াকার্ট

ভিনাইল-ট্রান্সফর্ম সম্পর্কিত: 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 গুলপাইফায় ব্যবহার করে ( অবমূল্যায়িত )

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

দ্বিতীয় পদ্ধতির একটি সুবিধা হ'ল এটি ব্রাউজরিফাই এপিআই সরাসরি ব্যবহার করে, যার অর্থ আপনার পক্ষে গ্যালপিফাইয়ের লেখকদের লাইব্রেরি আপডেট করার আগে অপেক্ষা করার দরকার নেই you

Comments

"গলপিফাই" ব্রিনসরিফাই "সরাসরি" ভিনাইল-উত্স-স্ট্রিম "মডিউলের সাথে ব্যবহারের পক্ষে বা যদি আপনি একটি প্লাগইন ব্যবহার করতে চান তবে" গল্প-ব্রাউজারিফাই " অবহিত করা হয়েছে " উত্স: npmjs.org/package/gulpify এছাড়াও নোট করুন যে "গাল্প-ব্রাউজারিফাই" ব্ল্যাক্লিস্টে রয়েছে।

— জিকোডার 10

@ জিকোডার ব্ল্যাকলিস্ট বলতে কী বোঝ?

— গিজমো

@ গিজমো আমার অর্থ এটি: github.com/gulpjs/plugins/blob/master/src/blackList.json

— জিকোডার

দ্বিতীয়টি আমার জন্য দরকারী ছিল। একটি যাদুমন্ত্র মত কাজ করে. :) টিক্স!

— dnvtrn

Answer 3

আপনি ব্রাউজারফাই ট্রান্সফর্ম uglifify চেষ্টা করতে পারেন ।

Comments

গুরুত্বপূর্ণ নোটগুলি, মনে হচ্ছে uglififyটি অব্যবহৃত এবং Uglif v1 এ অবরুদ্ধ যা আটকেছে।

— ইভান ক্যারল 21

উগলিফাইফাই বর্তমানে ইউগ্লিফাই ভি 2 ব্যবহার করে। সম্ভবত এটি প্রায়শই আপডেট হয় না তবে এটি কেবল uglif-js প্যাকেজের উপর নির্ভর করে বলে এটি প্রয়োজনীয় বলে মনে হচ্ছে না।

— ইটা