اندازهی قلم متن
تخمین مدت زمان مطالعهی مطلب:
سه دقیقه
همانطورکه در مقالهی قبلی پایهی ورک فلوی خود را راه اندازی کردیم، در این مقاله میخواهیم با طراحی یک صفحه، با بوت استرپ شخصی سازی شده، در عمل با کارایی گالپ آشنا شویم.
دمو پایانی:
میدانیم برای استفاده از یک پلاگین باید توسط متد require آن را به یک متغیر انتساب دهیم؛ به صورت زیر:
توجه کنید هر پلاگینی که اضافه میکنید، باید تسک مربوط به آن را بنویسیم تا بتوانیم از آن استفاده کنیم. برای این پلاگین فقط مشخص کردن مسیر root سرور کافی است.
حال میخواهیم با زدن gulp watch، تمام کارهای ما به صورت خودکار انجام شوند. اما این دستور که در جلسهی قبل آنرا تعریف کردیم، فقط منتظر انجام یک تغییر است. تسک watch را به گونهای تغییر میدهیم که ابتدا تسکهای css , brower sync انجام شوند (به دلیل اینکه باید ابتدا، سرور راه اندازی شود) سپس گالپ منتظر تغییرات باشد و آنها را اعمال کند.
تسکهای html,css,browserSync قبل از تسک watch اجرا میشوند. طبق مستندات، این پلاگین یکی از توابع API متد watch است و کار آن همانند متد مشابهی در گالپ است. آن را برای ریلود خودکار مرورگر استفاده میکنیم.
میخواهیم بعد از کامپایل، فایلهای sass هم مرورگر دوباره بارگذاری شوند. کد زیر را به انتهای تسک css اضافه میکنیم:
بسیار خوب با انجام این کارها پلاگین باید بهدرستی کار کند.
حال دستور gulp را میزنیم. با اینکار فایل style.scss کامپایل میشود. میخواهیم یک فونت فارسی و یک قالب فلت را به پروژهامان اعمال کنیم. من فایلها را اضافه کردهام و شما با یک نگاه میتوانید، چیزی را که گفتم درک کنید.
نکته : سعی کنید برای استایل هر قسمت، یک فایل مجزا درست کنید؛ مانند مثال بالا که در پروژه لحاظ شده.
مخزن گیت هاب : کامیت :
به هنگام سازی مرورگر و بارگذاری مجدد به صورت خودکار
یکی از موارد فوق العاده تکراری در هنگام توسعهی وب، برای یک توسعه دهنده سمت کاربر (Front end Developer) ریلود کردن مرورگر است. همچنین تست وب سایت یا آپلود در موبایل و سایر داستگاهها، متداول است. با پلاگین گالپ میتوان این مشکل را به صورت بهینهای حل کرد.
نصب
برای نصب دستور زیر را در مسیر پروژه، در ترمینال سیستم عامل خود وارد کنید.
npm install browser-sync gulp --save-dev
var gulp = require('gulp'), sass = require('gulp-ruby-sass'), notify = require('gulp-notify'), browserSync = require('browser-sync'), // Add browser syns plugin bower = require('gulp-bower');
gulp.task('browserSync', function() { browserSync({ server: { baseDir: './' //our server root } }); });
gulp.task('watch', [ 'css','browserSync'], function() { })
// Rerun the task when a file changes gulp.task('watch', ['html', 'css','browserSync'], function() { gulp.watch(config.sassPath + '/**/*.scss', ['css']); gulp.watch(config.htmlPath , ['html'] ) browserSync.watch("./*.html").on("change", browserSync.reload); // browserSync watch task });
.pipe(browserSync.reload({ stream: true }));
شخصی سازی بوت استرپ
برای شخصی سازی بوت استرپ کافی است ابتدا فایلهای sass بوت استرپ و FontAwesome را در style.scss ایمپورت کنیم؛ به این صورت:
@import "bootstrap"; @import "font-awesome";
@import "fonts-fa"; @import "variable"; @import "bootstrap"; @import "font-awesome"; @import "rtl.scss"; @import "typography";
برای توسعهی پروژه، ابتدا مخزن گیت هاب را فورک کرده و با زدن دستورات زیر کار خود را آغاز کنید:
- sudo npm install
- gulp
- gulp watch
مخزن گیت هاب : کامیت :