Menulis skrip binaan yang hebat dengan Grunt

Panduan ini menunjukkan cara mengkonfigurasi Grunt, sistem binaan yang kuat, untuk projek web moden. Setelah selesai, gruntfile anda akan mengautomasikan tugas -tugas termasuk: penyalinan fail, membina pembersihan, kompilasi stylus dengan prefixing vendor, kompilasi kopi, CSS dan minifikasi JavaScript, kompilasi jed, membina semula secara automatik pada perubahan sumber, dan pelayan pembangunan tempatan.

Konsep Utama

persediaan grunt:
• Pasang node.js, npm, dan cli grunt. Mulakan projek anda sebagai pakej NPM, menentukan kebergantungan dalam untuk menguruskan plugin grunt. package.json
Konfigurasi Tugas:
• Gunakan untuk menentukan tugas (mis., Penyalinan fail, pembersihan, stylus/coffeeescript/jade compilation). Subtasks membolehkan pelbagai konfigurasi dalam satu tugas. Automasi & Pengoptimuman: grunt.initConfig plugin leverage seperti AutoPrefixer (awalan vendor CSS), UglifyJS (minifikasi JavaScript), dan CSSMIN (CSS mampatan) untuk meningkatkan prestasi.
• aliran kerja pembangunan: pelaksanaan untuk membina semula secara automatik pada perubahan sumber, dan
untuk pelayan pembangunan yang boleh diakses rangkaian.
• Tugas Custom: grunt-contrib-watch Buat tugas tersuai melalui grunt-contrib-connect ke operasi rantai (mis., Pembersihan, penyusun, penyalinan), mempromosikan modulariti dan penyelenggaraan.
• Bermula grunt.registerTask

Pasang node.js dan npm. Pasang Grunt CLI secara global:

. Buat fail dengan kandungan berikut:

Ini mentakrifkan projek anda dan kebergantungannya. Jalankan npm install -g grunt-cli untuk memasangnya. package.json

{
  "name": "grunt_tutorial",
  "description": "Grunt setup for web development.",
  "author": "Landon Schropp (http://landonschropp.com)",
  "dependencies": {
    "grunt": "0.x.x",
    "grunt-autoprefixer": "0.2.x",
    "grunt-contrib-clean": "0.5.x",
    "grunt-contrib-coffee": "0.7.x",
    "grunt-contrib-connect": "0.4.x",
    "grunt-contrib-copy": "0.4.x",
    "grunt-contrib-cssmin": "0.6.x",
    "grunt-contrib-jade": "0.8.x",
    "grunt-contrib-jshint": "0.6.x",
    "grunt-contrib-stylus": "0.8.x",
    "grunt-contrib-uglify": "0.2.x",
    "grunt-contrib-watch": "0.5.x"
  },
  "engine": "node >= 0.10"
}

Menyalin fail dan membina pembersihan

npm install

Mengekalkan kod sumber dan membina fail secara berasingan. Buat

:

ini menyalin fail dari

ke Gruntfile.js dan membersihkan direktori

. Jalankan

module.exports = function(grunt) {
  grunt.initConfig({
    copy: {
      build: {
        cwd: 'source',
        src: [ '**', '!**/*.styl', '!**/*.coffee', '!**/*.jade' ], // Exclude compiled files
        dest: 'build',
        expand: true
      },
    },
    clean: {
      build: { src: [ 'build' ] },
      stylesheets: { src: [ 'build/**/*.css', '!build/application.css' ] },
      scripts: { src: [ 'build/**/*.js', '!build/application.js' ] },
    },
  });

  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-clean');

  grunt.registerTask('build', ['clean:build', 'copy']);
};

.

source build (bahagian yang selebihnya yang memperincikan stylus, autoprefixer, minifikasi CSS, coffeescript, uglify, jade, watch, dan pelayan pembangunan akan mengikuti struktur coretan dan penjelasan kod yang sama, mencerminkan input asal tetapi dengan perubahan frasa kecil Untuk mencapai pengertian. build grunt build Kesimpulan

Panduan yang diselaraskan ini menyediakan asas untuk membina proses membina berasaskan grunt yang mantap dan cekap. Terokai ekosistem plugin Grunt yang luas untuk menyesuaikan aliran kerja anda lagi.

Atas ialah kandungan terperinci Menulis skrip binaan yang hebat dengan Grunt. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!