آخرین مطالب
امکانات وب
در این مطلب با ادامه آموزش گرانت در خدمتتون هستیم.
در جلسه گذشته توضیحاتی در مورد فایل 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 11 | module.exports = function (grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { // ... } }); grunt.loadNpmTasks('grunt-contrib-concat'); }; |
میبینید که درون initConfig یک task بنام concat ساختیم و حالا میتونیم وظائف و تنظیمات مربوط به اتصال فایلها رو به اون بگیم. در ابتدا میخایم در این وظیفه دو تا کار رو بکنیم. یکی اینکه فایلهای js رو یکی کنیم و بعدی اینکه فایلهای css رو یکی کنیم. پس به این منظور درون concat موارد زیر رو قرار میدیم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | module.exports = function (grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { css: { // ... }, js: { // ... } } }); grunt.loadNpmTasks('grunt-contrib-concat'); }; |
بجای اسمهای css و js هر اسمی که دوس داشتید میتونید بزارید ولی در زمان اجرا باید همون اسمی که خودتون انتخاب کردید رو وارد کنید. میبینید که دو تا کار رو مشخص کردیم. حالا درون هر کدوم باید بگیم که فایلهایی که قصد داریم با هم یکی بشن کجا هستن و همچنین قصد داریم خروجی کجا ریخته بشه. برای اینکار از دو ویژگی src و dest استفاده میشه. با استفاده از src محل فایلهای مورد نظر رو میگیم و با استفاده از dest هم مقصدی که میخایم خروجی در اونجا قرار بگیره. پس بصورت زیر خواهد شد:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | module.exports = function (grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { css: { src: [], dest: '' }, js: { src: [], dest: '' } } }); grunt.loadNpmTasks('grunt-contrib-concat'); }; |
میبینید که جلوی src یک آرایه قرار دادیم که میتونه چندین فایل رو درون خودش قرار بده و خروجی هم که یکی بیشتر نمیتونه باشه. اگه شما هم ساختار پروژتون رو شبیه به من ساخته باشید، پس کدهاتون هم شبیه به من میشه:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | module.exports = function (grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { 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'); }; |
میبینید که محل فایلهای css و js رو وارد کردیم و گفتیم کجا قصد داریم ریخته بشن. در جلسه بعد بیشتر توضیح میدم و کار رو جلو میبریم.
در جلسات بعدی بیشتر در مورد Grunt صحبت میکنیم.
امیدوارم از این جلسه خوشتون اومده باشه.
موفق باشید
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 256
آرشیو مطالب
- دی 1394
- بهمن 1394
- اسفند 1394
- دی 1395
- بهمن 1395
- اسفند 1395
- فروردين 1395
- ارديبهشت 1395
- خرداد 1395
- تير 1395
- مرداد 1395
- شهريور 1395
- مهر 1395
- آبان 1395
- آذر 1395
- دی 1396
- بهمن 1396
- اسفند 1396
- فروردين 1396
- ارديبهشت 1396
- خرداد 1396
- تير 1396
- مرداد 1396
- شهريور 1396
- مهر 1396
- آبان 1396
- آذر 1396
- دی 1397
- بهمن 1397
- اسفند 1397
- فروردين 1397
- ارديبهشت 1397
- خرداد 1397
- تير 1397
- مرداد 1397
- شهريور 1397
- آذر 1397
- دی 1398
- بهمن 1398
- اسفند 1398
- ارديبهشت 1398
- تير 1398
- مرداد 1398
- مهر 1398
- آبان 1398
- آذر 1398
- فروردين 1399
- ارديبهشت 1399
- خرداد 1399
- تير 1399
- شهريور 1399
- بهمن 1400
- اسفند 1400
- ارديبهشت 1400
- دی 1401
- بهمن 1401
- اسفند 1401
- ارديبهشت 1401
- خرداد 1401
- تير 1401
- مرداد 1401
- شهريور 1401
- مهر 1401
- آبان 1401
- آذر 1401
- دی 1402
- بهمن 1402
- اسفند 1402
- فروردين 1402
- ارديبهشت 1402
- خرداد 1402
- تير 1402
- مرداد 1402
- شهريور 1402
- مهر 1402
- آبان 1402
- آذر 1402
- فروردين 1403
- ارديبهشت 1403