Farklı kurulumları için index.html üretmek zorunda Homurtu

SORU

13 EYLÜL 2012, PERŞEMBE

Farklı kurulumları için index.html üretmek zorunda Homurtu

Benim web uygulaması oluşturmak için bir araç olarak Homurtu kullanmaya çalışıyorum.

En az iki kurulumları yapmak istiyorum:

I. Kalkınma Kur- ayrı dosyalar, birleştirme olmadan, yükleme komut dosyaları

benim index.html bir şey gibi görünecektir:

<!DOCTYPE html>
<html>
    <head>
        <script src="js/module1.js" />
        <script src="js/module2.js" />
        <script src="js/module3.js" />
        ...
    </head>
    <body></body>
</html>

II. Üretim Kur- benim komut yüklemek ve tek bir dosyada, minified birleştirilmiş

bu doğrultuda index.html :

<!DOCTYPE html>
<html>
    <head>
        <script src="js/MyApp-all.min.js" />
    </head>
    <body></body>
</html>

Asıl soru şunasıl grunt'grunt dev grunt prod çalıştırdığımda yapılandırmasına bağlı olarak s? Bu index.html yapabilir miyim

Ya da belki de deniyorum yanlış yöne doğru ve daha kolay olurdu her zaman oluşturmak MyApp-all.min.js ama içeri de tüm komut dosyaları (sıralı) ya da bir yükleyici komut dosyası uyumsuz olarak yükler bu komut, ayrı dosyalar?

Ne oldu çocuklar?

CEVAP

20 ŞUBAT 2013, ÇARŞAMBA

Geçenlerde Grunt v0.4.0 Bu uyumlu görevler keşfetti:

grunt-preprocess

Süreç öncesi etmesinin önünü modülü etrafında görev homurdan.
grunt-env

Görev gelecekteki görevleri için ortam yapılandırma otomatikleştirme homurdan.

Aşağıda benim parçacıkları Gruntfile.js.

Kur ENV:

env : {

    options : {

        /* Shared Options Hash */
        //globalOption : 'foo'

    },

    dev: {

        NODE_ENV : 'DEVELOPMENT'

    },

    prod : {

        NODE_ENV : 'PRODUCTION'

    }

},

Süreç öncesi:

preprocess : {

    dev : {

        src : './src/tmpl/index.html',
        dest : './dev/index.html'

    },

    prod : {

        src : './src/tmpl/index.html',
        dest : '../<%= pkg.version %>/<%= now %>/<%= ver %>/index.html',
        options : {

            context : {
                name : '<%= pkg.name %>',
                version : '<%= pkg.version %>',
                now : '<%= now %>',
                ver : '<%= ver %>'
            }

        }

    }

}

Görevleri:

grunt.registerTask('default', ['jshint']);

grunt.registerTask('dev', ['jshint', 'env:dev', 'clean:dev', 'preprocess:dev']);

grunt.registerTask('prod', ['jshint', 'env:prod', 'clean:prod', 'uglify:prod', 'cssmin:prod', 'copy:prod', 'preprocess:prod']);

/src/tmpl/index.html dosyası şablonu (örnek):

<!-- @if NODE_ENV == 'DEVELOPMENT' -->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="../src/js/foo1.js"></script>
    <script src="../src/js/foo2.js"></script>
    <script src="../src/js/jquery.blah.js"></script>
    <script src="../src/js/jquery.billy.js"></script>
    <script src="../src/js/jquery.jenkins.js"></script>

<!-- @endif -->

<!-- @if NODE_ENV == 'PRODUCTION' -->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script src="http://cdn.foo.com/<!-- @echo name -->/<!-- @echo version -->/<!-- @echo now -->/<!-- @echo ver -->/js/<!-- @echo name -->.min.js"></script>

<!-- @endif -->

Benim Kur çoğu insandan daha farklı olduğuna eminim, ve yukarıdaki kullanışlılığını durumunuza bağlı olacaktır. Kod harika bir şey olsa benim için, Yeoman grunt-usemin ben şahsen ihtiyacım olandan daha sağlamdır.

NOT:Bensadeceyukarıda listelenen görevleri keşfetti bugün pek bir özelliği eksik olabilir ve/veya süreç yolda değişebilir. Şimdilik, sadeliği seviyorumveözellikler grunt-preprocess grunt-env sunmak zorunda. :)

Oca 2014 güncelleme:

Aşağı oyla motive ...

Bu cevap mutlaka benim ihtiyaçları için çalışan bir çözüm teklif eden bir Homurtu için birçok seçenek 0.4.x yoktu. Şimdi, ay sonra, o orada daha fazla seçenek olduğunu tahmin ediyorumolabilirburada yayınlanan ne var daha iyi olur.Ben hala kişisel olarak kullanmak ve kullanmaktan zevk olsa da, benim için bu tekniği oluştururGelecekteki okuyucular verilen ve tüm seçenekleri araştırma için diğer cevapları okumak için zaman almak istiyorum.Eğer daha iyi bir çözüm bulursanız lütfen cevap yazı burada.

Şubat 2014 güncelleme:

Emin değilim eğer olacak herhangi bir yardım için kimseye, ama ben oluşturulan this demo repository on GitHub gösteriyor ki tam bir (ve daha karmaşık Kur) kullanma tekniği(ler) İ ... ana hatlarıyla yukarıda.

Bunu Paylaş: