در قسمت قبلی بحث کردیم که گالپ چیست و چه کاربردی دارد و در نهایت آن را بر روی سیستم خود نصب کردیم. در این مقاله و مقالات بعد میخواهیم کار خود را با راه اندازی یک workflow برای بوت استرپ، روند شخصی سازی آن را بسیار آسان و لذت بخشتر کنیم. امیدوارم که برای ادامهی این بحث هیجان انگیز آماده باشید!
این دستور برایمان یک فایل package.json میسازد تا هم مشخصات پروژه را مثل نام، ورژن، نام توسعه دهنده، مخزن و ... مشخص کنیم و هم وابستگیهای آن را، تا توسعه دهندگان دیگر، هنگام استفاده از پروژه، با مشکل مواجه نشوند و فقط با اجرای دستور npm install تمام وابستگیهای پروژه را نصب کنند.
الان فایل package.json درست شده و چون ما در این پروژه میخواهیم از گالپ استفاده کنیم، یکی از وابستگیهای پروژهی ما گالپ خواهد بود. بدین معنی که اگر بخواهیم پروژه را توسعه دهیم و گالپ نصب نشده باشد، با مشکل مواجه میشویم.
تفاوتی آن با دستوری که در مقالهی قبلی اجرا کردیم، این است که این دستور فقط گالپ را در مسیر جاری در فولدر node_modules نصب میکند و save-dev -- آن را به وابستگیهای توسعهی پروژه در فایل package.json اضافه میکند.
و حالا آن را در ویراشگر مورد علاقهی خود باز کنید. من از ویرایشگر Atom استفاده میکنم. اما notepad هم کفایت میکند.
require به Node میگوید که به فولدر node_modules برای پکیج gulp نگاه کند. زمانیکه آن را پیدا کرد، آن را به متغیر gulp انتساب میدهیم تا از تابعهای گالپ بتوانیم استفاده کنیم. حال میخواهیم اولین تسک خود را بنویسیم:
گالپ دارای ۴ تابع task,src,dest,watch است که با آنها آشنا خواهیم شد. task یک کار را برای گالپ تعریف میکند و سه پارامتر دارد. اولی نام تسک، دومی (اختیاری) وابستگی این تسک (بدین معنا که اول باید این وظیفه اجرا شود، سپس تسک جاری) و در نهایت تابع درون تسکها را مینویسیم. برای مثال:
فایل را ذخیره کنید. میخواهیم به گالپ بگوییم که این وظیفه را انجام دهد. کافی است gulp hello را در خط فرمان وارد کنیم. نتیجه به صورت زیر خواهد بود:
البته که تسکهایی که برای گالپ مینویسیم، کاراتر از این است؛ برای مثال:
مخزن پروژه در گیت هاب : https://github.com/mmdsharifi/gulp-rtlBootstrap-fontawesome
ساخت پروژه گالپ
ابتدا یک پوشهی دلخواه به نام project را درست کنید.سپس خط فرمان خود را به این مسیر تغییر دهید و در نهایت دستور زیر را وارد کنید:
npm init
حتما مشاهده کردهاید که این دستور چند سوالی را از شما میپرسد. برای نمونه من آنها به این صورت پاسخ میدهم و در نهایت از من یک تایید میگیرد که yes را میزنم.
name: (Gulp-RTLbootstrap-fontawesome) version: (1.0.0) description: An Awesome workflow entry point: (index.js) index.html test command: test git repository: https://github.com/mmdsharifi/gulp-rtlBootstrap-fontawesome.git keywords: gulp,rtlbootstrap,persian bootstrap author: Mohammad Sharifi license: (ISC) MIT
نصب گالپ
در خط فرمان دستور زیر را وارد کنید تا گالپ در این پروژه نصب شود.
npm install gulp --save-dev
گام بعدی، ساخت فایلی است که گالپ به آن نیاز دارد تا با استفاده از آن، تسکها و کارهایی را که برایش نوشتهایم، از آن بخواند و اجرا کند.
ایجاد فایل gulpfile.js
این فایل را یا به صورت دستی ایجاد کنید یا با خط فرمان با دستور ذیل:
touch gulpfile.js
نوشتن اولین تسک گالپ
در ویراشگر خط زیر را مینویسیم:
var gulp = require('gulp');
gulp.task('task-name', function() { // Stuff here });
gulp.task('hello', function() { console.log('Hello Gulp !'); });
البته که تسکهایی که برای گالپ مینویسیم، کاراتر از این است؛ برای مثال:
gulp.task('task-name', function () { return gulp.src('source-files') // Get source files with gulp.src .pipe(aGulpPlugin()) // Sends it through a gulp plugin .pipe(gulp.dest('destination')) // Outputs the file in the destination folder })
با استفاده از متد src به گالپ میگوییم که مسیر مبداء فایلها، برای انجام تسک کجا است و dest هم بعد از انجام تسک، فایلهای خروجی را به مقصد مشخص میبرد. متد pipe یک تابع ند جی اس است که مطابق مستندات خودش متدی است که تمام جریانهای قابل خواندن را واکشی میکند و به مسیری [که به صورت آرگومان به عنوان مقصد] داده شده، هدایت میکند.
شاید در ابتدا نوشتن تسک برایتان کمی پیچیده باشد، اما بعد از ساخت اولین پروژه با گالپ، خواهید دانست که تسک نوشتن برای گالپ کاری بسیار آسان و شیرین است!مخزن پروژه در گیت هاب : https://github.com/mmdsharifi/gulp-rtlBootstrap-fontawesome
نام کامیت این قسمت: Init commit