آموزش استفاده از Grunt برای مدیریت وظایف تکراری - Grunt (جلسه 17) - فشرده سازی فایلهای javascript

آخرین مطالب

امکانات وب

آموزش استفاده از Grunt برای مدیریت وظایف تکراری - Grunt (جلسه 17) - فشرده سازی فایلهای javascript - قسمت 2

0 6 ۱۹ مرداد ۹۵

در این مطلب با ادامه آموزش Grunt در خدمتتون هستیم.

grund

در جلسه قبل دیدید که توضیحاتی در مورد grunt-contrib-uglify دادیم و شما رو با اون آشنا کردیم. تا اینجای کار به تصویر زیر رسیدیم: grunt create uglify task 3

حالا که وظیفه خودمون رو ساختیم، باید همانند پلاگین قبلی به grunt بگیم که اون رو بصورت پیش فرض اجرا کن. برای اینکار بصورت زیر عمل میکنیم: grunt create uglify task 4

میبینید که وظیفه uglify رو نیز همانند concat به آرایه موجود اضافه کردیم. کدهای کامل gruntfile.js بصورت زیر هست:

module.exports = function (grunt) {

grunt.initConfig({

pkg: grunt.file.readJSON('package.json'),

concat: {

options: {

separator: 'nn/*--------Next File-------*/nn',

banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %> */nn',

footer: 'nn/*------<%= pkg.author %>---------*/'

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'

}

uglify: {

js1: {

files: {

'final/js/js1.min.js': ['development/js/js1.js']

}

js2: {

files: {

'final/js/js2.min.js': ['development/js/js2.js']

}

all: {

files: {

'final/js/all.min.js': ['development/js/*.js']

}

});

grunt.loadNpmTasks('grunt-contrib-concat');

grunt.loadNpmTasks('grunt-contrib-uglify');

grunt.registerTask('default', ['concat', 'uglify']);

};

حالا اگه cmd رو باز کنید و به مسیر پروژه برید و grunt رو اجرا کنید...واو!! همه کارها به یکباره با هم انجام میشه و فایلهای مورد نظر ساخته میشه: grunt run task

حالا اگه درون پوشه js موجود در پوشه final نگاه کنید میبینید که علاوه بر final.js که مربوط به قبل هست، فایلهای زیر نیز ساخته شده: grunt run task 2

اگه یادتون باشه فایل js1.js بصورت زیر بود:

var x = 1;

/**

* Redefine "x"

* @type {number}

x = 10;

بعد از اینکه اون رو فشرده کردیم و کدهاشو درون js1.min.js ریختیم بصورت زیر میشه:

var x=1;x=10;

بهمین راحتی.

تا اینجای کار مقدمات انجام شده و تقریبا کار تمومه ولی چند نکته و ویژگی هست که گفتشون میتونه سودمند باشه. همونطور که دیدید در بالا برای وظیفه all من از * استفاده کردم. زمانی که مثلا میگم *.js به معنای اینه که تمام فایلهای با پسوند js رو انتخاب کن. اگر مثلا بنویسیم development/**/*.js باعث میشه که همه فایلهای js درون همه فولدرهای موجود در development رو انتخاب کنه. پس * برای همه انتخاب همه فایلها و ** برای انتخاب همه پوشه ها بکار میره.

همانند وظیفه concat شما میتونین برای uglify هم ویژگی options قرار بدین و از اون پیشرفته تر استفاده کنید و تنظیمات اون رو متناسب با نیاز خودتون تغییر بدین. برای اینکار بصورت زیر عمل میکنیم: grunt options for uglify

همانند concat میتونین از ویژگی های footer و banner استفاده کنید. ابتدا بیاید کدهای درون js1.js رو بصورت زیر عوض کنیم تا بیشتر متوجه بشید:

// Hello world, I'm a comment!

var longNameA = 1;

var longNameB = 2;

function longFunctionC(argumentC,argumentD) {

return longNameA + longNameB + argumentC + argumentD;

}

var result = longFunctionC(3,4);

/*! I might be preserved, yay! */

حالا اگه مجددا grunt رو اجرا کنیم و فایل js1.min.js ببینیم، بصورت زیر هست:

function longFunctionC(a,b){return longNameA+longNameB+a+b}var longNameA=1,longNameB=2,result=longFunctionC(3,4);

میبینید که همه کامنتا از بین رفته و همچنین اسم بعضی از متغیرها هم عوض شده. برای اینکه اسم متغیرها تغییر نکنه میتونین از ویژگی mangle استفاده کنید و اون رو false بزارید: grunt options for uglify 2

اگر دوباره grunt رو اجرا کنید و خروجی رو ببینید بصورت زیر هست:

function longFunctionC(argumentC,argumentD){return longNameA+longNameB+argumentC+argumentD}var longNameA=1,longNameB=2,result=longFunctionC(3,4);

میبینید که دیگه اسم متغیرها عوض نشده.

ویژگی دیگه ای بنظرم باید در مورد اون صحبت بشه اینه که چطور برای فایل فشرده شدمون یک فایل map درست کنیم. برای اینکار بصورت زیر عمل میکنیم. در ابتدا بگم که فقط میخام برای وظیفه all اینکارو انجام بدم. اگر درون options موجود ویژگی رو اضافه کنم، همه کارهای زیرمجموعه ی اون، اون تنظیمات رو دریافت میکنن ولی اگه بخوایم فقط به یکی از اونا اعمال بشه، میشه درون اون یک ویژگی options دیگه ساخت که فقط مختص خودش باشه. بنابراین من یک ویژگی options درون وظیفه all قرار میدم. بصورت زیر: grunt options for uglify 3

دیدید که ویژگی sourceMap رو برابر با true قرار دادیم و نام و مسیر قرارگیری اون رو هم مشخص کردیم. اگر حالا دوباره grunt رو اجرا کنیم یک فایل جدید ساخته میشه و کدهای زیر درونش قرار میگیره:

{"version":3,"sources":["../../development/js/js1.js","../../development/js/js2.js"],"names":["longFunctionC","argumentC","argumentD","longNameA","longNameB","result","y"],"mappings":"AAMA,QAASA,eAAcC,UAAUC,WAC/B,MAAOC,WAAYC,UAAYH,UAAYC,UAL7C,GAAIC,WAAY,EAEZC,UAAY,EAMZC,OAASL,cAAc,EAAE,GCVzBM,EAAI,CAQRA,GAAI","file":"all.min.js"}

شاید با کاربرد فایل با فرمت map آشنا نباشید. بیشتر ابزارها مثل bootstrap و jquery و ... در کنار فایل فشردشون این فایل هم قرار داره. از این فایل برای debug کردن فایلهایی که minify شده هستن استفاده میشه. برای مطالعه بیشتر میتونین به این لینک برید. وقتی که این کار رو میکنید، اگه فایل all.min.js رو باز کنید، در خط آخر اون به این sourceMap اشاره کرده است: grunt options for uglify 4

اینم از پلاگین grunt-contrib-uglify.

شما میتونین برای مطالعه بیشتر در مورد این پلاگین به این لینک مراجعه کنید. خسته نباشید.

در جلسات بعدی بیشتر در مورد Grunt صحبت میکنیم.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق باشید

یا علی

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

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 332 تاريخ : چهارشنبه 20 مرداد 1395 ساعت: 16:47

آموزش استفاده از Grunt برای مدیریت وظایف تکراری - Grunt (جلسه 17) - فشرده سازی فایلهای javascript - قسمت 2

آخرین مطالب

امکانات وب

آموزش استفاده از Grunt برای مدیریت وظایف تکراری - Grunt (جلسه 17) - فشرده سازی فایلهای javascript - قسمت 2

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه