grunt membina projek nodejs

1. Kata Pengantar

Dengan populariti Node.js, semakin banyak aplikasi web menggunakannya sebagai pelayan bahagian belakang, dan kod bahagian hadapan yang kompleks itu selalunya perlu dibina dan diuruskan menggunakan Grunt . Artikel ini terutamanya memperkenalkan cara menggunakan Grunt untuk membina aplikasi web Node.js.

2. Pengenalan kepada Grunt

Grunt ialah pelari tugasan yang ditulis dalam JavaScript. Ia membantu kami menyelesaikan beberapa tugas tetap secara automatik, seperti pemampatan imej, pemampatan kod JS dan penggabungan, LESS/ SCSS ke. CSS dan sebagainya. Grunt boleh meningkatkan kecekapan kerja kami dengan banyak dan membolehkan kami menumpukan lebih pada menulis logik perniagaan.

3. Pemasangan Grunt

Grunt bergantung pada Node.js dan npm, jadi sila pasangkannya dahulu. Masukkan arahan berikut pada baris arahan untuk memasang Grunt secara global:

npm install -g grunt-cli

Selepas pemasangan selesai, anda boleh memasukkan arahan berikut untuk mengesahkan sama ada pemasangan berjaya:

grunt --version

Jika pemasangan berjaya, Grunt semasa akan dipaparkan.

4. Konfigurasi Gruntfile.js

Buat fail bernama Gruntfile.js dalam direktori akar projek, yang mentakrifkan tugas yang perlu diselesaikan oleh Grunt. Struktur fail Gruntfile.js asas adalah seperti berikut:

module.exports = function(grunt) {
  // 任务
  grunt.initConfig({

  });

  // 加载插件
  grunt.loadNpmTasks('');

  // 默认任务
  grunt.registerTask('', []);
};

1. Task

Inti Grunt ialah tugas, dan setiap tugas akan melakukan sesuatu, seperti menyalin, memampatkan dan menggabungkan , prapemprosesan CSS, dsb. Dalam Gruntfile.js, kita boleh mentakrifkan setiap tugas dan pilihan konfigurasi tugasan melalui kaedah grunt.initConfig().

Sebagai contoh, tugas bernama copy_image ditakrifkan di sini Fungsinya adalah untuk menyalin fail imej dalam direktori sumber ke direktori dist:

grunt.initConfig({
  copy: {
    dist: {
      files: [{
        expand: true,
        cwd: 'source/image/',
        src: ['**/*'],
        dest: 'dist/image/'
      }]
    }
  }
});

2. Muat pemalam< 🎜. >

Grunt memanjangkan fungsinya dengan memuatkan pelbagai pemalam berfungsi. Contohnya, jika kami memerlukan alat uglify tradisional untuk memampatkan fail JavaScript, kami memerlukan pemalam yang sepadan.

grunt.loadNpmTasks('grunt-contrib-uglify');

Tugas Lalai

Grunt boleh melaksanakan berbilang tugas pada masa yang sama, kemudian ia akan menjalankannya mengikut turutan. Tugas lalai ialah tugas yang dilaksanakan apabila kita memasukkan arahan grunt.

grunt.registerTask('default', ['copy', 'uglify']);

5. Pemalam Grunt yang biasa digunakan

grunt-contrib-copy: digunakan untuk penyalinan fail.
grunt-contrib-concat: digunakan untuk penggabungan fail.
grunt-contrib-cssmin: digunakan untuk pemampatan fail CSS.
grunt-contrib-uglify: digunakan untuk pemampatan fail JS.
grunt-contrib-watch: digunakan untuk memantau perubahan fail dan secara automatik mencetuskan tugas.
grunt-contrib-clean: digunakan untuk memadam fail dan folder.

Sebagai contoh, pemalam grunt-cotrib-concat dan grunt-contrib-uglify digunakan untuk menggabungkan dan memampatkan kod JavaScript:

grunt.initConfig({
  concat: {
    dist: {
      src: ['js/**/*.js'],
      dest: 'dist/js/script.js'
    }
  },
  uglify: {
    dist: {
      src: 'dist/js/script.js',
      dest: 'dist/js/script.min.js'
    }
  }
});

grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');

grunt.registerTask('default', ['concat', 'uglify']);

Tugas di sini adalah untuk bergabung dengan concat dahulu Semua Fail JS berada dalam satu fail, dan kemudian uglify digunakan untuk memampatkan kod JS fail.

6. Ringkasan

Melalui pengenalan di atas, saya percaya anda telah memahami cara menggunakan Grunt untuk membina dan mengurus aplikasi web Node.js. Teruskan mencuba dan menjadi pembangun web yang berpengalaman!

Atas ialah kandungan terperinci grunt membina projek nodejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!