هناك الخطوات التالية:
1. إنشاء مشروع جديد bejs
2. قم بإنشاء ملف ملف جديد
3. إنشاء ملف جديد gruntfile.js
4. تنفيذ المهام النخر على سطر الأوامر
1. مشروع جديد bejs
يتم وضع الرمز المصدري تحت SRC ، ويحتوي الدليل على أصول فرعيتين و JS. JS Decentralists Selector.js و Ajax.js ، والتي تمت مناقشتها في المقالة السابقة كيفية دمجها وضغطها. تركز هذه المقالة فقط على دليل الأصول ، الذي يحتوي على بعض الصور وملفات CSS. في فترة من الوقت ، سيتم دمج وضغط موارد CSS. نسخة دمج all.css ، نسخة مضغوطة All-min.css.
2. قم بإنشاء حزمة جديدة
يتم وضع package.json في دليل الجذر ، وتم تقديم معناه في المقالة السابقة. هيكل المشروع الحالي كما يلي
يجب أن يتوافق محتوى package.json مع مواصفات بناء جملة JSON ، على النحو التالي
نسخة الكود كما يلي:
{
"الاسم": "bejs" ،
"الإصدار": "0.1.0" ،
"DevDependencies": {
"Grunt": "~ 0.4.0" ،
"Grunt-Contrib-Concat": "~ 0.1.1" ،
"Grunt-CSS": "> 0.0.0"
}
}
تم تقديم المقالة السابقة من Grunt-Contrib-Concat. Grunt-CSS هو البرنامج المساعد الذي سيتم استخدامه في هذه المقالة.
في هذا الوقت ، افتح أداة سطر الأوامر وأدخل دليل جذر المشروع ، واكتب الأمر التالي: تثبيت NPM
تحقق من دليل الجذر ووجد أن هناك دليلًا إضافيًا node_modules ، بما في ذلك أربعة دلالات فرعية ، انظر الصورة
3. إنشاء ملف جديد gruntfile.js
يتم وضع gruntfile.js أيضًا في دليل جذر المشروع. يتم تعريف جميع المهام تقريبًا في هذا الملف. إنه ملف JS عادي ، حيث يمكن كتابة أي رمز JS بدلاً من JSON. مثل package.json ، يجب إرساله إلى SVN أو git مثل رمز المصدر.
رمز المصدر كما يلي
نسخة الكود كما يلي:
module.exports = function (grunt) {
// إعدادات
grunt.initConfig ({
PKG: grunt.file.readjson ('package.json') ،
CONCAT: {
CSS: {
SRC: ['src/asset/*. css'] ،
القدر: "القدر/الأصول/all.css"
}
} ،
cssmin: {
CSS: {
SRC: 'Dest/Asset/all.css' ،
القدر: "القدر/الأصول/All-min.css"
}
}
}) ؛
// load concat و css plugins ، للاندماج والضغط على التوالي
grunt.loadnpmtasks ('Grunt-Contrib-Concat') ؛
grunt.loadnpmtasks ('grunt-css') ؛
// المهمة الافتراضية
grunt.registerTask ('default' ، ['concat' ، 'cssmin']) ؛
} ؛
4. تنفيذ مهام النخر
افتح سطر الأوامر ، وأدخل دليل جذر المشروع ، وانقر فوق Grunt
من معلومات الطباعة ، يُرى أنه يتم إنشاء الاندماج والضغط الناجحين وأن يتم إنشاء دليل القدر والملفات المتوقعة. في هذا الوقت ، هناك المزيد من القدر في دليل المشروع ، على النحو التالي
عند هذه النقطة ، يتم الانتهاء من دمج CSS وضغطها.