Home / Web Design / 8. Kutengeneza Gruntfile na Watch Task

8. Kutengeneza Gruntfile na Watch Task

Tumekamilisha tengeneza package.json file, na sasa tuko tayari tengeneza Gruntfile, hili ni file litalo iambia Grunt nini cha kufanya na kwa mpangilio gani. Na hapa ndio tutajua task gani zitafanya kazi.

Hatua ya kwanza tutangeneza file jipya, nitaright click na kuchagua ‘New File’ nitabonyeza Ctrl + S kisha nitaandika Gruntfile.js, na kumbuka G iwe kwa herufi kubwa. Nikisha tengeneza Gruntfile, nitaanza set gruntfile. Hapa juu nitaandika

module.exports = function(grunt) {

}

Ndani ya hii function nitaandika grunt configurations

grunt.initConfig({

});

Ndani yah ii grunt.initConfig, ninatakiwa iambia grunt wapi package file lipo, hivyo nitaandika

pkg: grunt.file.readJSON(‘package.json’),

Sasa hili limeisha tunatakiwa anza tengeneza tasks, na tutaanza kwa kutengeneza watch task, task ambayo itafuatilia folder la SASS lililo ndani ya project yetu. Niitaandika comment kuhusu task hii, kwa kuandika watch task.

Kuandika task yetu nitaandika

watch: {

}

Ndani ya task hii nitaandika

css: {
      files: ‘**/*.scss’,
}

Task hii itafuatilia mafile yote yenye extension ya .scss, kama kuna badiliko kwenye mafile haya basi kuna task ambayo itaitwa. Na hapa task ambayo itaitwa bado hatujaitengeneza lakini itakuwa sass task, hivyo nitaandika:

tasks: [‘sass’]

Kwasasa tumeandika sass baadae tunaweza ongeza task nyingine hapa, hivyo watch task imekamilika hapa.

Ila kuna jambo moja ninataka malizia hapa, hapa chini na baada ya grunt.initConfig tunatakiwa iambia grunt iload task runner tofauti tofauti hapa. Na hapa sasa ni watch task tuu, hivyo basi nitaandika:

grunt.loadNpmTasks(‘grunt-contrib-watch’);

Kisha ninatakiwa register watch task, ili kila napo run grunt kama function basi irun watch task automatically, na hivyo nitaandika:

grunt.registerTask(‘default’, [‘watch’]);

Hivi ndio tunavyo tengeneza gruntfile, tuishie hapa kwa sasa kwani kutask moja tutaiongeza kwenye video ijayo na tutakuwa tayari test tulichofanya.

About Yesaya R. Athuman

Colleagues know me as a highly Creative Software Developer who can always be trusted to come up with the new approach. But I know that client's business come first, and I never try to impose my ideas on others. Instead, I spend a lot of time understanding business and the audience before suggesting ideas. I can (and often do) work well alone, but I'm at my best collaborating with others.

Check Also

Take Your CSS Experience to the Next Level with SASS

Take Your CSS Experience to the Next Level with SASS

Beginners or those who have taken a break from web design for a few years …