Grunt.js (0.3.x) ile birden çok CSS ve JavaScript dosyası nasıl birleştirilir ve küçültülür

Not: Bu soru yalnızca Grunt 0.3.x ile ilgilidir ve referans için bırakılmıştır. En son Grunt 1.x sürümüyle ilgili yardım için lütfen bu sorunun altındaki yorumuma bakın.

Şu anda, CSS ve JavaScript dosyalarını önce birleştirmek ve sonra küçültmek için otomatik bir derleme işlemi kurmak için Grunt.js'yi kullanmaya çalışıyorum.

JavaScript dosyalarımı başarıyla birleştirip küçültebildim, ancak grunt'ı her çalıştırdığımda, dosyaların üzerine yazmak yerine yalnızca dosyaya ekleniyor gibi görünüyor.

CSS'nin küçültülmesi ve hatta birleştirilmesine gelince, bunu henüz yapamadım!

Homurtu CSS modüllerinin açısından ben kullanarak denedi consolidate-css, grunt-css& cssminama boşuna. Bunları nasıl kullanacağımı kafama takamadım!

Dizin yapım aşağıdaki gibidir (tipik bir node.js uygulamasıdır):

• app.js
• grunt.js
• /public/index.html
• / public / css / [çeşitli css dosyaları]
• / public / js / [çeşitli javascript dosyaları]

Grunt.js dosyam şu anda uygulamamın kök klasöründe nasıl göründüğü:

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: '<json:package.json>',
    concat: {
      dist: {
        src: 'public/js/*.js',
        dest: 'public/js/concat.js'
      }
    },
    min: {
      dist: {
        src: 'public/js/concat.js',
        dest: 'public/js/concat.min.js'
      }
    },
    jshint: {
      options: {
        curly: true,
        eqeqeq: true,
        immed: true,
        latedef: true,
        newcap: true,
        noarg: true,
        sub: true,
        undef: true,
        boss: true,
        eqnull: true,
        node: true
      },
      globals: {
        exports: true,
        module: false
      }
    },
    uglify: {}
  });

  // Default task.
  grunt.registerTask('default', 'concat min');

};

Özetlemek gerekirse iki soruyla ilgili yardıma ihtiyacım var:

1. Klasörün altındaki tüm css dosyalarımı /public/css/tek bir dosyada nasıl birleştirip küçültebilirim?main.min.css
2. Neden grunt.js birleştirilmiş ve minified javascript dosyaları ekleme üzerinde duruyor concat.jsve concat.min.jsaltında /public/js/yerine onlara komut her zaman üzerine yazma gruntçalıştırılır?

5 Temmuz 2016'da güncellendi - Grunt 0.3.x'ten Grunt 0.4.x veya 1.x'e yükseltme

Grunt.jsiçindeki yeni bir yapıya taşındı Grunt 0.4.x(dosya artık çağrıldı Gruntfile.js). İçin bir derleme süreci kurma konusunda yardım için açık kaynak projem Grunt.js Skeleton'a bakın Grunt 1.x.

Bir noktadan Grunt 0.4.xdiğerine geçmek Grunt 1.x pek çok büyük değişiklik getirmemelidir .

concat.js, concatgörevin kaynak dosyalarına dahil ediliyor public/js/*.js. concat.jsTekrar birleştirmeden önce kaldıran (dosya varsa) bir göreve sahip olabilirsiniz, birleştirmek istediğiniz dosyaları ve sıralarını açıkça tanımlayan bir dizi geçirin veya projenizin yapısını değiştirin.

İkincisini yapıyorsanız, tüm kaynaklarınızı ./srcve yerleşik dosyalarınızı./dest

src
├── css
│   ├── 1.css
│   ├── 2.css
│   └── 3.css
└── js
    ├── 1.js
    ├── 2.js
    └── 3.js

Ardından concat görevinizi ayarlayın

concat: {
  js: {
    src: 'src/js/*.js',
    dest: 'dest/js/concat.js'
  },
  css: {
    src: 'src/css/*.css',
    dest: 'dest/css/concat.css'
  }
},

Senin dk görev

min: {
  js: {
    src: 'dest/js/concat.js',
    dest: 'dest/js/concat.min.js'
  }
},

Yap- min bir değiştirme ihtiyacı böylece görev, UglifyJS kullanır. Grunt-css'i oldukça iyi buldum . Kurduktan sonra grunt dosyanıza yükleyin

grunt.loadNpmTasks('grunt-css');

Ve sonra kur

cssmin: {
  css:{
    src: 'dest/css/concat.css',
    dest: 'dest/css/concat.min.css'
  }
}

Kullanımın yerleşik min.

defaultGörevinizi şu şekilde değiştirin:

grunt.registerTask('default', 'concat min cssmin');

Şimdi koşmak gruntistediğiniz sonuçları verecektir.

dest
├── css
│   ├── concat.css
│   └── concat.min.css
└── js
    ├── concat.js
    └── concat.min.js

Burada jQuery ve Modernizr gibi büyük projelerde birleştirilmiş şeyler için kullanılan çok, ÇOK ilginç bir teknikten bahsetmek istiyorum.

Bu projelerin her ikisi de tamamen requirejs modülleriyle geliştirildi (bunu github depolarında görebilirsiniz) ve daha sonra çok akıllı bir birleştirici olarak requirejs optimize ediciyi kullanıyorlar. İlginç olan, gördüğünüz gibi, ne jQuery'nin ne Modernizr'in çalışmasına ihtiyaç duymamasıdır ve bu, kodlarındaki needj'lerden kurtulmak için requirejs sözdizimsel ritüelini sildikleri için olur. Böylece, requirejs modülleriyle geliştirilmiş bağımsız bir kitaplık elde ederler! Bu sayede, diğer avantajlarının yanı sıra kütüphanelerinin kesikli yapılarını gerçekleştirebilirler.

Tüm requirejs iyileştirici ile birleştirme ilgilenenler için, kontrol Bu yayını

Ayrıca sürecin tüm standart metnini özetleyen küçük bir araç var: standart metnini özetleyen AlbanilJS

Yukarıdaki cevaba katılıyorum. Ama işte CSS sıkıştırmanın başka bir yolu.

YUI sıkıştırıcı kullanarak CSS'nizi birleştirebilirsiniz :

module.exports = function(grunt) {
  var exec = require('child_process').exec;
   grunt.registerTask('cssmin', function() {
    var cmd = 'java -jar -Xss2048k '
      + __dirname + '/../yuicompressor-2.4.7.jar --type css '
      + grunt.template.process('/css/style.css') + ' -o '
      + grunt.template.process('/css/style.min.css')
    exec(cmd, function(err, stdout, stderr) {
      if(err) throw err;
    });
  });
}; 

Concat paketini eklemenize gerek yok, bunu cssmin ile şu şekilde yapabilirsiniz:

cssmin : {
      options: {
            keepSpecialComments: 0
      },
      minify : {
            expand : true,
            cwd : '/library/css',
            src : ['*.css', '!*.min.css'],
            dest : '/library/css',
            ext : '.min.css'
      },
      combine : {
        files: {
            '/library/css/app.combined.min.css': ['/library/css/main.min.css', '/library/css/font-awesome.min.css']
        }
      }
    }

Ve js için, şu şekilde uglify kullanın:

uglify: {
      my_target: {
        files: {
            '/library/js/app.combined.min.js' : ['/app.js', '/controllers/*.js']
        }
      }
    }

Sanırım daha otomatik, grunt görev bize tüm bu işleri sizin için yapmaya özen gösterin, sadece biraz konfigürasyona ihtiyacınız var:

https://stackoverflow.com/a/33481683/1897196