Bagaimana menginstal grunt dan bagaimana membangun skrip dengannya

86

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?

npm gruntjs npm-install Sau
sumber
1
npm install -g gruntberarti menginstal Grunt secara global yang tidak lagi direkomendasikan (dimulai dengan Grunt 0.4).
Ludder

Jawaban:

229

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.

Qorbani
sumber
itulah yang saya cari, terima kasih. juga, apakah gruntfile.js harus ditempatkan di folder root proyek (tidak bisa membuatnya berfungsi sebaliknya di windows)?
chester89
1
Bisakah Langkah 5 diatur pada dasarnya menggunakan grunt init:gruntfile? Saya sudah mencoba melakukan hal ini tapi aku selalu mendapatkan error: Fatal error: Unable to find Gruntfile. Apakah pembuatan Gruntfile.js selalu merupakan proses manual? Jika demikian, saya melihat keuntungan menggunakan Yeoman di mana Gruntfile.js dibuat secara otomatis (dan ini masih berlaku untuk proyek yang akan saya buat yang sebenarnya bukan webapp.
micah
@micah, Anda dapat menggunakan alat grunt-init untuk membuat Gruntfile dengan mudah. Saya akan memperbarui posting utama dan menambahkannya sebagai catatan.
Qorbani
@qorbani Lalu aku bingung. Dalam direktori untuk proyek non-grunt ini, saya telah mengikuti langkah 1-4. Sekarang saya baru saja menjalankannya npm install -g grunt-initdan berhasil diinstal. Saya mengikuti ini dengan grunt init:gruntfiledan masih memberi saya kesalahan fatal yang sama. Apa yang saya lewatkan?
micah
grunt init: gruntfile salah. grunt-init adalah helper yang berbeda untuk scaffolding berbasis template dan Anda perlu menginstal template gruntfile agar dapat menghasilkan Gruntfile.js
Qorbani
8

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.

Partha Sarathi Ghosh
sumber
5

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).

andromada
sumber
2

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.

itwasmattgregg
sumber