gulp.js + browserify: Dinamik olarak geliştirmeye özel dosyalar oluştur

Question

Geliştirmeye özgü bazı hata ayıklama koduna sahip bir uygulama var. Şu anda, tüm geliştirme kodu, dosyanın en üstünde dev adlı bir değişken tarafından korunmaktadır. İşte benim uygulamanın ne yaptığı bir örnek:

var dev = true; 

if (dev) { 
    console.log("Hello developer"); 
} else { 
    console.log("Hello production"); 
} 

Başvurumu dağıtmak için gitmek

, elle false true dev değişken formunu değiştirmek zorunda. Bu berbat.

Elle haddelenmiş yapılardan gulp.js'ye geçişin ortasındayım ve bu geliştirmeyi üretim oluşturma sorununa temiz bir şekilde çözmek istiyorum. Aşağıdaki düşünüyorum:

// Inside main.js 
var dev = require('./isdev'); 
if (dev) //... 

// Inside isdev.js: 
module.exports = true; 

Şimdi, üretim için oluştururken, bunun yerine elle false için dev bayrak ayarlamasını, ben module.exports = true; den module.exports = false; için isdev.js değiştirmek istiyor. Benim özel soru, gulp developmentdev = true ile bir dosya üretir ve gulp productiondev = false ile bir dosya üretir gibi gulp otomatikleştirin.

Answer 1

Burada merak edenler için bir güncelleme var.İlk

, bir options.js vardır:

exports.dev = false; 

Ayrıca sahip bir options_dev.js:

gulpfile.js içi

exports.dev = true; 

, I girişi bağımsız değişkenler ayrıştırır aşağıdaki kodu vardır:

// Parse the arguments. Use `gulp --prod` to build a production extension 
var argv = parseArgs(process.argv.slice(2)); 
var dev = !argv['prod']; // Whether to build a development extension or not 

Son olarak, browserify için pipettiğimde, Aşağıdaki:

var resolve = require('browser-resolve'); 
// ... 
.pipe(browserify({ 
    debug: dev, 
    resolve: function(pkg, opts) { 
    // Replace options.js with options_dev.js if this is a dev build 
    if (dev) { 
     opts.modules['./options'] = 'src/options_dev.js'; 
    } 
    return resolve.apply(this, arguments); 
    } 
})) 

sihirli geliştirme kurar için dinamik options_dev ile ./options takas, özel çözmek işlevini kullanarak olur. Tarayıcıda bulunan dokümanlar:

Özel bir opts.resolve() işlevine göz atabilir veya varsayılan olarak tarayıcı çözümünü kullanabilirsiniz.

gulp'u çalıştırdığımızda, bir geliştirme sürümü oluşturuyoruz. gulp --prod'u çalıştırdığımızda, bir üretim sürümü oluşturuyoruz. require('./options').dev'un değeri, sunucu uç noktaları vb. Gibi şeyleri dinamik olarak değiştirmemize olanak tanır.

Answer 2

Bunu yaptığım gibi, komut satırında komut satırında ortam değişkenini ayarlamaktır. (Bash gibi bir ortamda) node.js CLI ile bunu yapmanın bir örneği olacaktır:

Kodunuzdaki Sonra

ENV=dev node 

> process.env.ENV 
'dev' 

, bunu yapabilirsiniz:

yudum Yani

var dev = process.env.ENV === 'dev' 

, sen kullanabilirsiniz:

ENV=dev gulp <task name> 

aşağıdaki pasajı ile bu test etti ve çalışır:

gulp.task('dev', function(){ 
    if (process.env.ENV === 'dev') 
    console.log("IT WORKED"); 
    else 
    console.log("NO DICE"); 
}); 

Düzenleme:

Haklısınız binanın önce dosyaya isdev için çevreyi yazabiliriz:

var fs = require('fs'); 
gulp.task('build', function(){ 
    if (process.env.ENV === 'dev') 
    fs.writeFileSync('isdev', 'module.exports = true'); 
    else 
    fs.writeFileSync('isdev', 'module.exports = false'); 

    // kick off build 
}); 

Şimdi, doğru değeri inşa Paketteki herhangi require çağrı için isdev bulunacaktır . Bunu diğer belirtilen ortamlara da (veya diğer yapılandırma bayraklarına) genişletebilirsiniz.