سون لرن • آموزش

آموزش ادغام و ترکیب چند فایل پاورپوینت به یکدیگر چگونه انجام می‌شود؟ یکی از نرم افزار های بسیار قدرتمند برای نمایش اسلاید در دنیا PowerPoint است که بیشتر سخنران ها و دانشحویان برای ارائه و سخنرانی خود از این برنامه استفاده می‌کنند، البته قدرت و کارای, ...ادامه مطلب

0 68 ۱۷ مرداد ۹۵ در این مطلب با ادامه آموزش Grunt در خدمتتون هستیم. در جلسه قبل توضیحاتی در مورد پلاگین grunt-contrib-concat دادیم و فایلهای css و js رو بهم دیگه متصل کردیم و خروجی گرفتیم. در این جلسه میخایم تعدادی ترفند پیشرفته برای استفاده از این پلاگین بهتون بگیم و در جلسه بعدی بریم سراغ پلاگین بعدی. فرض کنید زمانی که داریم چنتا فایل رو با هم دیگه ترکیب میکنیم، بخایم در خروجی در لابلای هر کدام از فایلها یک جداکننده قرار بگیره و مشخص کنه که از اینجا به بعد کدهای فایل بعدی قرار گرفته. برای اینکار باید درون وظیفه concat که ساختیم یک ویژگی بنام options اضافه کنیم و تنظیمات اضافه خودمون رو درونش قرار بدیم. بصورت زیر: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 module.exports = function (grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { options: { // ... }, css: { src: ['development/css/css1.css', 'development/css/css2.css'], dest: 'final/css/final.css' }, js: { src: ['development/js/js1.js', 'development/js/js2.js'], dest: 'final/js/final.js' } } }); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.registerTask('default', ['concat']); }; برای قرار دادن جداکننده باید از ویژگی separator استفاده کنید و رشته مورد نظر خودتون رو درون اون قرار بدین. بصورت زیر: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 module.exports = function (grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { options: { separator: 'nn/*--------Next File-------*/nn' }, css: { src: ['development/css/css1.css', 'development/css/css2.css'], dest: 'final/css/final.css' }, js: { src: ['development/js/js1.js', 'development/js/js2.js'], dest: 'final/js/final.js' } } }); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.registerTask('default', ['concat']); }; میبینید که یک کامنتی رو قرار دادیم و قبل و بعد از اون دو تا n قرار دادیم تا از خطوط قبلی و بعدی خودش فاصله بگیره. حالا اگر در cmd کلمه grunt رو بنویسیم و اینتر بزنیم، هم در فایل خروجی css و هم در js کامنت مورد نظر بعنوان جد, ...ادامه مطلب

0 30 ۱۶ مرداد ۹۵ 16در این مطلب با ادامه آموزش Grunt در خدمتتون هستیم. در جلسه قبل توضیحاتی در مورد پلاگین grunt-contrib-concat دادیم و گفتیم که چطور فایل gruntfile.js رو تغییر بدین. تا اینجای کار فایل gruntfile.js بصورت زیر هست: حالا اگه بخوایم از Grunt استفاده کنیم و تنظیماتی که در بالا مشخص کردیم، انجام بشن باید بصورت زیر عمل کنیم. در ابتدا باید cmd رو باز کنید و با استفاده از دستور cd به ریشه پروژه خودتون برید. بعد از اون میتونین یک سری دستور رو بزنید: grunt concat:css : اگر این دستور رو تایپ کرده و اینتر بزنیم، فقط بخش css که در وظیفه concat هست اجرا میشه و دو فایل css با هم ترکیب میشن و فایل final.css در پوشه final ساخته میشه grunt concat:js : اگر این دستور رو تایپ کرده و اینتر بزنیم، فقط بخش js که در وظیفه concat هست اجرا میشه و دو فایل js با هم ترکیب میشن و فایل final.js در پوشه final ساخته میشه grunt concat : اگر این دستور رو زده و اینتر بزنیم، هر دو کار js و css همزمان انجام میشن و دو فایل final.css و final.js ساخته میشه و در مسیرهای مشخص شده قرار میگیرن اگر قبل از اینکه دستورات بالا رو اجرا کنید، درون پوشه final و پوشه های css و js نگاه کنید، هیچ فایلی وجود ندارد. هر کدام از این دستورات رو که اجرا میکنیم، grunt یک سری اطلاعات بهمون میده و اگر کاری که میکنه موفقیت آمیز باشه یک کلمه Done رو برمیگردونه و مشخص میکنه که کار مورد نظر انجام شده. حالا برای شروع ما دستور اول رو مینویسیم و اینتر میزنیم: همونطور که در بالا میبینید، دستور مورد نظر انجام شده و در آخر Done رو به ما نشون داده. حالا اگر به پوشه css واقع در پوشه final بریم، میبینیم که یک فایل جدید بنام final.css موجود هست. اگر محتویات اون رو ببینیم بصورت زیر هست: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 body {   text-align: left; } /* CSS is cool */ div {   font-family: Roboto; } * {   text-align: right; } /** Headers */ h2 {   font-family: Arial; } میبینید که کار مورد نظر انجام شده و دو فایل css با هم یکی شدن. حالا اگر همینکارو برای js انجام بدیم هم به همین صورت خواهد بود. اگر دستور سوم رو قرار بدیم، بصورت زیر میشه: میبینید که js و css , , آموزش استفاده از فایندر , آموزش استفاده از *** , آموزش استفاده از اسپری تاخیری , آموزش استفاده از توییتر , آموزش استفاده از nomao , آموزش استفاده از تلگرام , آموزش استفاده از openvpn در ویندوز , آموزش استفاده از snapchat , آموزش استفاده از اینستا فالو , آموزش استفاده از کاندوم , ...ادامه مطلب

0 17 ۱۵ مرداد ۹۵ در این مطلب با ادامه آموزش گرانت در خدمتتون هستیم. در جلسه گذشته توضیحاتی در مورد فایل gruntfile.js دادیم. در این جلسه میخایم توضیحات رو پیش ببریم و همچنین از یکی از پلاگین های گرانت بنام grunt-contrib-concat برای اتصال فایلها به هم استفاده کنیم. در قدم اول دو تا فایل css و دو تا فایل js رو در پوشه development برای نمونه قرار میدیم و روی اونا کار میکنیم. در ابتدا فایلهای زیر رو دانلود کنید: درون این فایل zip دو تا پوشه هس و درون هر کدوم نیز دو تا فایل وجود داره. این پوشه ها رو درون پوشه development خودتون قرار بدین. تا اینجای کار ساختار پروژه به صورت شکل بالاست. هدف ما اینه که دو فایل css رو با هم و دو فایل js رو نیز با هم ترکیب کنیم و خروجی های بوجود اومده رو در پوشه css و js موجود در پوشه final بریزیم. برای اینکار در ابتدا باید پلاگین grunt-contrib-concat رو برای پروژه خودتون نصب کنید. اگه به صفحه مرتبط با این پلاگین در سایت npmjs برید، توضیحات کاملی در مورد اون داده شده. در مرحله اول cmd رو باز کنید و با استفاده از دستور cd به ریشه پروژه خودتون برید و عبارت زیر رو درون اون تایپ کرده و اینتر بزنید: همونطور که دیدید عبارت زیر رو قرار دادیم: npm install grunt-contrib-concat --save-dev بعد از اینکه اینتر زدیم، این پلاگین بعد از چند لحظه دانلود و نصب میشه: چونکه در انتهای اون عبارت از --save-dev استفاده کردیم، پس این بسته نیز در فایل package.json و در بخش devDependencies قرار میگیره. فایل package.json بعد از اینکار بصورت زیر بروزرسانی میشه: خب حالا که پلاگین رو نصب کردیم باید از اون استفاده کنیم و درون فایل gruntfile.js اون رو لود کنیم. برای اینکار فایل gruntfile.js رو بصورت زیر تغییر میدیم: 1 2 3 4 5 6 7 8 9 module.exports = function (grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), // ... }); grunt.loadNpmTasks('grunt-contrib-concat'); }; اگه از فایل gruntfile.js عکس بگیرم بصورت زیر هست: دیدید که با استفاده از متد loadNpmTasks پلاگین grunt-contrib-concat رو لود کردیم و قرار دادیم. حالا باید یک task یا وظیفه برای concat بسازیم. برای اینکار بصورت زیر عمل میکنیم: 1 2 3 4 5 6 7 8 9 10 , ...ادامه مطلب

در این مطلب میخوام سایتی رو بهتون معرفی کنم که ابزاری در اون قرار داده شده که با استفاده از اون میتونین یک فابل SVG رو در اون آپلود کنید و این ابزار بهترین حالت برای قرار دادن المنتها در درون یکدیگر رو بهتون نشون میده و میتونین اونو STOP کرده و دانلودش کنید. این فرآیند خودش Stop نمیشه و همواره بدنبال راهی برای بهتر قرار دادن المنتها در یکدیگر هست، هروقت که خودتون فهمیدید بهترین حالت هست، میتونین بر روی Stop کلیک کنید و از اون خروجی بگیرید. برای شروع وارد سایت svgnest بشین. امیدوارم بدردتون بخوره. موفق باشید. یا علی Let's block ads! بخوانید, ...ادامه مطلب