कॉनपैनेट और उगलिफाई फ़ाइलों के लिए गल्प का उपयोग करना

Question

मैं कोशिश कर रहा हूँ:

1. 3 विशिष्ट जावास्क्रिप्ट फ़ाइलें लें, उन्हें संक्षिप्त करें, फिर परिणाम को एक फ़ाइल में सहेजें (concat.js)
2. इस संक्षिप्त फ़ाइल को लें और इसे छोटा / छोटा करें, फिर परिणाम को किसी अन्य फ़ाइल (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(){});

हालाँकि, uglify ऑपरेशन काम नहीं कर रहा है, या फ़ाइल किसी कारण से उत्पन्न नहीं हुई है।

ऐसा करने के लिए मुझे क्या करने की आवश्यकता है?

Comments

अभी तक इसे नहीं देखा, इसलिए मैं बस जल्दी से टिप्पणी करना चाहता हूं कि गोल अपने आप में कुछ हद तक गुलप के दर्शन के खिलाफ है। मध्यस्थ फ़ाइलों का लेखन कार्य का ग्रंट तरीका अधिक है। गति को बेहतर बनाने के लिए गल्प धाराओं को बढ़ावा देता है। लेकिन मुझे यकीन है कि पूछने वाले को उसके कारण :) थे।

— बार्ट

मुझे पता है कि यह एक पुराना धागा है, लेकिन मैंने एक ypm फ़ाइल का उपयोग करके इस तरह के काम को आसानी से करने के लिए एक npm मॉड्यूल बनाया है। इसे देखें: github.com/Stnaire/gulp-yaml-packages ।

— स्टैनियर

Answer 1

यह पता चला है कि मुझे उपयोग करने की जरूरत है gulp-renameऔर 'अतिक्रमण' से पहले सबसे पहले समवर्ती फ़ाइल का उत्पादन। यहाँ कोड है:

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पहले तो थोड़ा भ्रमित था लेकिन अब समझ में आता है। मुझे आशा है कि यह gulpनोब्स की मदद करता है ।

और, यदि आपको सोर्समैप्स की आवश्यकता है, तो यहां अद्यतन कोड है:

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(){});

विकल्पों और कॉन्फ़िगरेशन पर अधिक जानकारी के लिए gulp-sourcemaps देखें ।

Comments

FYI करें, आप concat.js से पहले एक एकल उद्धरण चिह्न याद कर रहे हैं। आपके रिटर्न स्टेटमेंट के बाद की रेखा इस प्रकार gulp.taskहोनी चाहिए:.pipe(gp_concat('concat.js'))

— एरिक जोर्गेनसन

सभी फाइलें जेनरेट होती हैं, हालांकि, डिबगर में मैं अभी भी मिनिफाईड वर्जन देखता हूं। क्या कारण हो सकता है? मानचित्र फ़ाइल को सही ढंग से नामित किया गया है और इसे इसके URL तक पहुँचा जा सकता है।

— मेगलियो

यह, ब्राउज़रों पर निर्भर करता है मूल स्रोत अलग-अलग टैब पर हैं। आपको वहां ब्रेकपॉइंट लगाने की जरूरत है।

— प्रिन्ज़िमियो

मेरे लिए यह स्पष्ट नहीं है कि हमें नाम बदलने की आवश्यकता क्यों है? यह एक बग है या?

— przemcio

@przemcio मेरे मामले में मुझे प्रक्रिया में प्रत्येक चरण पर सभी फाइलों का रिकॉर्ड चाहिए था। हालाँकि, अगर आप सभी के बारे में ध्यान देते हैं कि अंतिम की गई फ़ाइल है, तो आप निश्चित रूप से आगे भी gulp फ़ाइल को छोटा कर सकते हैं

— Obinwanne Hill

Answer 2

मेरी gulp फ़ाइल एक अंतिम संकलित-बंडल-min.js का उत्पादन करती है, आशा है कि यह किसी की मदद करता है।

//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

महान उदाहरण @wchoward यह वही था जो मैं देख रहा था, बहुत साफ सरल डिजाइन।

— फेटो

Answer 3

समाधान का उपयोग कर gulp-uglify, gulp-concatऔर gulp-sourcemaps। यह एक ऐसी परियोजना से है जिस पर मैं काम कर रहा हूं।

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

आपका समाधान काम नहीं करता है क्योंकि आपको फ़ाइल को कॉनकैट प्रक्रिया के बाद सहेजने और फिर कुरूप करने और फिर से सहेजने की आवश्यकता है। आपको कॉन्कैट और क्रुइलाइज़ के बीच फ़ाइल का नाम बदलने की आवश्यकता नहीं है।

Comments

मैं कहूंगा कि यह तय करने के लिए डेवलपर का विशेषाधिकार है कि वे गुल का उपयोग करते समय क्या करते हैं और क्या ज़रूरत नहीं है। मेरे मामले में, मैं प्रत्येक चरण में फ़ाइलों का नाम बदलना चाहता था। अन्य अन्यथा पसंद कर सकते हैं।

— ओबिनवान हिल

बेशक, आप तय कर सकते हैं कि आपके लिए सबसे अच्छा विकल्प क्या है। मैं समझ गया, नीचे दिया गया उत्तर कहता है कि आपको फ़ाइल का नाम बदलने की आवश्यकता है, मैंने सिर्फ यह कहा था कि आपको ज़रूरत नहीं है (यह अनिवार्य नहीं है), क्षमा करें यदि मैंने कुछ भ्रम किया है।

— मिलोस

Answer 5

10 जून 2015: के लेखक से नोट gulp-uglifyjs:

DEPRECATED: इस प्लगइन को ब्लैक लिस्टेड किया गया है क्योंकि यह Gulp-concat का उपयोग करने के बजाय फ़ाइलों को समेटने के लिए Uglify पर निर्भर करता है, जो "यह एक काम करना चाहिए" प्रतिमान को तोड़ता है। जब मैंने इस प्लगइन को बनाया था, तो gulp के साथ काम करने के लिए स्रोत मानचित्र प्राप्त करने का कोई तरीका नहीं था, हालांकि अब एक gulp-sourcemaps प्लगइन है जो समान लक्ष्य को प्राप्त करता है। gulp-uglifyjs अभी भी बहुत अच्छा काम करता है और Uglify निष्पादन पर बहुत दानेदार नियंत्रण देता है, मैं आपको केवल एक सिर दे रहा हूं जो अन्य विकल्प अब मौजूद हैं।

---

फरवरी 18 2015: gulp-uglify और gulp-concatदोनों gulp-sourcemapsअब साथ काम करते हैं। बस इसके लिए newLineविकल्प को सही ढंग से सेट करना सुनिश्चित करें gulp-concat; मैं सलाह देता हूं \n;।

---

मूल उत्तर (दिसंबर 2014): इसके स्थान पर गुल-कुल्फी का प्रयोग करें । 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/…

— Mister Oh

@ मिस्टरओह यह सुनिश्चित नहीं है कि यह लेखन के समय किया था, या यदि ऐसा किया, तो शायद gulp-concatनहीं किया ( gulp-uglifyआपको कई फ़ाइलों को संक्षिप्त नहीं करने देगा ताकि आपको पहले संक्षिप्त करना पड़े)। इसके अलावा, डिफ़ॉल्ट रूप से gulp-concatउपयोग करता है \r\n, जो आपकी जेएस फाइलें ठीक से समाप्त नहीं होने पर समस्या पैदा कर सकता है। लेकिन हाँ, अब जब इसका समर्थन है, तो उस मार्ग को उसके अधिक लचीले होने के रूप में जाना बेहतर होगा।

— एमपीएन

@ मर्क - सराहना करेंगे अगर आप समाधान को पोस्टपोन के साथ काम करेंगे, जो ओबिनवेन के जवाब के साथ इनलाइन काम करता है। मैं इसे काम कर पाने के लिए प्रतीत नहीं कर सकता।

— नाइटऑवल 88

@ NightOwl888 ठीक है , वास्तव में, अगर आप पूछ रहे थे कि इनलाइन सोर्समैप्स का उत्पादन नहीं करता है; यह अभी भी एक अलग फ़ाइल है।

— मपेन

गुलप-उच्छिष्ट भी अब अपवित्र है। बस gulp-uglify प्लगइन का उपयोग करना अब पर्याप्त होना चाहिए। अप-टू-डेट समाधान के लिए अन्य उत्तर देखें।

— नील मुनरो

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",
        }
}