গুল্প টু কনটেনেট এবং ইউগ্লিফাই ফাইলগুলি ব্যবহার করা

Question

আমি গুল্প এর সাথে ব্যবহার করার চেষ্টা করছি:

1. 3 নির্দিষ্ট জাভাস্ক্রিপ্ট ফাইল নিন, সেগুলি একত্রিত করুন, তারপরে ফলাফলটি কোনও ফাইলে সংরক্ষণ করুন (concat.js)
2. এই সংক্ষিপ্ত ফাইলটি নিন এবং এটি uglif / minify করুন, তারপরে ফলাফলটি অন্য একটি ফাইলে সংরক্ষণ করুন (uglify.js)

আমার এখন পর্যন্ত নিম্নলিখিত কোড আছে

    var gulp = require('gulp'),
        gp_concat = require('gulp-concat'),
        gp_uglify = require('gulp-uglify');

    gulp.task('js-fef', function(){
        return gulp.src(['file1.js', 'file2.js', 'file3.js'])
            .pipe(gp_concat('concat.js'))
            .pipe(gp_uglify())
            .pipe(gulp.dest('js'));
    });

    gulp.task('default', ['js-fef'], function(){});

তবে, উগলিফ অপারেশনটি কাজ করছে বলে মনে হচ্ছে না বা কোনও কারণে ফাইলটি তৈরি করা হয়নি।

এটি ঘটানোর জন্য আমার কী করা দরকার?

Comments

এটি এখনও দেখতে না পেয়ে অবাক, তাই আমি দ্রুতই মন্তব্য করতে চাই যে লক্ষ্যটি কিছুটা নিজের পক্ষে গুল্পের দর্শনের বিরুদ্ধে যায়। মধ্যস্থতাকারী ফাইলগুলি লেখার কাজ করার গ্রুর্ট পদ্ধতি। গুলপ গতি উন্নত করতে স্ট্রিমগুলি প্রচার করে। তবে আমি নিশ্চিত যে জিজ্ঞাসা করা লোকটির তার কারণগুলি ছিল :)।

— বার্ট

আমি জানি এটি একটি পুরানো থ্রেড, তবে আমি খুব সহজেই একটি ইয়ামল ফাইল ব্যবহার করে এই জাতীয় কাজ করতে একটি এনপিএম মডিউল তৈরি করেছি। এটি দেখুন: github.com/Stnaire/gulp-yaml-packages ।

— স্টেনায়ার

Answer 1

দেখা যাচ্ছে যে আমাকে gulp-rename'uglifications' এর আগে প্রথমে কনক্যাট্যানেটেড ফাইলটি ব্যবহার করতে এবং আউটপুট দেওয়ার দরকার ছিল । কোডটি এখানে:

var gulp = require('gulp'),
    gp_concat = require('gulp-concat'),
    gp_rename = require('gulp-rename'),
    gp_uglify = require('gulp-uglify');

gulp.task('js-fef', function(){
    return gulp.src(['file1.js', 'file2.js', 'file3.js'])
        .pipe(gp_concat('concat.js'))
        .pipe(gulp.dest('dist'))
        .pipe(gp_rename('uglify.js'))
        .pipe(gp_uglify())
        .pipe(gulp.dest('dist'));
});

gulp.task('default', ['js-fef'], function(){});

gruntএটি থেকে আসা প্রথমে কিছুটা বিভ্রান্তিকর ছিল তবে এটি এখন উপলব্ধি হয়ে যায়। আমি আশা করি এটি gulpnoobs সাহায্য করবে ।

এবং, যদি আপনার সোর্সম্যাপের প্রয়োজন হয় তবে আপডেট হওয়া কোডটি এখানে রয়েছে:

var gulp = require('gulp'),
    gp_concat = require('gulp-concat'),
    gp_rename = require('gulp-rename'),
    gp_uglify = require('gulp-uglify'),
    gp_sourcemaps = require('gulp-sourcemaps');

gulp.task('js-fef', function(){
    return gulp.src(['file1.js', 'file2.js', 'file3.js'])
        .pipe(gp_sourcemaps.init())
        .pipe(gp_concat('concat.js'))
        .pipe(gulp.dest('dist'))
        .pipe(gp_rename('uglify.js'))
        .pipe(gp_uglify())
        .pipe(gp_sourcemaps.write('./'))
        .pipe(gulp.dest('dist'));
});

gulp.task('default', ['js-fef'], function(){});

দেখুন নি: শ্বাসে-sourcemaps অপশন এবং কনফিগারেশনের উপর আরো অনেক কিছুর জন্য।

Comments

এফওয়াইআই, আপনি কনক্যাট.জেএস এর আগে একটি একক উদ্ধৃতি চিহ্ন মিস করছেন। আপনার রিটার্ন স্টেটমেন্টের পরে লাইনটি gulp.task.pipe(gp_concat('concat.js'))

— হ'ল

সমস্ত ফাইল তৈরি করা হয়, তবে, ডিবাগারে আমি এখনও সংক্ষিপ্ত সংস্করণটি দেখতে পাচ্ছি। এর কারণ কী হতে পারে? মানচিত্রের ফাইলটির নামটি সঠিকভাবে দেওয়া হয়েছে এবং এর ইউআরএল দ্বারা অ্যাক্সেস করা যেতে পারে।

— মেগলিও

এটি আসল উত্সগুলি বিভিন্ন ট্যাবে থাকা ব্রাউজারগুলির উপর নির্ভর করে। আপনার সেখানে ব্রেকপয়েন্ট রাখতে হবে।

— przemcio

আমাদের পুনরায় নামকরণের দরকার কেন তা আমার পক্ষে পরিষ্কার নয়? এটি কি বাগ বা?

— przemcio

@ প্রজেমসিও আমার ক্ষেত্রে আমি প্রক্রিয়াটির প্রতিটি পদক্ষেপে সমস্ত ফাইলের একটি রেকর্ড চেয়েছিলাম। তবে, আপনি যে সমস্ত বিষয় বিবেচনা করেন তা হ'ল চূড়ান্ত মিনিফাইড ফাইল, তবে আপনি অবশ্যই গুল্প ফাইলটি আরও ছোট করতে পারবেন

— ওবিনওয়ান হিল

Answer 2

আমার গুল্প ফাইলটি একটি চূড়ান্ত সংকলিত-বান্ডিল-মিনি.জেএস উত্পাদন করে, আশা করি এটি কাউকে সহায়তা করবে।

//Gulpfile.js

var gulp = require("gulp");
var watch = require("gulp-watch");

var concat = require("gulp-concat");
var rename = require("gulp-rename");
var uglify = require("gulp-uglify");
var del = require("del");
var minifyCSS = require("gulp-minify-css");
var copy = require("gulp-copy");
var bower = require("gulp-bower");
var sourcemaps = require("gulp-sourcemaps");

var path = {
    src: "bower_components/",
    lib: "lib/"
}

var config = {
    jquerysrc: [
        path.src + "jquery/dist/jquery.js",
        path.src + "jquery-validation/dist/jquery.validate.js",
        path.src + "jquery-validation/dist/jquery.validate.unobtrusive.js"
    ],
    jquerybundle: path.lib + "jquery-bundle.js",
    ngsrc: [
        path.src + "angular/angular.js",
         path.src + "angular-route/angular-route.js",
         path.src + "angular-resource/angular-resource.js"
    ],
    ngbundle: path.lib + "ng-bundle.js",

    //JavaScript files that will be combined into a Bootstrap bundle
    bootstrapsrc: [
        path.src + "bootstrap/dist/js/bootstrap.js"
    ],
    bootstrapbundle: path.lib + "bootstrap-bundle.js"
}

// Synchronously delete the output script file(s)
gulp.task("clean-scripts", function (cb) {
    del(["lib","dist"], cb);
});

//Create a jquery bundled file
gulp.task("jquery-bundle", ["clean-scripts", "bower-restore"], function () {
    return gulp.src(config.jquerysrc)
     .pipe(concat("jquery-bundle.js"))
     .pipe(gulp.dest("lib"));
});

//Create a angular bundled file
gulp.task("ng-bundle", ["clean-scripts", "bower-restore"], function () {
    return gulp.src(config.ngsrc)
     .pipe(concat("ng-bundle.js"))
     .pipe(gulp.dest("lib"));
});

//Create a bootstrap bundled file
gulp.task("bootstrap-bundle", ["clean-scripts", "bower-restore"], function     () {
    return gulp.src(config.bootstrapsrc)
     .pipe(concat("bootstrap-bundle.js"))
     .pipe(gulp.dest("lib"));
});


// Combine and the vendor files from bower into bundles (output to the Scripts folder)
gulp.task("bundle-scripts", ["jquery-bundle", "ng-bundle", "bootstrap-bundle"], function () {

});

//Restore all bower packages
gulp.task("bower-restore", function () {
    return bower();
});

//build lib scripts
gulp.task("compile-lib", ["bundle-scripts"], function () {
    return gulp.src("lib/*.js")
        .pipe(sourcemaps.init())
        .pipe(concat("compiled-bundle.js"))
        .pipe(gulp.dest("dist"))
        .pipe(rename("compiled-bundle.min.js"))
        .pipe(uglify())
        .pipe(sourcemaps.write("./"))
        .pipe(gulp.dest("dist"));
});

Comments

দুর্দান্ত উদাহরণ @ ওয়াচওয়ার্ড এটি আমি যা খুঁজছিলাম ঠিক তা ছিল, খুব পরিষ্কার সরল নকশা।

— ফাইটো

Answer 3

সমাধান ব্যবহার করে gulp-uglify, gulp-concatএবং gulp-sourcemaps। এটি এমন একটি প্রকল্প যা আমি কাজ করছি from

gulp.task('scripts', function () {
    return gulp.src(scripts, {base: '.'})
        .pipe(plumber(plumberOptions))
        .pipe(sourcemaps.init({
            loadMaps: false,
            debug: debug,
        }))
        .pipe(gulpif(debug, wrapper({
            header: fileHeader,
        })))
        .pipe(concat('all_the_things.js', {
            newLine:'\n;' // the newline is needed in case the file ends with a line comment, the semi-colon is needed if the last statement wasn't terminated
        }))
        .pipe(uglify({
            output: { // http://lisperator.net/uglifyjs/codegen
                beautify: debug,
                comments: debug ? true : /^!|\b(copyright|license)\b|@(preserve|license|cc_on)\b/i,
            },
            compress: { // http://lisperator.net/uglifyjs/compress, http://davidwalsh.name/compress-uglify
                sequences: !debug,
                booleans: !debug,
                conditionals: !debug,
                hoist_funs: false,
                hoist_vars: debug,
                warnings: debug,
            },
            mangle: !debug,
            outSourceMap: true,
            basePath: 'www',
            sourceRoot: '/'
        }))
        .pipe(sourcemaps.write('.', {
            includeContent: true,
            sourceRoot: '/',
        }))
        .pipe(plumber.stop())
        .pipe(gulp.dest('www/js'))
});

এটি আপনার সমস্তকে একত্রিত করে এবং সংকুচিত করে scripts, এগুলিকে ডেকে আনা একটি ফাইলে রাখে all_the_things.js। ফাইলটি একটি বিশেষ লাইনের সাথে শেষ হবে

//# sourceMappingURL=all_the_things.js.map

যা আপনার ব্রাউজারটিকে সেই মানচিত্রের ফাইলটি সন্ধান করতে বলে, যা এটি লিখেও দেয়।

Answer 4

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

gulp.task('create-vendor', function () {
var files = [
    'bower_components/q/q.js',
    'bower_components/moment/min/moment-with-locales.min.js',
    'node_modules/jstorage/jstorage.min.js'
];

return gulp.src(files)
    .pipe(concat('vendor.js'))
    .pipe(gulp.dest('scripts'))
    .pipe(uglify())
    .pipe(gulp.dest('scripts'));
});

আপনার সমাধান কাজ করে না কারণ আপনার কনক্যাট প্রক্রিয়া শেষে ফাইল সংরক্ষণ করতে হবে এবং তারপরে uglify করে আবার সংরক্ষণ করতে হবে। কনক্যাট এবং uglify এর মধ্যে আপনার ফাইলটির নাম পরিবর্তন করার দরকার নেই।

Comments

আমি বলব যে এটি বিকাশকারীদের কী করবেন এবং ঝাল ব্যবহার করার সময় তাদের কী প্রয়োজন হবে না তা স্থির করে তা বিকাশকারীদের পূর্বধারণী। আমার ক্ষেত্রে, আমি প্রতিটি পদক্ষেপে ফাইলগুলির নাম পরিবর্তন করতে চেয়েছিলাম। অন্যরা অন্যথায় পছন্দ করতে পারে।

— ওবিনওয়ান হিল

অবশ্যই, আপনি সিদ্ধান্ত নিতে পারেন আপনার জন্য সেরা বিকল্পটি কী। আমি বুঝতে পেরেছি, নীচের উত্তরটি আপনাকে ফাইলের নাম পরিবর্তন করতে হবে, আমি কেবল বলেছিলাম যে আপনার প্রয়োজন নেই (এটি বাধ্যতামূলক নয়), দুঃখিত যদি আমি কিছু বিভ্রান্তি তৈরি করি তবে।

— মিলোস

Answer 5

জুন 10 2015: এর লেখক থেকে নোট gulp-uglifyjs:

অগ্রাহ্য: এই প্লাগইনটি কালো তালিকাভুক্ত করা হয়েছে কারণ এটি গল্প-কনক্যাট ব্যবহার না করে ফাইলগুলি সংশ্লেষ করার জন্য উগলিফির উপর নির্ভর করে যা "এটি একটি কাজ করা উচিত" দৃষ্টান্তকে ভঙ্গ করে। আমি যখন এই প্লাগইনটি তৈরি করেছি, তখন ঝাল দিয়ে কাজ করার জন্য উত্স মানচিত্র পাওয়ার কোনও উপায় ছিল না, তবে এখন একই লক্ষ্য অর্জনের জন্য একটি গল্প-সোর্সম্যাপস প্লাগইন রয়েছে। gulp-uglifyjs এখনও দুর্দান্ত কাজ করে এবং উগ্লিফাই কার্যকরকরণের উপর খুব দানাদার নিয়ন্ত্রণ দেয়, আমি আপনাকে এখন একটি মাথা তুলে দিচ্ছি যে এখন অন্যান্য বিকল্প রয়েছে।

---

ফেব্রুয়ারী 18 2015: gulp-uglify এবং gulp-concatউভয় gulp-sourcemapsএখনকার সাথে সুন্দরভাবে কাজ করে । কেবলমাত্র newLineবিকল্পটি সঠিকভাবে সেট করার জন্য নিশ্চিত করুন gulp-concat; আমি সুপারিশ \n;।

---

মূল উত্তর (ডিসেম্বর 2014): ব্যবহার করুন নি: শ্বাসে-uglifyjs পরিবর্তে। gulp-concatঅগত্যা নিরাপদ নয়; এটি সঠিকভাবে আধা-কলোনগুলি অনুসরণ করতে হবে। gulp-uglifyউত্স মানচিত্র সমর্থন করে না। আমি যে প্রকল্পে কাজ করছি তার একটি স্নিপেট এখানে:

gulp.task('scripts', function () {
    gulp.src(scripts)
        .pipe(plumber())
        .pipe(uglify('all_the_things.js',{
            output: {
                beautify: false
            },
            outSourceMap: true,
            basePath: 'www',
            sourceRoot: '/'
        }))
        .pipe(plumber.stop())
        .pipe(gulp.dest('www/js'))
});

Comments

তাই না? gulp-uglify অবশ্যই উত্স মানচিত্রকে সমর্থন করে: github.com/floridoo/gulp-sourcemaps/wiki/…

— মিস্টার ওহ

@ মিস্টারওহ তা নিশ্চিত নয় যে এটি লেখার সময় হয়েছে, বা যদি এটি হয় তবে সম্ভবত gulp-concatতা করেনি ( gulp-uglifyআপনাকে একাধিক ফাইল মাইনফাই করতে দেয় না যাতে আপনাকে প্রথমে সম্মতি জানাতে হবে)। এছাড়াও, ডিফল্টরূপে এমন gulp-concatএকটি ব্যবহার \r\nকরে, যা আপনার জেএস ফাইলগুলি সঠিকভাবে শেষ করতে না পারলে সমস্যা সৃষ্টি করতে পারে। তবে হ্যাঁ, এখন সমর্থন রয়েছে, সেই রুটটিকে আরও নমনীয় হিসাবে চালানো সম্ভবত ভাল।

— এমপেন

@ মার্ক - আপনি যদি গল্প-সোর্স ম্যাপগুলির সাথে ওবিনওয়ানের উত্তরের সাথে ইনলাইনটিতে কাজ করে সমাধানটি পোস্ট করেন তবে প্রশংসা করবেন। আমি এটি কাজ করে বলে মনে হচ্ছে না।

— নাইটওয়েল 888

@ নাইটওয়েল ৮৮৮ ঠিক আছে, আসলে আপনি যদি জিজ্ঞাসা করে থাকেন তবে এটি ইনলাইন সোর্স ম্যাপ তৈরি করে না; এটি এখনও একটি পৃথক ফাইল।

— এমপেন

gulp-uglifyjs এছাড়াও এখন প্রস্থান করা হয়েছে। গল্প-উগ্লিফাই প্লাগইন ব্যবহার করা এখন পর্যাপ্ত হওয়া উচিত। একটি আপ-টু-ডেট সমাধানের জন্য অন্যান্য উত্তরগুলি দেখুন।

— নিল মনরো

Answer 6

আমরা অনুরূপ কিছু করতে নীচের কনফিগারেশন ব্যবহার করছি

    var gulp = require('gulp'),
    async = require("async"),
    less = require('gulp-less'),
    minifyCSS = require('gulp-minify-css'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat'),
    gulpDS = require("./gulpDS"),
    del = require('del');

// CSS & Less
var jsarr = [gulpDS.jsbundle.mobile, gulpDS.jsbundle.desktop, gulpDS.jsbundle.common];
var cssarr = [gulpDS.cssbundle];

var generateJS = function() {

    jsarr.forEach(function(gulpDSObject) {
        async.map(Object.keys(gulpDSObject), function(key) {
            var val = gulpDSObject[key]
            execGulp(val, key);
        });

    })
}

var generateCSS = function() {
    cssarr.forEach(function(gulpDSObject) {
        async.map(Object.keys(gulpDSObject), function(key) {
            var val = gulpDSObject[key];
            execCSSGulp(val, key);
        })
    })
}

var execGulp = function(arrayOfItems, dest) {
    var destSplit = dest.split("/");
    var file = destSplit.pop();
    del.sync([dest])
    gulp.src(arrayOfItems)
        .pipe(concat(file))
        .pipe(uglify())
        .pipe(gulp.dest(destSplit.join("/")));
}

var execCSSGulp = function(arrayOfItems, dest) {
    var destSplit = dest.split("/");
    var file = destSplit.pop();
    del.sync([dest])
    gulp.src(arrayOfItems)
        .pipe(less())
        .pipe(concat(file))
        .pipe(minifyCSS())
        .pipe(gulp.dest(destSplit.join("/")));
}

gulp.task('css', generateCSS);
gulp.task('js', generateJS);

gulp.task('default', ['css', 'js']);

নমুনা গুলপডিএস ফাইল নীচে রয়েছে:

{

    jsbundle: {
        "mobile": {
            "public/javascripts/sample.min.js": ["public/javascripts/a.js", "public/javascripts/mobile/b.js"]
           },
        "desktop": {
            'public/javascripts/sample1.js': ["public/javascripts/c.js", "public/javascripts/d.js"]},
        "common": {
            'public/javascripts/responsive/sample2.js': ['public/javascripts/n.js']
           }
    },
    cssbundle: {
        "public/stylesheets/a.css": "public/stylesheets/less/a.less",
        }
}