Grunt - Menginstal

Bab ini memberikan prosedur langkah demi langkah tentang cara menginstal Grunt di sistem Anda.

Persyaratan Sistem untuk Grunt

Operating System - Lintas platform
Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera

Pemasangan Grunt

Step 1- Kami membutuhkan NodeJ untuk menjalankan Grunt. Untuk mengunduh NodeJs, buka tautannyahttps://nodejs.org/en/, Anda akan melihat layar seperti di bawah ini -

Unduh versi Fitur Terbaru dari file zip.

Step 2- Selanjutnya, jalankan setup untuk menginstal NodeJs di komputer Anda.

Step 3- Selanjutnya, Anda perlu mengatur variabel lingkungan .

Path User Variable

Klik kanan My Computer.
Pilih Properties.
Selanjutnya, pilih Advanced tab dan klik Environment Variables.

Di bawah jendela Variabel Lingkungan , klik dua kali pada PATH seperti yang ditunjukkan di layar.

Anda akan mendapatkan jendela Edit Variabel Pengguna seperti yang ditunjukkan. Tambahkan jalur folder NodeJs di bidang Nilai Variabel sebagai C: \ Program Files \ nodejs \ node_modules \ npm . Jika jalur sudah disetel untuk file lain, maka Anda perlu meletakkan titik koma (;) setelah itu dan menambahkan jalur NodeJs seperti yang ditunjukkan di bawah ini -

Pada akhirnya, klik tombol OK .

System Variable

Di bawah Variabel sistem , klik dua kali pada Path seperti yang ditunjukkan pada layar berikut.

Anda akan mendapatkan jendela Edit System Variable seperti yang ditunjukkan. Tambahkan jalur folder NodeJs di bidang Nilai Variabel sebagai C: \ Program Files \ nodejs \ dan klik OK seperti yang ditunjukkan di bawah ini -

Step 4 - Untuk menginstal grunt di sistem Anda, Anda perlu menginstal antarmuka baris perintah (CLI) Grunt secara global seperti yang ditunjukkan di bawah ini -

npm install -g grunt-cli

Menjalankan perintah di atas akan menempatkan perintah grunt di jalur sistem Anda, yang membuatnya dijalankan dari direktori mana pun.

Menginstal grunt-cli tidak menginstal runner tugas Grunt. Peran grunt-cli adalah menjalankan versi Grunt yang telah diinstal di sebelah Gruntfile . Ini memungkinkan mesin menginstal beberapa versi Grunt secara bersamaan.

Step 5 - Sekarang, kita akan membuat configuration files untuk menjalankan Grunt.

package.json

File package.json ditempatkan di direktori root proyek, di samping Gruntfile . The package.json digunakan untuk benar menjalankan setiap ketergantungan terdaftar setiap kali Anda menjalankan perintahnpm install di folder yang sama dengan package.json.

T Basic package.json dapat dibuat dengan mengetikkan perintah berikut di command prompt -

npm init

File package.json dasar akan seperti yang ditunjukkan di bawah ini -

{
   "name": "tutorialspoint",
   "version": "0.1.0",
   "devDependencies": {
      "grunt-contrib-jshint": "~0.10.0",
      "grunt-contrib-nodeunit": "~0.4.1",
      "grunt-contrib-uglify": "~0.5.0"
   }
}

Anda dapat menambahkan Grunt dan gruntplugins ke dalam file pacakge.json yang ada melalui perintah berikut -

npm install <module> --save-dev

Pada perintah di atas, <module> mewakili modul yang akan diinstal secara lokal. Perintah di atas juga akan menambahkan <module> ke devDependencies secara otomatis.

Misalnya, perintah berikut akan menginstal Grunt versi terbaru dan menambahkannya ke devDependencies Anda -

npm install grunt --save-dev

Gruntfile.js

File Gruntfile.js digunakan untuk menentukan konfigurasi kita untuk Grunt. Ini adalah tempat di mana pengaturan kita akan ditulis. File Gruntfile.js dasar seperti yang ditunjukkan di bawah ini -

// our wrapper function (required by grunt and its plugins)
// all configuration goes inside this function
module.exports = function(grunt) {
   // CONFIGURE GRUNT
   grunt.initConfig({
      // get the configuration info from package.json file
      // this way we can use things like name and version (pkg.name)
      pkg: grunt.file.readJSON('package.json'),

      // all of our configuration goes here
      uglify: {
         // uglify task configuration
         options: {},
         build: {}
      }
   });

   // log something
   grunt.log.write('Hello world! Welcome to Tutorialspoint!!\n');

   // Load the plugin that provides the "uglify" task.
   grunt.loadNpmTasks('grunt-contrib-uglify');

   // Default task(s).
   grunt.registerTask('default', ['uglify']);
};