تمامی مراحل یک پروژه را به Gulp بسپارید

تمامی مراحل یک پروژه را به Gulp بسپارید
شما در طول انجام یک پروژه با فرآیندهای زیادی روبرو میشید. کامپایل کردن فایل های SASS و یا LESS , مینیفای کردن کدها و یا ادغام کردن اونا. حتی شاید نیاز داشته باشید بر روی یک سری از فایل های خاص پردازش هایی انجام بدید و سپس اونا رو به یک پوشه خاص منتقل کنید. حتی بعد از هر تغییر بر روی فایل CSS , به طور خودکار فایل CSS رو از طریق ftp آپلود کنید. حتما با این مقاله از مجیدآنلاین همراه باشید.
سایت ساز سی می پلاس
در جشنواره طراحی سایت 20 تا 20 سی می پلاس وبسایت خود را بسازید و جایزه بگیرید
تصفیه هوا
سیستم تصفیه هوا هایدن ارایه شده توسط شرکت تهویه سپهر
خودتان را اینجا معرفی کنید

گالپ یه ابزار بر پایه ی جاوا اسکریپت هست که به شما این اجازه رو میده که بتونید تمام مراحل پروژه خودتون رو به صورت خودکار پیش ببرید. در این مقاله در مورد نصب گالپ و ساختار اون صحبت می کنیم و در آخر یک پروژه می تونید خیلی ساده گالپ و بسته های الحاقی اون رو نصب کنید تا بتونید به سادگی LESS رو کامپایل کنید یا تصاویرتون رو بهینه کنید و یا ...
 

نصب گالپ


 
خیلی آسون می تونید گالپ رو بر رروی سیستمتون نصب کنید. فقط برای نصب گالپ باید از طریق ترمینال -در لینوکس و یا OSX- و یا CMD در ویندوز استفاده کنیم. خط فرمان رو باز کنید و در آن npm -v رو تایپ کنید. اگر با خطایی مواجه نشدید یعنی Node بر روی سیستمتون نصب شده و می تونید یه مرحله جلو برید. در غیر اینصورت باید Node.js رو از اینجا دانلود کنید و با توجه به سیستم عامل دستگاهتون , نسخه اون رو انتخاب کنید و با چند کلیک ساده نصبش رو به اتمام برسونید. وقتی نصب Node به اتمام رسید میتونید از دستور npm در CMD استفاده کنید. (اصلا سخت نیست smiley )
فقط کافیه خط زیر رو در CMD خودتون کپی کنید و اینتر رو بزنید.
npm install --global gulp
با این کار شما توسط npm که یک سیستم مدیریت بسته های Node هست , گالپ رو نصب می کنید. حالا گالپ در تمام سیستم شما قابل دسترسی و استفاده هست.

گالپ نصب شده و حالا باید اون رو به پروژه خودمون اضافه کنیم. دقت کنید که دیگه نیازی به نصب گالپ و یا Node.js نیست و فقط در هر پروژه یک بار گالپ رو اضافه کنیم. به این دلیل که در هر پروژه , امکانات خاصی از گالپ رو مورد استفاده قرار میدیم.
یک پوشه جدید برای پروژه خودتون ایجاد کنید و در CMD با دستور cd به مکان اون پروژه وارد شید.
enlightenedمیتونید دستور cd رو با یک خط فاصله در CMD تایپ کنید و سپس با Drag & Drop پوشه پروژه رو به داخل CMD رها کنید و اینتر بزنید.


 
دقت کنید که در مسیر پروژه ایجاد شده قرار گرفته باشید و سپس خط زیر رو در CMD کپی کنید.
npm install --save-dev gulp
حالا می بینید که در پوشه پروژه شما , پوشه جدیدی به نام node_modules اضافه شده. نگران نباشید اصلا با این پوشه کاری نداریم. گالپ برای اجرای دستورات شما از محتویات این پوشه کمک میگیره.

Gulpfile

تمام اتفاقات توسط یک فایل جاوا اسکریپت اتفاق میفته. این که چه اتفاقاتی در چه زمانی رخ بده رو شما در این فایل مشخص می کنید. هر اتفاق رو از این جا به بعد یک سناریو نام می بریم. خب حالا یک سناریو رو تعریف می کنیم. برای این کار ابتدا یک بار فایل gulpfile.js رو ایجاد می کنیم. حالا کد زیر رو در اون کپی می کنیم.
var gulp = require('gulp');
 
gulp.task('default', function() {
  // کارهایی که باید انجام شود
});
فایل رو ذخیره کنید و سپس CMD رو باز کنید و تنها بنویسید gulp و سپس اینتر رو بزنید.


میبینید که مشکلی در اجرای این سناریو پیش نیومده با اینکه اتفاق خاصی هم نیفتاده. حال برای این سناریو یک سری وظایف رو تعریف می کنیم. فرض کنیم می خوام یک فایل متنی رو از مکانی در پروژه به مکان دیگری منتقل کنم. یک فایل با نام to_copy.txt ایجاد می کنم.
حالا فایل gulpfile.js رو باز می کنیم و کد زیر رو در انتهای کدهای قبلی اضافه می کنیم.
gulp.task('copy', function() {
  return gulp.src('to_copy.txt').pipe(gulp.dest('dev'));
});
در اولین خط سناریویی به نام copy ایجاد می کنیم که در زمان اجرای این سناریو , تابعی رو فراخوانی کنه. این تابع توسط gulp.src فایل to_copy.txt رو انتخاب می کنه و سپس منتقل میشه برای اعمال دستور بعدی تا بتونه فایل انتخابی رو در پوشه ای به نام dev کپی کنه.
enlightenedدر گالپ انتقال دستورات با pipe. پیاده سازی میشه.
حالا CMD رو باز کنید و کلمه کلیدی gulp رو به همراه سناریویی که انتظار دارید انجام بشه رو بنویسید و اینتر بزنید. ( بنویسید gulp copy)

با استفاده از دستور gulp.src میتونید چندین فایل رو هم انتخاب کنید. برای مثال در کد زیر تمام محتویات پوشه development در پوشه production کپی می شوند.
gulp.task('copy', function() {
  return gulp.src('development/*')
    .pipe(gulp.dest('production'));
});
یکی از کارهایی که طراحان وب انجام میدن کامپایل کردن LESS و Sass هست. در حالت عادی برای استفاده از LESS باید فایل style.less و less.js رو در پروژه داشته باشیم تا فایل LESS در مرورگر توسط less.js کامپایل بشه و بتونیم نتیجه رو مشاهده کنیم. و بعد از اتمام پروژه این دو خط آدرس رو از پروژه برداریم و فایل less رو به طور دستی به CSS کامپایل کنیم و آدرس فایل CSS رو در پروژه بنویسیم و بعد پروژه رو آپلود کنیم!!! surprise
پیشنهاد می کنم حتما این مقاله رو مطالعه کنید تا با LESS و دیگر پیش پردازنده های CSS بیشتر آشنا بشید. برای استفاده از LESS کافیه LESS Gulp رو گوگل کنید wink معمولا اولین نتیجه همونیه که ما دنبالشیم smiley
می تونید از اینجا به طور مستقیم  با بسته ی LESS برای گالپ آشنا شید.

نصب بسته های گالپ خیلی سادست. فقط نیازه بعد از npm install , اسم بسته رو بنویسید.
npm install gulp-less
یک فایل style.less ایجاد می کنیم و یه مقدار less بنویسیم. حالا فایل gulpfile.js رو باز می کنیم و یک سناریوی جدید می نویسیم.
gulp.task('less',function(){
    gulp.src('*.less').pipe(less('main')).pipe(gulp.dest('public'));
});
سناریویی به نام less تعریف کردیم که ابتدا تمام فایل هایی که پسوند less. دارن رو انتخاب می کنیم و منتقلشون می کنیم به تابع less که در اینجا کامپایل میشه و سپس مستقیم اون رو در خروجی (در اینجا پوشه ای با نام public) قرار میدیم.
فقط حتما باید کد زیر رو در ابتدای gulpfile.js بنویسیم.
var less = require('gulp-less');

مسلما جالب نیست که بعد از هربار تغییر در فایل style.less , یک بار CMD رو باز کنیم و gulp less رو اجرا کنیم. می تونیم با کمک دستور watch , یک فایل یا چندین فایل رو زیر نظر داشته باشیم تا به محض اعمال تغییر بر روی اونا , یک سناریو خاص رو اجرا کنیم. laugh
gulp.task('auto',function(){
    gulp.watch('*.less',['less']);
});
یک سناریوی جدید ایجاد می کنیم. در این سناریو تعریف می کنیم که تمام فایلهایی که پسوند less. دارن رو زیر نظر داشته باشه و به محض تغییر , سناریوی less رو اجرا کنه.


نتیجه گیری
استفاده از گالپ سخت و پیچیده نیست و می تونه در پروژه ها کمک قابل توجهی کنه. فقط ابتدا باید به دنبال پلاگین مورد نظرتون بگردین و با یک دستور نصبش کنید و موارد مورد نیاز پلاگین (که در صفحه ی پلاگین به طور کامل نوشته شده)رو در gulpfile.js بنویسید.

امیدوارم این ابزار بتونه بهتون کمک کنه که حرفه ای تر توسعه بدید wink

رضا از سال 87 برنامه نویسی را با زبان های خانواده C شروع کرد و بعد از 4 سال به سمت طراحی و برنامه نویسی تحت وب رفت. وی همزمان با تحصیل در مقطع کارشناسی رشته مهندسی کامپیوتر به امر ترجمه کتاب در حوزه برنامه نویسی مشغول بود که کتاب او در مرحله ویراستاری قرار دارد. به روز بودن و افزایش مستمر اطلاعات شخصی در زمینه وب دغدغه ی اصلی و همیشگی رضاست.

نظرات و سوالات کاربران

ارسال پاسخ مونا
مونا
یکشنبه ۱۰ بهمن ۱۳۹۵ ۱۳:۰۴
با سلام و عرض خسته نیاشید میشه مشابه دستور زیر را در sass بگید من هر فایل های sass هم کامپایل نمیشه
gulp.task('less',function(){
gulp.src('*.less').pipe(less('main')).pipe(gulp.dest('public'));
});
ارسال پاسخ طراحی سایت
طراحی سایت
یکشنبه ۰۵ اردیبهشت ۱۳۹۵ ۱۲:۵۸
ممنون از سایت خوبتون
یه سری مقاله مرتبط با این موضوع تو سایتم قرار دادم
امیدوارم مفید باشه برای دوستانم
cms-iran.com/
ارسال پاسخ محمد
محمد
یکشنبه ۱۶ اسفند ۱۳۹۴ ۱۲:۱۱
من قبلا یک سری آموزش گالپ رو نوشتم. شاید برای دوستانی که می خوان تحت پروژه یاد بگیرن کمک خوبی باشه!
www.dotnettips.info/learningpaths/details/37