Baris Perintah untuk Desain Web: Otomatisasi dengan Grunt

() translation by (you can also view the original English article)

Sejauh ini Anda telah belajar cara melakukan hal-hal seperti mengkompilasi kode, melakukan autoprefixing, membersihkan, mengompresi, dan memperkecil semuanya hanya dengan mengetik beberapa kata. Ini luar biasa, tetapi bagaimana jika Anda memiliki proyek yang mengharuskan Anda menjalankan beberapa perintah ini, satu demi satu, berulang kali sampai Anda menyelesaikan pekerjaan Anda? Sebagai contoh

Mengkompilasi preprocessor ke CSS
CSS Autoprefix
Membersihkan CSS
Kompilasi Jade ke HTML
Menggabungkan dan Meminimalkan JavaScript

Bahkan hanya dengan beberapa kata per perintah itu akan jadi cepat melelahkan selama proses pembuatan situs yang khas.

Di sinilah "Task Runners" masuk untuk menyelamatkan hari. Dengan task runner Anda dapat mengatur satu file di dalam proyek Anda yang mendefinisikan semua tugas yang Anda perlukan untuk dijalankan di proyek Anda, dan urutan yang harus dijalankan. Dalam file ini Anda kemudian dapat menentukan perintah kustom yang dapat Anda gunakan untuk melaksanakan semua tugas-tugas tersebut sekali.

Anda akan belajar cara mengatur task runner dengan melalui tutorial ini, dan dalam prosesnya Anda juga akan melihat contoh membawa skrip dari paket Bower untuk penerapan yang efisien dalam proyek Anda.

Catatan : Tutorial ini mengasumsikan Anda telah menyelesaikan semua tutorial sebelumnya dalam seri ini. Jika Anda belum melakukannya, Anda akan merasa terbantu untuk melakukannya sebelum Anda memulai ini.

Task Runner "Big Two"

Sebenarnya ada beberapa task runner yang tersedia saat ini, namun untuk keperluan tutorial ini kita akan fokus pada dua yang saat ini paling populer: Grunt and Gulp .

Ada beberapa perbedaan teknis antara dua proyek, yang tidak akan saya masukan ke sekarang. Saya juga tak akan memberitahukan mana yang lebih baik Anda gunakan. Sebaliknya, saya sarankan mengikuti langkah-langkah untuk menggunakan keduanya di bawah ini kemudian memutuskan sendiri mana yang Anda sukai.

Buat Proyek Contoh

Kita akan membuat proyek yang melihat dan secara otomatis mengkompilasi Stylus dan Jade, dan mengoptimalkan CSS dan JavaScript. Kita akan mencapai ini menggunakan Grunt, dan kemudian (dalam tutorial selanjutnya) menggunakan Gulp.

Untuk memulainya, kita perlu menyiapkan proyek contoh dengan beberapa file di dalamnya yang dapat dioperasikan oleh task runner kita. Buat folder dengan nama "Grunt Project", kemudian tambahkan subfolder bernama "build" dan subfolder bernama "source".

Dalam folder "source" Tambahkan dua subfolder baru bernama "stylus", "jade". Tambahkan beberapa contoh file dari jenis yang sesuai untuk setiap folder.

File dapat berisi kode apa pun yang Anda inginkan, hanya agar Anda memiliki sesuatu yang dapat Anda lihat pada proses kompilasi yang sedang dikerjakan.

Tip: jika Anda tidak yakin untuk menambahkan kode apa, coba ambil beberapa kode contoh dari Codepen: pens tagged stylus, pens tagged jade.

Sebagai contoh:

Kita juga akan memanfaatkan apa yang kita pelajari tentang Bower di pelajaran sebelumnya dan mengambil unduhan jQuery dan Modernizr, yang akan kita gabungkan dan minimalkan nanti.

Jalankan perintah:

1	bower install jquery --save

1	bower install modernizr --save

Sekarang, buat duplikat dari keseluruhan folder proyek Anda dan beri nama "Gulp Project".

Dengan cara ini Anda dapat mengikuti langkah-langkah menggunakan Grunt di dalam folder "Grunt Project", dan langkah-langkah untuk menggunakan Gulp dalam folder "Gulp proyek".

Memulai dengan Grunt

Instal Grunt CLI

Dalam rangka untuk perintah Grunt untuk bekerja Anda akan perlu menginstal dengan CLI (command line interface). Instal secara global dengan:

1	[sudo] npm install -g grunt-cli

Setup proyek untuk Grunt

Tambahkan file package.json

Setiap proyek yang menggunakan Grunt memerlukan "package.json" file dalam root folder.

Kami mencakup menyiapkan "package.json" file dengan menggunakan perintah npm init di tutorial Taming 3rd Party Packages sebelumnya . Jika Anda belum menyelesaikan bagian itu, silakan kembali dan ikuti sekarang.

Menginstal paket Grunt

Instal Grunt ke dalam proyek Anda dan simpan sebagai ketergantungan pengembangan dengan:

1	npm install grunt --save-dev

Tambahkan Gruntfile

Setiap proyek Grunt juga perlu memiliki apa yang disebut Gruntfile di folder root.

Gruntfile adalah sebuah file bernama "Gruntfile.js", atau "Gruntfile.coffee" jika Anda lebih suka menulis di CoffeeScript. Dalam kasus ini, kita akan bekerja dengan JavaScript, jadi tambahkan file bernama "Gruntfile.js" ke folder root Anda.

Mengisi Gruntfile Anda akan memungkinkan Anda untuk menentukan perintah yang akan memicu tugas apa yang harus dijalankan. Anda dapat memulai dengan hanya menambahkan rangka dasar ke Gruntfile Anda. Kita akan setup kode aktual konfigurasi Anda kemudian.

Tambahkan kode berikut ke Gruntfile.js Anda:

1	module.exports = function(grunt) {
2
3	};

Instal Grunt Plugins

Anda akan ingat bahwa ketika Anda ingin menggunakan paket dengan npm atau Bower, Anda harus mencari di tempat yang tepat untuk mendapatkan versi yang dirancang untuk bekerja dengan setiap sistem.

Hal yang sama berlaku ketika menggunakan paket dengan Grunt. Melalui Grunt Anda dapat mengakses ekosistem plugin, yang pada dasarnya pembungkus di sekitar vanili npm paket. Plugin ini masih disampaikan melalui npm, tapi mereka khusus dilengkapi untuk bekerja dengan Grunt

Misalnya, daripada paket npm UglifyJS, dengan Grunt Anda mungkin menggunakan plugin "grunt-contrib-uglify".

Anda dapat mencari plugin kasar di http://gruntjs.com/plugins

Untuk proyek ini, kita akan menginstal enam plugin Grunt ini:

Masing-masing akan diinstal ke dalam subfolder “node_modules” folder proyek Anda, dan disimpan sebagai development dependency.

Jalankan masing-masing perintah ini, satu per satu, dengan terminal Anda menunjuk pada folder "Grunt Project" Anda:

1	npm install grunt-contrib-stylus --save-dev

1	npm install grunt-autoprefixer --save-dev

1	npm install grunt-contrib-cssmin --save-dev

1	npm install grunt-contrib-jade --save-dev

1	npm install grunt-contrib-uglify --save-dev

1	npm install grunt-contrib-watch --save-dev

Setelah selesai, Anda akan melihat folder-folder ini di dalam folder "node_modules" proyek Anda:

Aktifkan Plugin melalui Gruntfile

Sekarang kita akan menggunakan metode grunt.loadNpmTasks untuk mengaktifkan plugin kita.

Di dalam kurung kurawal Gruntfile yang ada, kita akan menambahkan enam baris, satu untuk mengaktifkan setiap plugin grunt, seperti:

module.exports = function(grunt) {

// Load grunt plugins.
 grunt.loadNpmTasks('grunt-contrib-stylus');
 grunt.loadNpmTasks('grunt-autoprefixer');
 grunt.loadNpmTasks('grunt-contrib-cssmin');
 grunt.loadNpmTasks('grunt-contrib-jade');
 grunt.loadNpmTasks('grunt-contrib-uglify');
 grunt.loadNpmTasks('grunt-contrib-watch');

};

Kode ini register nama masing-masing plugin sebagai perintah grunt, memungkinkan kita untuk menggunakan perintah untuk membuat plugin menjalankan task. Sebagai contoh, kita akan menggunakan perintah grunt stylus untuk menjalankan tugas stylus, grunt autoprefixer untuk menjalankan tugas autoprefixer dan seterusnya.

Mengkonfigurasi tugas di Gruntfile

Plugin grunt kita dipasang dan perintah untuk menggunakannya masing-masing bersifat operasional, namun jika Anda menggunakannya sekarang, Anda tidak akan melihat sesuatu terjadi. Alasannya adalah kita harus menyiapkan konfigurasi untuk menentukan apa yang sebenarnya harus dilakukan oleh setiap tugas.

Hal ini dilakukan dengan menambahkan metode grunt.initConfig untuk Gruntfile Anda, dan kemudian melewati informasi yang menentukan bagaimana Anda ingin setiap tugas yang akan dijalankan.

Pertama, kita akan menambahkan grunt.initConfig metode di atas garis-garis yang baru saja ditambahkan untuk memuat grunt plugin:

1	grunt.initConfig();

Sekarang kita akan membuat beberapa ruang bagi kita untuk menyampaikan informasi konfigurasi kita melalui. Tambahkan pembuka dan tutup kurung kurawal di dalam kurung biasa, lalu tambahkan garis kosong di antara mereka:

1	grunt.initConfig({
2
3	});

Sekarang kita dapat pergi ke depan dan Tambahkan konfigurasi untuk masing-masing plugin kita diinstal.

Setiap plugin memiliki rangkaian pengaturan sendiri yang dapat Anda gunakan, dan opsi-opsi ini dirinci pada halaman-halaman yang terhubung ke bagian "Pasang Plugin Grunt" di atas.

Anda juga dapat membaca penuh detail konfigurasi Grunt tugas di sini: http://gruntjs.com/configuring-tasks

Grunt Task Configuration Example: Stylus

Kita akan mulai dengan menambahkan konfigurasi untuk tugas stylus kita.

Di antara kurung kurawal yang baru saja ditambahkan, pada baris kosong, tambahkan kode berikut:

    stylus: {
      compile: {
        options: {
          compress: false,
          paths: ['source/stylus']
        },
        files: {
          'build/style.css': 'source/stylus/main.styl'
        }
      }
    },

Gruntfile Anda sekarang harus terlihat seperti ini:

module.exports = function(grunt) {

  grunt.initConfig({

    stylus: {
      compile: {
        options: {
          compress: false,
          paths: ['source/stylus']
        },
        files: {
          'build/style.css': 'source/stylus/main.styl'
        }
      }
    },

  });

  // Load grunt plugins.
  grunt.loadNpmTasks('grunt-contrib-stylus');
  grunt.loadNpmTasks('grunt-autoprefixer');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-jade');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');
  
};

Mari melalui pemecahan kode yang kita tambahkan di sini. Kita tidak akan merusak setiap tugas, tetapi melihat yang satu ini seharusnya memberi Anda gambaran tentang jenis sintaks yang digunakan saat menyusun konfigurasi tugas Grunt.

Seperti yang disebutkan di atas, setiap plugin memiliki opsi konfigurasi yang berbeda sehingga ketika Anda menggunakan plugin baru, perhatikan dengan baik petunjuk penggunaan yang ditawarkannya.

Hal pertama yang kita lakukan adalah menambahkan entri ke dalam konfigurasi kita untuk tugas stylus kita dengan kode:

1	stylus: {
2
3	},

Di dalamnya kami telah menambahkan entri compile untuk mengontrol apa yang terjadi selama kompilasi:

    stylus: {
      compile: {

      }
    },

Dalam tugas compile kita telah menciptakan area options.

Kita telah menggunakan area tersebut untuk mengatur opsi compress menjadi false, karena kita akan melakukan pengoptimalan kode kita nanti.

Kita juga telah menetapkan opsi paths ke ['sumber/stylus'] jadi jika Stylus melihat perintah @import saat mengumpulkannya, file akan dicari untuk diimpor dalam folder “sumber/stylus” proyek:

    stylus: {
      compile: {
        options: {
          compress: false,
          paths: ['source/stylus']
        }
      }
    },

Kemudian setelah area options kita telah menambahkan area files untuk mengontrol direktori output dan nama file, serta masukan nama direktori dan file.

Kita telah menetapkan lokasi output file CSS kita disusun menjadi 'build/style.css', Sementara file Stylus untuk proses adalah 'source/stylus/main.styl'.

    stylus: {
      compile: {
        options: {
          compress: false,
          paths: ['source/stylus']
        },
        files: {
          'build/style.css': 'source/stylus/main.styl'
        }
      }
    },

Sekarang, dengan terminal Anda menunjuk pada folder root utama Anda jalankan perintah:

1	grunt stylus

Lihat di dalam folder "build" Anda dan Anda akan melihat "style.css" yang baru dikompilasi file.

Konfigurasikan Tugas Tersisa

Kita sekarang akan bergerak cukup cepat melalui konfigurasi dari setiap tugas yang tersisa. Masukkan setiap blok kode konfigurasi segera setelah yang Anda tambahkan sebelumnya.

Autoprefixer

Tambahkan kode ini:

    autoprefixer: {
      compile: {
        files: {
          'build/style.css': 'build/style.css'
        },
      },
    },

Jalankan tugas autoprefixer dengan:

1	grunt autoprefixer

Jika Anda memeriksa "build/style.css" Anda file Anda sekarang harus melihat prefiks ditambahkan bila diperlukan.

cssmin

Tambahkan code ini

    cssmin: {
      clean: {
        files: {
          'build/style.css': 'build/style.css'
        }
      }
    },

Jalankan tugas cssmin dengan:

1	grunt cssmin

Jika Anda melihat Anda "build/style.css" lagi-lagi, Anda akan melihatnya telah dibersihkan dan dikompres dengan baik untuk Anda.

Jade

Tambahkan kode ini:

    jade: {
      compile: {
        files: [{
          expand: true,
          cwd: "source/jade",
          src: "*.jade",
          dest: "build",
          ext: ".html"
        }]
      }
    },

Jalankan tugas jade dengan:

1	grunt jade

Jika Anda melihat ke dalam folder "build" Anda, Anda seharusnya sekarang melihat file HTML untuk menyesuaikan dengan setiap file Jade yang ada di folder "source/jade" Anda.

Uglify

Tambahkan kode ini:

    uglify: {
      bower_js_files: {
        files: {
          'build/output.min.js': [
            'bower_components/jquery/dist/jquery.js',
            'bower_components/modernizr/modernizr.js'
          ]
        }
      }
    },

Dalam contoh ini, Anda akan melihat kita sedang menggunakan lokasi komponen Bower kita diinstal sebelumnya.

Kita mengambil versi lengkap lengkap dari jQuery dan Modernizr dari folder "bower_components" kita, kemudian menggabungkan dan mengecilkannya menjadi file baru bernama "output.min.js". Ini adalah cara yang bagus untuk menyebarkan skrip Anda mengelola dengan Bower.

Jalankan tugas uglify dengan:

1	grunt uglify

Anda sekarang harus melihat "output.min.js" baru file dalam folder "build".

Tambahkan task "watch"

Sejauh ini tampaknya kita baru saja mengganti satu perintah untuk melakukan tugas tertentu dengan perintah lain, tetapi apa yang sebenarnya kita lakukan adalah meletakkan dasar di mana Grunt benar-benar mulai bersinar.

Kuncinya adalah kemampuan Grunt untuk memiliki satu tugas menjalankan tugas lain. Jadi sekarang kita akan menyiapkan tugas watch yang akan memantau file tertentu untuk perubahan, kemudian menjalankan tugas stylus dan jade kita secara otomatis untuk kita.

Tambahkan kode ini:

    watch: {
      stylus: {
        files: [ 'source/stylus/*.styl' ],
        tasks: ['stylus', 'autoprefixer', 'cssmin']
      },
      jade: {
        files: [ 'source/jade/*.jade' ],
        tasks: ['jade']
      }
    },

Kita telah menambahkan tugas watch terlebih dahulu, dan kemudian di dalam itu kita menyiapkan area untuk stylus dan jade.

Pilihan files dalam setiap set file yang perlu diawasi untuk perubahan. Opsi tasks menetapkan tugas yang harus dieksekusi ketika perubahan terjadi, dan dalam urutan apa.

Untuk stylus, kita telah menetapkan tugas watch untuk memantau semua file ".styl" di folder "sumber/stylus", dan ketika melihat perubahan itu akan menjalankan tugas stylus, autoprefixer dan cssmin dalam urutan itu.

Jadi sekarang ketika tugas watch berjalan, yang harus Anda lakukan adalah menyimpan semua file Stylus Anda dan Anda akan secara otomatis mendapatkan file CSS yang dikompilasi, di-autoprefixed dan dioptimalkan yang ditulis ke dalam folder "build" untuk Anda.

Demikian pula untuk jade, kami telah mengatur semua file “.jade” di folder “source / jade” untuk dimonitor, dan kapan pun disimpan, tugas jade akan secara otomatis menjalankan dan mengkompilasi file HTML terkait dalam “build”.

Jalankan tugas watch dengan:

1	grunt watch

Hentikan lagi dengan:

Menutup terminal
Menekan CTRL + C

Tambahkan "default" tugas

Pada titik ini Anda mungkin bertanya-tanya, apa tentang JavaScript tugas uglify?

Alasan kita tidak menyertakannya dengan tugas watch adalah Anda tidak akan melakukan perubahan pada file jQuery dan Modernizr yang sedang diproses oleh tugas uglify. Jadi karena tugas watch hanya menanggapi perubahan itu akan pernah dipicu untuk memproses JavaScript Anda.

Sebaliknya, kita akan membuat menggunakan tugas default yang dapat diatur dalam Gruntfile Anda. Ini adalah tugas yang akan dijalankan jika Anda menggunakan perintah grunt sendiri dengan apa-apa yang ditambahkan.

Setelah baris grunt.loadNpmTasks terakhir Anda, tetapi sebelum penutupan }; dari file, tambahkan baris ini:

1	grunt.registerTask('default', ['stylus', 'autoprefixer', 'cssmin', 'jade', 'uglify']);

Ini menetapkan tugas default untuk menjalankan stylus, autoprefixer, cssmin, jade dan kemudian uglify.

Jadi sekarang jika Anda menjalankan perintah grunt tanpa apa pun setelah itu, itu akan membangun seluruh proyek Anda, termasuk JavaScript Anda.

Dalam Tutorial berikutnya

Selanjutnya, kita akan mengulang proses yang baru kita pelajari, tetapi dengan menggunakan Gulp untuk menangani tugas kita, bukan Grunt.