4 پست در این موضوع قرار دارد

getting_started_with_gulp.png

با سلام خدمت دوستان عزیز

در این تاپیک، قصد دارم درمورد فریم‌ورک Gulp که تحت NodeJS هست، آموزش بدم.

آموزش‌های این تاپیک، کاربردی هستند، بنابراین بعد از جلسه اول و دوم، شروع به توضیح مثال‌های کاربردی Gulp می‌کنیم که البته شما کاربران هم می‌تونن مثال ارسال کنن.

خب:

1. در این تاپیک نه سؤال بپرسید و نه اسپم بدید. بعد از جلسه سوم، می‌تونید مثال‌های خودتون رو در همین تاپیک ارسال کنید.

2. آموزش‌های پیوسته هستند و در آخر یه فایل PDF در اختیار کاربران قرار میگیره.

3. برای این آموزش، باید Javascript را در حد متوسط بلد باشید، می‌تونید از این آموزش Black_Sky عزیز کمک بگیرید.

4. اگه پیشنهاد یا انتقادی درمورد تاپیک دارید، به صورت پیام خصوصی برای من ارسال کنید.

موفق باشید.

13

به اشتراک گذاری این پست


لینک به پست

nodejs.png

نصب و راه‌اندازی

پیش از شروع با Gulp باید آن را نصب کنیم. نصب Gulp بسیار ساده است و با اجرای یک دستور در خط فرمان به راحتی انجام می‌شود. برای نصب Gulp شما باید اول NodeJS را نصب کرده باشید.

برای دانلود و نصب NodeJS می‌توانید به وب‌سایت آن مراجعه کنید و نسخه متناسب با سیستم‌عامل خودتون رو دانلود و نصب کنید. بعد از نصب، در صورتی که در سیستم‌عامل ویندوز هستید، وارد Node.js command prompt شوید و در صورتی که در از سیستم‌عامل Unix (لینوکس و مک و ...) استفاده می‌کنید، ترمینال رو باز کنید.

سپس با واردکردن دستور node از نصب‌بودن اون مطمئن بشید.

هم‌چنین شما به Node Package Manager یا همون npm هم نیاز دارید. npm کارش دانلود و نصب پکیج‌های ناد مثل gulp و browser-sync هست. معمولاً npm همراه با NodeJS نصب میشه، شما می‌تونید اینو با واردکردن دستور npm در ترمینال یا خط‌فرمان امتحان کنید. در صورتی که npm نصب نبود، با یه گوگل ساده می‌تونید نحوه نصب npm رو با توجه به سیستم‌عاملتون پیدا کنید.

بعد از این‌که از نصب‌بودن npm و NodeJS مطمئن شدید، با واردکردن دستور زیر در ترمینال یا خط‌فرمان Gulp رو نصب کنید:


npm install -g gulp

نکته: برای سیستم‌های یونیکس نیاز دارید که از sudo استفاده کنید.

در این حین که Gulp دانلود و نصب می‌شه، ما هم درمورد Gulp کمی صحبت کنیم.

Gulp چیه؟

Gulp یک سیستم اجرای وظیفه (Task Runner) اتوماتیکه که به شما کمک می‌کنه تا Productivity شما رو در توسعه فرانت‌اند افزایش بده. مثلاً Gulp می‌تونه شما رو از شر F5 زدن برای تست CSS نجات بده. اگه از Sass یا Less استفاده می‌کنید، به شما این امکان رو میده که بلافاصله بعد از این‌که فایل سورس خودتون رو سیو کردید، فایل CSS هم Build بشه و به مرورگر منتقل بشه.

شگفت‌انگیز نیست؟

Gulp چی نیست؟

* Gulp یه زبان برنامه‌نویسی نیست، بلکه یک پکیج برای NodeJSه.

* Gulp به درد بک‌اند (Back-End) نمیخوره، مگر در مواردی، مثلاً ایجاد فایل POT برای ترجمه قالب و پلاگین وردپرس

* Gulp این همه کار رو انجام نمیده، برای انجام بقیه موارد شما باید پلاگین‌های گالپ رو نصب کنید.

فکر می‌کنم حالا Gulp نصب و دانلود شده! میتونید با تایپ دستور gulp اینو امتحان کنید، اگه خطای no gulpfile.js found رو دریافت کردید، نگران نباشید! همه چیز طبیعیه!

----

جلسه بعد: اولین Task

موفق باشید.

10

به اشتراک گذاری این پست


لینک به پست

first_task_topic.png

ساخت اولین Task - مقدمات

در پست قبلی اشاره‌ای کردم که Gulp یک سیستم Task Runner اتوماتیکه. حالا این که گفتی یعنی چی؟ :D

- گالپ به ما قابلیت ایجاد Task یا همون وظایف رو میده. مثلاً ما میتونیم یه Task تعریف کنیم که وقتی ما Task را اجرا کردیم، شما فلان کار رو انجام بده. مثلاً شما تعریف می‌کنی که وقتی دستور gulp رو اجرا کردی، تمام فایل‌های Sassت رو تبدیل به CSS کنه یا به قول اجنبی‌ها Build کنه!

اما گالپ قابلیت دیگه‌ای به نام Watch به ماه میده، به این معنا که ما میتونیم فایل‌های موردنظرمون رو به گالپ بدیم که زیرنظر بگیره و هرموقع که تغییر کرد، اون‌وقت Taskیی رو اجرا کنه، مثلاً می‌تونیم تعریف کنیم که اگر فایل‌های sass تغییر کرد (مثلاً در ویرایشگر تغییرات خودتون رو Save کردید)، بلافاصله همه رو Buid کنه.

برای ایجاد اولین Task، از یک Task معمولی شروع می‌کنیم که خودتون باید به گالپ بگید که این Task رو اجرا کنه و کاری به Saveشدن فایل نداره. Task موردنظرمون، ایجاد یه برنامه هست که فایل‌های CSS رو بخونه و Minify کنه و در قالب یک فایل ذخیره کنه.

باید کدهای Task را در فایلی به نام gulpfile.js بنویسیم تا اجرا شود، احتمالاً دلیل ارور no gulpfile.js found که در پست قبل اشاره کردم رو فهمیدید. گالپ برای اجرا به gulpfile.js که خودمان می‌نویسیم احتیاج دارد. خب، منتظر چی هستیم؟ بریم gulpfile.js بنویسیم! در دایرکتوری موردنظر خودتون gulpfile.js رو ایجاد کنید و با ویرایشگر موردعلاقه‌تون بازش کنید.

از کدهای ابتدایی و اساسی gulpfile.js شروع می‌کنیم:


var gulp = require( 'gulp' );

gulp.task( 'default', function() {
// ...
} );

برای اساس کار، ما ابتدا کلاس خود Gulp را فراخوانی می‌کنیم، سپس با استفاده از gulp.task یک Task جدید تعریف می‌کنیم. پارامتر اول gulp.task همیشه نام Task هست که باید انگلیسی باشه و برای اجرای اون‌هم نیاز داریم تا این اسم رو فراخوانی کنید.

حالا برای اجرای Task کافیه که توی ترمینال خودتون (که قبلاً به دایرکتوری cd کردید) فرمان gulp default رو اجرا کنید. با اجرای دستور، Task به نام default اجرا می‌شود. اگر در کد بنویسیم ehsaan و در ترمینال هم gulp ehsaan را فراخوانی کنیم، گالپ سراغ Task به نام ehsaan می‌رود.

نکته‌ای که قابل توجه هست اینه که در صورتی که Task به نام default تعریف کنید، با اجرای دستور gulp به تنهایی، همون default اجرا میشه. :)

فایل gulpfile.js زیر رو در نظر بگیرید:



var gulp = require( 'gulp' );

gulp.task( 'task1', function() {
// ...
} );

gulp.task( 'task2', function() {
// ...
} );

gulp.task( 'task3', function() {
// ...
} );

فرض کنید که ما باید حتماً اول task1 رو اجرا کنیم، بعد task2 و بعد task3، خب احتمالاً راه‌حل اینه:


gulp task1
gulp task2
gulp task3

اما چندان منطقی به نظر نمیاد! Gulp به ما امکان تعریف پیش‌نیاز برای اجرای Taskها رو میده، کافیه بعد از پارامتر نام Task، یک آرایه از نام Taskهای پیش‌نیاز را تعریف کنید! به همین راحتی! مثلاً در مثال زیر، برای اجرای task2 نیاز به task1 هست و اجرای task3 نیاز به task2 هست.



var gulp = require( 'gulp' );

gulp.task( 'task1', function() {
// ...
} );

gulp.task( 'task2', [ 'task1' ], function() {
// ...
} );

gulp.task( 'task3', [ 'task2' ], function() {
// ...
} );

حالا اگر تنها task3 رو اجرا کنید، می‌بینید که task1 و task2 به ترتیب اجرا خواهند شد.

در قسمت بعد، ایده‌ی خودمون رو عملی می‌کنیم ;)

----

قسمت بعدی: نوشتن یک Task کاربری

موفق باشید.

8

به اشتراک گذاری این پست


لینک به پست

gulp_task_2.png

ساخت یک gulpfile.js حسابی!

اینم آخرین پست آموزشی در تاپیک آموزش کاربردی Gulp! بعد از خوندن پست، شما می‌تونید یه محیط اتوماتیک حسابی با Gulp برای خودتون طراحی کنید و حالشو ببرید! بعد از این پست، شروع به مثال‌زدن می‌کنیم، مثلاً این‌که چطور پلاگین باحال browser-sync رو با گالپ هماهنگ کنیم یا تو چند دقیقه یه CSS رو راست‌چین کنیم!

خب توی پست قبل گفتم که میخوایم یه gulpfile.js بسازیم که تا بهش گفتیم فایل‌های CSS ما رو بخونه، minify کنه و در قالب یه فایل جمع کنه! همتون می‌دونید که هرچی فایل‌های CSS و JS یک فایل کم‌حجم‌تر باشن خیلی بهتره و روی سئو تأثیر داره (شخصاً به سئو هیچ اعتقادی ندارم) و چه بهتر که این فایل‌ها در قالب یک فایل واحد جمع بشن.

خب برای کم‌حجم‌کردن (که بهش میگیم Minify) و بعد هم یکی‌کردن (بهش می‌گیم concat) سایت و سرویس‌های خیلی زیادی وجود دارن که البته یه کم کار سخت میشه که مرتب بخواید روی سرویس‌ها و سایت‌ها آپلود کنید و بعد دوباره دانلود کنید، بنابراین از GulpJS کمک می‌گیریم که با اجرای یه دستور، همه‌ی این کارها رو انجام بده.

به قول یکی از دوستان بعد از مدتی متوجه میشید که گالپ تنها کاری که نمی‌تونه انجام بده، اینه که بره از سر کوچه نون بخره :D

اما این Minifyکردن و Concat رو گالپ به تنهایی نمیتونه انجام بده و باید از پلاگین‌های گالپ استفاده کنیم. پلاگین‌هایی که برای این مورد کار ما نوشته‌شده‌اند اسمشون gulp-minify-css و gulp-concat هست، بنابراین برای انجام این‌کار باید این دوتا پلاگین رو نصب کنیم.

1. نصب پلاگین‌ها

یه کم از تئوریات بیایم بیرون، اگه جایی از تئوریات رو نفهمیدید، با یه سرچ ساده می‌تونید به نتایج خوبی برسید. کارمون رو با نصب دوتا پلاگین gulp-minify-css و gulp-concat شروع می‌کنیم.

برای نصب از npm کمک می‌گیریم، توی خط‌فرمان یا ترمینالتون این دستور رو وارد کنید:


npm install -g gulp-minify-css gulp-concat

نکته: sudo فراموشتون نشه!

2. استفاده از پلاگین‌ها

گر صبر کنید، بعد از مدتی ز گالپ حلوا سازید و پلاگین‌هاتون نصب میشه. حالا برمی‌گردیم سر gulpfile.js خودمون:


var gulp = require( 'gulp' );

gulp.task( 'default', function() {

} );

باید پلاگین‌های موردنظر خودمون رو در gulpfile.js فراخوانی کنیم، مثلاً اینطوری:



var gulp = require( 'gulp' );
var minifyCss = require( 'gulp-minify-css' );
var concat = require( 'gulp-concat' );

حالا پلاگین‌های ما آماده هست!

حالا یه Task می‌سازیم که فایل‌های CSS رو minify کنه و یکی کنه و بریزه توی دایرکتوری dist.

خب من یه Task به نام build-css تعریف می‌کنم و کدهای خودم رو می‌نویسم:



gulp.task( 'build-css', function() {
return gulp.src( './css/*.css' )
.pipe( minifyCss() )
.pipe( concat( 'style.css' ) )
.pipe( gulp.dest( './dist/' ) );
} );

نترسیدید که؟! :D

کد خیلی ساده و خوانا هست!

اول که از gulp.src برای خوندن فایل‌های موردنظرمون استفاده می‌کنیم، به gulp.src می‌گیم که هر فایلی که در مسیر /css/ با پسوند css هست رو پیدا کنه، بعد minifyCss رو روش اجرا کنه و بعد concat رو اجرا کنه. به concat هم پارامتر نام فایل حاصل رو میدیم که همه رو که یکی کرد توی چه فایلی بریزه و در آخر هم با gulp.dest می‌گیم که حاصل رو کجا بریزه که ما بهش گفتیم در دایرکتوری dist بریزه!

خب حالا کافیه که دستور gulp build-css رو اجرا کنید و جادوی gulp رو ببینید! :D

راحت بود، نه؟ البته اینطوری کسی یاد نمی‌گیره :D

ان‌شاءالله پست‌های بعدی با هم مثال کار می‌کنیم. خودتون هم gulp plugins رو گوگل کنید و هر کدوم که به نظرتون جالب‌تره رو دانلود کنید و ازش استفاده کنید!

-----

منتظر گذوشتن مثال‌هاتون توی همین تاپیک هستم.

موفق باشید.

8

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط centralfile
      سلام دوستان من افزونه wp original media path رو نصب کردم تنظمات مربوطه رو انجام دادم.
      یک ساب دامنه برای سایت ایجاد کردم.
      فایل های مربوط به پوشه uploads/wp-content رو هم به ساب دامنه انتقال دادم  اما عکس ها و فایل ها هنوز تو سایت لود نشده.
      پیوند های یکتا رو هم بروز رسانی کردم ولی  مشکلی حل نشد!
      ساب دامنه ایجاد شده و فایل ها داخلش قرار گرفتند
      اینم اسکرین شات از تنظیمات افزونه
       
       
       
       
       
      ممنون میشم کمک کنید.



    • توسط p1touchbiz
      دراین مقاله سعی داریم که تعریف درست از دسته بندی در وردپرس و برچسب گذاری در وردپرس را داشته باشیم .  درسایت های وردپرسی این دو مفهوم بسیار به یکدیگر شبیه می باشند و در بسیاری موارد باهم دیگر اشتباه میشود .  درمجموع هردو این ها وظیفه اول و اصلیشان کمک به ایجاد یک سایت منظم و گویا برای مخاطب می باشد و به طور مستقیم روی سئوی سایت شما تاثیر ندارند .
      دسته بندی در وردپرس چیست ؟
      موضوعات اصلی سایت در دسته بندی ها جای میگیرد .
      مثلا مطالب سایت شما صرفا در مورد آشپزی و پزشکی میباشد .  پس سایت شما دو دسته اصلی دارد و میتواند زیر دسته های دیگری هم در هرکدام از این دسته های اصلی جای بگیرد .
      مثلا در دسته اصلی آشپزی چند زیر دسته ی دیگر میتواند وجود داشته باشد مانند فست فود ها ، دسر ها ، پیش غذاها و غیره.
      و شما میتوانید برای هردسته زیر دسته های دیگری درست کنید . و البته با تشکیل هردسته میتوانید مادر آن دسته را نیز مشخص کنید .
      اگر هر دو یا سه روز یکبار در مورد یک موضوع خاص نوشته ایجاد میکنید و تعداد قابل توجهی از نوشته های سایت شما مربوط به آن موضوع میشود برای آن موضوع باید دسته بندی ایجاد کنیم .
      برای ایجاد دسته بندی در پنل وردپرس سایت خود درستون سمت راست درقسمت نوشته ها میتوانید روی دسته ها کلیک کنید .
       
       

       
       
      برچسب گذاری در وردپرس چیست ؟
      برای برچسب گذاری در وردپرس زمانی که پیرامون یک موضوع جزیی تر مطالبی دارید و تعداد این مطالب آنقدر زیاد نیست و البته خود آن موضوع فرعی و آنقدر کلی نباشد که بخواهید برای آن دسته تشکیل بدهید میتوانید یک برچسب مشترک برای آن مطالب ایجاد کنید .
      به عنوان مثال در دسته بندی آشپزی شما چند نوشته پیرامون فواید و خواص سبزی ایجاد کرده اید و برچسب فواید میوه و سبزی را برای آن گذاشته اید .
      حالا شخصی که روی این برچسب کلیک کند میتواند تمامی نوشته هایی که این مضمون را درخود دارند و مربط به آن میباشد را مشاهده کند .
      به طور کلی اگر بیشتر از ۵ تا ۱۰ نوشته پیرامون یک مطلب ارسال کرده اید برای آن برچسب جداگانه تشکیل دهید .
      امیدوارم این مقاله به شما کمک کرده باشد و ممنون میشم اگه نظرات خودتون را پایین مقاله برای ما ارسال کنید .
       
      آموزش ویدئویی وردپرس در ۳ روز را اینجا ببینید .
      برای آنالیز سئو سایت خود اینجا کلیک کنید .
    • توسط behnamstar
      سلام و عرض ادب
      من یه سایت وردپرسی دارم که به تازگی تغییر دامنه روش انجام دادم که بعد ازینکار مشکل عجیبی اتفاق افتاده 
      من دامنه ی https://damane1.co m رو ریدایرکت کردم به https://damane2.co m الان اتفاقی که میفته دامنه 1 ریدایرکت میشه روی دامنه 2 
      ولی زیر دامنه ها ریدایرکت نمیشن 
      مثلا روی این لینک کلیک بشه (https://damane1.co m/linksite) باید این لینک باز شه (https://damane2.co m/linksite)
      ولی این لینکها جدا جدا باز میشن 
      فقط دامنه https://damane1.co m روی https://damane2.co m ریدایرکت میشه بقیه ی لینک ها همه جدا جدا باز میشن.
      ممنون میشم از دوستان کمک کنن 
      حتی به هاست پشتیبانی هم تیکت دادم ولی متوجه مشکل نشدن.
    • توسط hatef
      سلام دوستان
      خسته نباشید من پسرم 15 سالشه و عاشق کامپیوتر و برنامه نویسی مخصوصا طراحی سایته. متاسفانه آموزش برنامه نویسی برای بزرگسالان زیاده اما منی که برای کودکان میخوام اصلا نیستش شما ها که همگی واردید در این زمینه آیا سایتی میشناسید که بتونه برای کودکان برنامه نویسی رو ساده و در حد خودشن یاد بده؟
      البته یکی دوتا سایت هستش برای کودکان که آموزش های زیادی دارن بعد آموزش برنامه نویسی هم دارن اما الان دقیق نمیتونم لینکشو بدم چون پیداش نمیکنم اما آدرس کلی سایتشونو میدم اگزر چک کنید هستش توش. معرفی کنید ممنون میشم.
       
      این سایت آموزش های همه چی در مورد کودکان داره ولی لینکه برنامه نویسشو پیدا نمکینم:
      https://kodakanema.com/
       
      این سایتم که خیلی معروفه اینم هستش.
      https://www.ninisite.com/
      یکی دیگه هم هستش اسمش فرادرسه اما نمیدونم چجوریه
      https://faradars.org/courses/fvsch9503-scratch-visual-programming-for-children
    • توسط Streetlife
      سلام دوستان گرامی و متخصصان
      بنده یک سوال مهم و یک راهنمایی از اساتید نیازمندم
      میخوام به یک سایت وردپرسی به صورت پاپ اپ یک صفحه نطرسنجی رو اضافه کنم.نظرسنجی به صورت پاسخ دلخواست و میخام کاربر وقتی میخواد کلمه ی مورد نظر که از محصولات سایت هستش رو تایپ میکنه با نوشتن قسمتی از اون به صورت پیشنهادی کلمات مشابه رو نشون بده مثل گوگل
      هرچی گشتم چیزی رو پیدا نکردم خواهشمندم راهنمایی بفرماااییید