Tugas lima orang yang anda menang ' t mahu terlepas!

menyelaraskan aliran kerja frontend anda dengan lima tugas grunt penting

Grunt, pelari tugas yang popular, dengan ketara memudahkan tugas pembangunan frontend berulang. Artikel ini menyoroti lima plugin grunt kuat yang meningkatkan kecekapan dan kualiti kod. Walaupun pelari tugas lain seperti Gulp wujud (lihat "Pengenalan kepada Gulp.js" kami untuk maklumat lanjut), ekosistem plugin Grunt yang luas tetap menjadi aset yang berharga. Baru untuk mengerang? Semak "Automatikkan Tugas Berulang Dengan Grunt" atau Panduan Bermula Bermula Rasmi.

Takeaways utama:

• grunt-autoprefixer: mengautomasikan prefixing vendor dalam CSS, menghapuskan proses manual yang membosankan untuk menambah awalan untuk keserasian pelayar.
• grunt-uncss: Mengeluarkan CSS yang tidak digunakan, mengurangkan saiz fail dan meningkatkan masa beban halaman. Perhatikan batasannya: ia tidak mengendalikan kelas ditambah secara dinamik melalui JavaScript atau interaksi pengguna.
• grunt-concurrent: menjalankan pelbagai tugas grunt secara serentak, secara drastik mengurangkan masa binaan keseluruhan, terutama memberi manfaat kepada pemproses multi-teras.
• grunt-wiredep (dahulunya grunt-bower-install): mengautomasikan kemasukan komponen bower ke HTML anda, menjimatkan masa dan usaha ketika menguruskan kebergantungan.
• : grunt-modernizr menghasilkan binaan moden yang disesuaikan, termasuk hanya ciri -ciri yang digunakan dalam projek anda, meminimumkan saiz perpustakaan.

1.

: Menonjolkan awalan vendor grunt-autoprefixer

Menulis CSS sering melibatkan juggling sifat eksperimen dan awalan vendor.

, berdasarkan Perpustakaan AutoPrefixer, memudahkan ini. Ia memasangkan CSS anda dan menambah awalan yang diperlukan berdasarkan pangkalan data CAN. Pilihan grunt-autoprefixer membolehkan anda menentukan penyemak imbas dan versi sasaran, memastikan hanya awalan yang diperlukan disertakan. browsers

Konfigurasi sampel:

grunt.initConfig({
  autoprefixer: {
    options: {
      browsers: ['last 2 versions', 'ie 8', 'ie 9', 'Opera 12.1']
    },
    dist: {
      src: 'src/css/main.css',
      dest: 'dest/css/main-prefixed.css'
    }
  }
});

Proses konfigurasi ini

, mengeluarkan versi prefixed kepada main.css, mensasarkan dua versi pelayar utama, ditambah IE 8, 9, dan Opera 12.1. main-prefixed.css 2.

: tipis CSS anda

grunt-uncss

, yang dikuasakan oleh UNCSS, menghilangkan CSS yang tidak digunakan dari projek anda. Ini tidak ternilai apabila menggunakan kerangka CSS, kerana ia dapat mengurangkan saiz fail CSS akhir, yang membawa kepada muat turun yang lebih cepat.

grunt-uncss

Had:

Tidak dapat mengesan kelas CSS ditambah secara dinamik melalui JavaScript atau interaksi pengguna. Gunakan pilihan (menerima nama kelas literal atau corak regex) untuk menangani sebahagiannya. Pemilih kompleks mungkin juga menyebabkan kesilapan; mengasingkan ini dalam stylesheets berasingan. grunt-uncss

3.

: Pengurusan Ketergantungan tanpa usaha grunt-wiredep

Bower (Pengurus Ketergantungan JavaScript/CSS) memerlukan kemasukan manual komponen ke HTML anda.

mengautomasikan ini, menyuntik kebergantungan berdasarkan konfigurasi anda. grunt-wiredep

Konfigurasi Asas:

grunt.initConfig({
  autoprefixer: {
    options: {
      browsers: ['last 2 versions', 'ie 8', 'ie 9', 'Opera 12.1']
    },
    dist: {
      src: 'src/css/main.css',
      dest: 'dest/css/main-prefixed.css'
    }
  }
});

Ini menyuntik kebergantungan ke

. Selepas berlari index.html, HTML anda akan termasuk garis seperti: grunt-wiredep.

4. grunt-modernizr: Mengoptimumkan Modernizr

Modernizr membantu mengesan sokongan penyemak imbas untuk ciri -ciri moden. grunt-modernizr Membuat binaan moden yang disesuaikan, termasuk hanya ciri -ciri yang digunakan oleh projek anda, menghasilkan perpustakaan yang lebih kecil dan lebih cekap.

Contoh Konfigurasi:

grunt.initConfig({
  wiredep: {
    app: {
      src: ['index.html']
    }
  }
});

5. grunt-concurrent: pemprosesan selari untuk kelajuan

untuk projek -projek dengan banyak tugas, grunt-concurrent menjalankannya secara serentak, dengan ketara mempercepatkan proses membina, terutamanya pada mesin yang berkuasa.

Contoh:

grunt.initConfig({
  modernizr: {
    dist: {
      devFile: 'path/to/modernizr.js',
      outputFile: 'path/to/distribution-folder/custom-modernizr.js',
      files: {
        src: ['path/to/scripts/**/*.js', 'path/to/styles/**/*.css']
      }
    }
  }
});

ini berjalan copy dan autoprefixer secara serentak di bawah tugas test, dan concat dan uncss secara serentak di bawah tugas build.

Pemilihan ini menyediakan asas yang kukuh untuk meningkatkan aliran kerja berasaskan grunt anda. Terokai ekosistem plugin Grunt yang luas untuk mengetahui lebih banyak alat untuk menyelaraskan proses pembangunan anda.

Atas ialah kandungan terperinci Tugas lima orang yang anda menang ' t mahu terlepas!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!