Cara menggabungkan dan mengecilkan beberapa file CSS dan JavaScript dengan Grunt.js (0.3.x)

Catatan: Pertanyaan ini hanya relevan untuk Grunt 0.3.x dan telah ditinggalkan untuk referensi. Untuk bantuan dengan rilis Grunt 1.x terbaru, silakan lihat komentar saya di bawah pertanyaan ini.

Saat ini saya mencoba menggunakan Grunt.js untuk menyiapkan proses pembuatan otomatis untuk penggabungan pertama dan kemudian mengecilkan file CSS dan JavaScript.

Saya berhasil menggabungkan dan mengecilkan file JavaScript saya, meskipun setiap kali saya menjalankan grunt sepertinya hanya menambahkan ke file daripada menimpanya.

Adapun untuk mengecilkan atau bahkan menggabungkan CSS, saya belum dapat melakukan ini!

Dalam hal modul CSS grunt saya telah mencoba menggunakan consolidate-css, grunt-css& cssmintetapi tidak berhasil. Tidak bisa memikirkan cara menggunakannya!

Struktur direktori saya adalah sebagai berikut (menjadi aplikasi node.js yang khas):

• app.js
• grunt.js
• /public/index.html
• / public / css / [berbagai file css]
• / public / js / [berbagai file javascript]

Inilah file grunt.js saya saat ini di folder root aplikasi saya:

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

};

Jadi untuk meringkas, saya butuh bantuan dengan dua pertanyaan:

1. Misalnya, bagaimana menggabungkan dan mengecilkan semua file css saya di bawah folder /public/css/menjadi satu filemain.min.css
2. Mengapa grunt.js terus menambahkan ke file javascript yang digabungkan dan dikecilkan concat.jsdan di concat.min.jsbawah /public/js/alih-alih menimpanya setiap kali perintah gruntdijalankan?

Diperbarui 5 Juli 2016 - Mengupgrade dari Grunt 0.3.x ke Grunt 0.4.x atau 1.x

Grunt.jstelah pindah ke struktur baru di Grunt 0.4.x(file sekarang disebut Gruntfile.js). Silakan lihat proyek open source saya Grunt.js Skeleton untuk bantuan dalam menyiapkan proses pembuatan untuk Grunt 1.x.

Pindah dari Grunt 0.4.xke Grunt 1.x seharusnya tidak menimbulkan banyak perubahan besar .

concat.js disertakan dalam concatfile sumber tugas public/js/*.js. Anda dapat memiliki tugas yang menghapus concat.js(jika file ada) sebelum menggabungkan lagi, meneruskan array untuk secara eksplisit menentukan file mana yang ingin Anda gabungkan dan urutannya, atau mengubah struktur proyek Anda.

Jika melakukan yang terakhir, Anda dapat meletakkan semua sumber Anda di bawah ./srcdan file yang Anda bangun di bawah./dest

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

Kemudian atur tugas concat Anda

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

Tugas min Anda

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

Tugas min build-in menggunakan UglifyJS, jadi Anda perlu penggantinya. Saya menemukan grunt-css cukup bagus. Setelah menginstalnya, muat ke file grunt Anda

grunt.loadNpmTasks('grunt-css');

Dan kemudian atur

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

Perhatikan bahwa penggunaannya mirip dengan min built-in.

Ubah defaulttugas Anda menjadi

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

Sekarang, berlari gruntakan menghasilkan hasil yang Anda inginkan.

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

Saya ingin menyebutkan di sini teknik yang sangat, SANGAT menarik yang digunakan dalam proyek besar seperti jQuery dan Modernizr untuk hal-hal yang digabungkan.

Kedua proyek ini sepenuhnya dikembangkan dengan modul requirejs (Anda dapat melihatnya di repo github mereka) dan kemudian mereka menggunakan pengoptimal requirejs sebagai penggabung yang sangat cerdas. Hal yang menarik adalah bahwa, seperti yang Anda lihat, atau jQuery baik Modernizr tidak membutuhkan requirejs untuk bekerja, dan ini terjadi karena mereka menghapus ritual syntatic requirejs untuk menghilangkan requirejs dalam kode mereka. Jadi mereka berakhir dengan pustaka mandiri yang dikembangkan dengan modul requirejs! Berkat ini, mereka dapat melakukan pengembangan cutom pustaka mereka, di antara keuntungan lainnya.

Untuk semua yang tertarik dengan penggabungan dengan pengoptimal requirejs, lihat posting ini

Juga ada alat kecil yang mengabstraksi semua boilerplate proses: AlbanilJS

Saya setuju dengan jawaban di atas. Tapi di sini ada cara lain untuk kompresi CSS.

Anda dapat menggabungkan CSS Anda dengan menggunakan kompresor YUI :

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

Anda tidak perlu menambahkan paket concat, Anda dapat melakukannya melalui cssmin seperti ini:

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']
        }
      }
    }

Dan untuk js, gunakan uglify seperti ini:

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

Saya pikir mungkin lebih otomatis, tugas kasar usemin berhati-hatilah untuk melakukan semua pekerjaan ini untuk Anda, hanya perlu beberapa konfigurasi:

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