3.0 KiB
title | localeTitle |
---|---|
Grunt | أرض |
الناخر
Grunt
هو برنامج JavaScript Task Runner يمكنك استخدامه لأتمتة المهام المتكررة.
لماذا استخدام Grunt؟
هناك العديد من المهام المتكررة في تطوير الويب. على سبيل المثال: ترجمة ، وتقليل ، ونسخ الملفات. يستغرق تنفيذ هذه المهام يدويًا الكثير من الجهد والوقت.
سوف تجعل عملك أسهل مع Grunt. تحتاج فقط إلى تكوين المهام من خلال Gruntfile .
ابدء
- تثبيت npm .
- تثبيت واجهة سطر الأوامر Grunt (CLI) على الصعيد العالمي مع
npm install -g grunt-cli
. - قائمة Grunt ومكونات Grunt مثل devDependencies في ملف
package.json
. - تثبيت Grunt والمكونات Grunt مع
npm i
. - قم بتكوين المهام في ملف
Gruntfile.js
. - تشغيل جرانت مع
grunt
.
مثال
في ما يلي مثال على package.json
و Gruntfile.js
للقيام بالمهام التالية:
- تصغير ملفات HTML.
- إضافة بادئات بائع وتقليص ملف CSS.
- سلسل وتقصير ملفات جافا سكريبت.
- تصغير الصور.
package.json
{ "name": "project-name", "version": "0.1.0", "devDependencies": { "grunt": "latest", "grunt-contrib-htmlmin": "latest", "grunt-postcss": "latest", "autoprefixer": "latest", "cssnano": "latest", "grunt-contrib-uglify": "latest", "grunt-contrib-imagemin": "latest", } }
Gruntfile.js
`module.exports = function(grunt) {
grunt.initConfig({ htmlmin: { options: { removeComments: true, collapseWhitespace: true }, html: { files: [{ expand: true, cwd: "src/", src: "**/*.html", dest: "dest/" }] } },
postcss: {
options: {
processors: [
require("autoprefixer")(),
require("cssnano")()
]
},
css: {
src: "dest/css/*.css"
}
},
uglify: {
js: {
files: {
"dest/js/main.js": "src/js/*.js"
}
},
},
imagemin: {
img: {
options: {
optimizationLevel: 5,
quality: 75
},
files: [{
expand: true,
cwd: "src/img/",
src: "**",
dest: "dest/img/"
}]
}
},
});
grunt.loadNpmTasks("grunt-contrib-htmlmin"); grunt.loadNpmTasks("grunt-postcss"); grunt.loadNpmTasks("grunt-contrib-uglify"); grunt.loadNpmTasks("grunt-contrib-imagemin");
grunt.registerTask("default", ["htmlmin", "postcss", "uglify, imagemin"]); }; `
معلومات اكثر:
وثائق الناخر: الابتداء