Grunt



grunt

Grunt

يتم تثبيت الإضافات Grunt و Grunt وإدارتها عبر npm ، مدير حزمة npm يتطلب Grunt 0.4.x إصدارات Node.js ثابتة >= 0.8.0 . تعتبر أرقام الإصدارات الفردية من Node.js إصدارات التطوير غير مستقر.

قبل إعداد Grunt ، تأكد من npm الخاصة بك عن طريق تشغيل npm update -g npm (قد يتطلب ذلك sudo على أنظمة معينة).

إذا قمت بالفعل بتثبيت Grunt Gruntfile الآن عن مرجع سريع ، يرجى Gruntfile مثال Gruntfile وكيفية تكوين مهمة .

تثبيت CLI

باستخدام Grunt 0.3؟ يرجى الاطلاع على Grunt 0.3 Notes

للبدء ، سترغب في تثبيت واجهة سطر الأوامر (CLI) الخاصة بشركة Grunt على مستوى العالم. قد تحتاج إلى استخدام sudo (لـ OSX ، * nix ، BSD إلخ) أو تشغيل shell command كمسؤول (لـ Windows) للقيام بذلك.

npm install -g grunt-cli

سيضع هذا الأمر الأمر grunt في مسار النظام الخاص بك ، مما يسمح بتشغيله من أي دليل.

لاحظ أن تركيب grunt-cli لا يقوم بتثبيت عداء المهمة Grunt! مهمة Grunt CLI بسيطة: قم بتشغيل إصدار Grunt الذي تم تثبيته بجوار Gruntfile . يسمح ذلك بتثبيت إصدارات متعددة من Grunt على نفس الجهاز في نفس الوقت.

كيف يعمل CLI

في كل مرة يتم تشغيل grunt ، فإنه يبحث عن Grunt المثبتة محليًا باستخدام نظام require() الخاص بالعقدة. وبسبب هذا ، يمكنك تشغيل grunt من أي مجلد فرعي في المشروع الخاص بك.

في حالة العثور على Grunt مثبت محليًا ، يقوم CLI بتحميل التثبيت المحلي لمكتبة Grunt ، وتطبيق التكوين من Gruntfile ، وتنفيذ أي مهام قمت بطلبها لتشغيلها. لفهم ما يحدث بالفعل ، اقرأ الكود .

العمل مع مشروع Grunt الحالي

بافتراض أنه قد تم تثبيت Grunt CLI وأن المشروع قد تم تكوينه بالفعل مع package.json و Gruntfile ، فمن السهل جدًا بدء العمل مع Grunt:

  1. التغيير إلى الدليل الجذر للمشروع.
  2. تثبيت تبعيات المشروع مع npm install .
  3. تشغيل جرانت مع grunt .

هذا حقا كل ما في الامر. يمكن إدراج مهام Grant المثبتة بواسطة تشغيل grunt --help ولكن عادةً ما تكون فكرة جيدة للبدء في وثائق المشروع.

إعداد مشروع الننت الجديد

سيتضمن الإعداد النموذجي إضافة ملفين إلى مشروعك: package.json و Gruntfile .

package.json : يتم استخدام هذا الملف بواسطة npm لتخزين بيانات التعريف للمشاريع المنشورة كوحدات npm. ستقوم بإدراج grunt devDependencies Grunt الإضافية التي يحتاجها مشروعك على شكل devDependencies في هذا الملف.

Gruntfile : يسمى هذا الملف Gruntfile.js أو Gruntfile.coffee ويستخدم لتكوين أو تعريف المهام وتحميل المكونات الإضافية Grunt. عندما تشير هذه الوثائق إلى Gruntfile فهي تتحدث عن ملف ، وهو إما Gruntfile.js أو Gruntfile.coffee .

package.json

ينتمي ملف package.json في الدليل الجذر للمشروع الخاص بك ، بجانب Gruntfile ، ويجب الالتزام بمصدر المشروع الخاص بك. يعمل npm install في نفس المجلد مثل ملف package.json تثبيت الإصدار الصحيح لكل تبعية مدرجة به.

هناك عدة طرق لإنشاء ملف package.json لمشروعك:

  • ستقوم معظم قوالب grunt-init بإنشاء ملف package.json خاص بالمشروع تلقائيًا.
  • سيقوم الأمر init npm بإنشاء ملف package.json أساسي.
  • ابدأ بالمثال أدناه ، ثم قم بالتوسع حسب الحاجة ، باتباع هذه specification .
{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0"
  }
}

تثبيت Grunt و gruntplugins

أسهل طريقة لإضافة Grunt و gruntplugins إلى package.json موجود هو مع npm install <module> --save-dev الأمر npm install <module> --save-dev . لن يتم تثبيت هذا <module> devDependencies <module> محليًا فحسب ، بل سيتم إضافته تلقائيًا إلى قسم devDependencies ، باستخدام نطاق إصدار تيلدا .

على سبيل المثال ، سيقوم هذا بتثبيت أحدث إصدار من Grunt في مجلد المشروع الخاص بك ، ثم إضافته إلى devDependencies:

npm install grunt --save-dev

ويمكن القيام بذلك نفسه ل gruntplugins وغيرها من وحدات العقدة. كما هو موضح في المثال التالي ، قم بتثبيت وحدة المهام JSHint:

npm install grunt-contrib-jshint --save-dev

الخروج من gruntplugins المتاحة الحالية ليتم تثبيتها واستخدامها في المشروع الخاص بك في صفحة plugins .

تأكد من الالتزام بملف package.json المحدَّث مع مشروعك عند الانتهاء من ذلك!

و Gruntfile

ملف Gruntfile.coffee أو Gruntfile.coffee هو ملف جافا سكريبت أو ملف PDF صالح ينتمي إلى الدليل الجذر للمشروع ، بجوار ملف package.json ، ويجب الالتزام بمصدر المشروع.

يتكون Gruntfile من الأجزاء التالية:

  • وظيفة "المجمع"
  • مشروع وتكوين المهمة
  • تحميل الإضافات والمهام Grunt
  • المهام المخصصة

مثال على Gruntfile

في Gruntfile التالية ، يتم استيراد بيانات تعريف المشروع إلى تكوين Grunt من ملف package.json للمشروع ويتم تكوين مهمة uglify grunt-contrib-uglify plugin uglify ملف مصدر وإنشاء تعليق شعار بشكل ديناميكي باستخدام تلك البيانات الوصفية. عند تشغيل grunt على سطر الأوامر ، سيتم تشغيل مهمة uglify بشكل افتراضي.

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);

};

الآن بعد أن رأيت Gruntfile بأكمله ، دعنا ننظر إلى الأجزاء المكونة لها.

وظيفة "المجمع"

Gruntfile كل Gruntfile (و gruntplugin) هذا التنسيق الأساسي ، ويجب تحديد كل رمز Grunt الخاص بك داخل هذه الوظيفة:

module.exports = function(grunt) {
  // Do grunt-related things in here
};

مشروع وتكوين المهمة

تعتمد معظم مهام Grunt على بيانات التكوين المعرفة في كائن تم تمريره إلى طريقة grunt.initConfig .

في هذا المثال ، grunt.file.readJSON('package.json') بيانات JSON الوصفية المخزنة في package.json في تهيئة grunt. نظرًا لأن سلاسل القالب <% %> ٪٪ قد تشير إلى أي خصائص تهيئة ، قد يتم تحديد بيانات التكوين مثل filepaths وقوائم الملفات بهذه الطريقة لتقليل التكرار.

يمكنك تخزين أي بيانات عشوائية داخل كائن التكوين ، وطالما أنها لا تتعارض مع الخصائص التي تتطلبها مهامك ، فسيتم تجاهلها على نحو آخر. أيضًا ، نظرًا لأن هذا هو JavaScript ، فأنت لست مقيدًا بـ JSON ؛ يمكنك استخدام أي JS صالح هنا. يمكنك حتى تكوين التكوين برمجيًا إذا لزم الأمر.

مثل معظم المهام ، يتوقع مهمة uglify grunt-contrib-uglify أن يتم تحديد تكوينها في خاصية تحمل الاسم نفسه. هنا ، يتم تحديد خيار banner ، جنبا إلى جنب مع هدف uglify واحد باسم البنية الذي يقوم بتصغير ملف مصدر واحد إلى ملف وجهة مفرد.

// Project configuration.
grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  uglify: {
    options: {
      banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
    },
    build: {
      src: 'src/<%= pkg.name %>.js',
      dest: 'build/<%= pkg.name %>.min.js'
    }
  }
});

تحميل الإضافات والمهام Grunt

تتوفر العديد من المهام شائعة الاستخدام مثل linting ، linting نخر . طالما تم تحديد مكون إضافي في package.json npm install ، وتم تثبيته عبر npm install ، فقد يتم تمكينه داخل Gruntfile باستخدام أمر بسيط:

// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');

ملاحظة: سوف يقوم أمر grunt --help كل المهام المتاحة.

المهام المخصصة

يمكنك تكوين Grunt لتشغيل مهمة واحدة أو أكثر بشكل افتراضي عن طريق تحديد مهمة default . في المثال التالي ، grunt تشغيل grunt في سطر الأوامر بدون تحديد مهمة مهمة uglify . هذا هو وظيفيا نفس تشغيل صريح grunt uglify أو حتى grunt default . يمكن تحديد أي عدد من المهام (مع أو بدون وسيطات) في الصفيف.

// Default task(s).
grunt.registerTask('default', ['uglify']);

إذا كان مشروعك يتطلب مهام لم يتم توفيرها بواسطة المكون الإضافي Grunt ، فيمكنك تعريف المهام المخصصة مباشرةً داخل Gruntfile . على سبيل المثال ، يحدد Gruntfile هذا مهمة default مخصصة تمامًا لا تستخدم حتى تكوين المهمة:

module.exports = function(grunt) {

  // A very basic default task.
  grunt.registerTask('default', 'Log some stuff.', function() {
    grunt.log.write('Logging some stuff...').ok();
  });

};

لا تحتاج مهام مخصصة خاصة بالمشروع إلى تعريف في Gruntfile ؛ قد يتم تعريفها في ملفات .js الخارجية وتحميلها عبر طريقة grunt.loadTasks .

قراءة متعمقة

  • يحتوي دليل تثبيت gunt على معلومات مفصلة حول تثبيت إصدارات محددة أو إنتاجية أو تطويرية ، إصدارات Grunt و grunt-cli.
  • يحتوي دليل تكوين المهام على شرح Gruntfile حول كيفية تكوين المهام والأهداف والخيارات والملفات داخل Gruntfile ، بالإضافة إلى شرح للقوالب وأنماط globuling واستيراد البيانات الخارجية.
  • يسرد دليل إنشاء المهام الاختلافات بين أنواع مهام Grunt ويعرض عددًا من مهام وتكوينات النماذج.
  • لمزيد من المعلومات حول كتابة المهام المخصصة أو المكونات الإضافية Grunt ، راجع وثائق المطور .