Bagaimana menginstal grunt dan bagaimana membangun skrip dengannya

Hai, saya mencoba menginstal Grunt di Windows 7 64 bit. Saya telah menginstal Grunt menggunakan perintah

 npm install -g grunt
 npm install -g grunt-cli

tetapi sekarang jika saya mencoba melakukannya grunt init, itu membuat saya salah -

Gruntfile yang valid tidak dapat ditemukan. Silakan lihat panduan memulai untuk informasi lebih lanjut tentang cara mengkonfigurasi grunt: http://gruntjs.com/getting-started Kesalahan fatal: Tidak dapat menemukan Gruntfile.

Tapi ketika saya melihat ke dalam folder grunt di sistem saya, Gruntfile.jsitu ada. dapatkah seseorang memandu saya cara menginstal grunt ini dengan benar dan cara menulis Script yang dibangun menggunakan grunt. Saya memiliki satu halaman HTML dan skrip java jika saya ingin membuat skrip menggunakan Grunt, bagaimana cara melakukannya?

Untuk menyiapkan build GruntJS berikut adalah langkah-langkahnya:

1. Pastikan Anda telah menyiapkan package.jsonatau menyiapkan yang baru:

   npm init
   

2. Instal Grunt CLI sebagai global:

   npm install -g grunt-cli
   

3. Instal Grunt di proyek lokal Anda:

   npm install grunt --save-dev
   

4. Instal Modul Grunt apa pun yang mungkin Anda perlukan dalam proses pembuatan. Demi contoh ini, saya akan menambahkan modul Concat untuk menggabungkan file bersama:

   npm install grunt-contrib-concat --save-dev
   

5. Sekarang Anda perlu menyiapkan Gruntfile.jsyang akan menjelaskan proses pembuatan Anda. Untuk contoh ini saya hanya menggabungkan dua file JS file1.jsdan file2.jsdi jsfolder dan menghasilkan app.js:

   module.exports = function(grunt) {
   
       // Project configuration.
       grunt.initConfig({
           concat: {
               "options": { "separator": ";" },
               "build": {
                   "src": ["js/file1.js", "js/file2.js"],
                   "dest": "js/app.js"
               }
           }
       });
   
       // Load required modules
       grunt.loadNpmTasks('grunt-contrib-concat');
   
       // Task definitions
       grunt.registerTask('default', ['concat']);
   };
   

6. Sekarang Anda akan siap untuk menjalankan proses build Anda dengan mengikuti perintah:

   grunt
   

Saya harap ini memberi Anda gambaran bagaimana bekerja dengan GruntJS build.

CATATAN:

Anda dapat menggunakan grunt-inituntuk membuatGruntfile.js jika Anda menginginkan pembuatan berbasis wizard daripada pengkodean mentah untuk langkah 5.

Untuk melakukannya, harap ikuti langkah-langkah berikut:

npm install -g grunt-init
git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile
grunt-init gruntfile

Untuk pengguna Windows: Jika Anda menggunakan cmd.exe, Anda perlu mengubah ~/.grunt-init/gruntfileke %USERPROFILE%\.grunt-init\. PowerShell akan mengenali dengan ~benar.

Beberapa waktu kita perlu mengatur variabel PATH untuk WINDOWS

% USERPROFILE% \ AppData \ Roaming \ npm

Setelah itu uji dengan where grunt

Catatan: Jangan lupa untuk menutup jendela prompt perintah dan membukanya kembali.

Saya mendapat masalah yang sama, tetapi saya menyelesaikannya dengan mengubah Grunt.js saya menjadi Gruntfile.js Periksa nama file Anda sebelum mengetik grunt.cmd di windows cmd (jika Anda menggunakan windows).

Anda harus menginstal grunt-cli ke devDependencies proyek dan menjalankannya melalui skrip di package.json Anda. Dengan cara ini, pengembang lain yang mengerjakan proyek akan menggunakan versi grunt yang sama dan tidak harus menginstal secara global sebagai bagian dari penyiapan.

Instal grunt-cli with npm i -D grunt-clialih - alih menginstalnya secara global dengan -g.

//package.json

...

"scripts": {
  "build": "grunt"
}

Kemudian gunakan npm run builduntuk melepaskan dengusan.