تخفیف ویژه

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

دسته بندی: آموزش
زمان مطالعه: 183 دقیقه
۰۴ شهریور ۱۳۹۵

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

grund

در این جلسه قصد داریم در مورد پلاگین time-grunt صحبت کنیم و با استفاده از اون کاری کنیم که در cmd زمان هر یک از وظائف ما نمایش داده بشه و ما متوجه بشیم که هر کدوم چه مدت طول کشیدن. در ابتدا باید این پلاگین رو در پروژه خودمون نصب کنیم. برای اینکار عبارت زیر رو در cmd قرار میدیم:

npm install time-grunt --save-dev

بعد از اینکار اینتر میزنیم:grunt time

میبینید که این پلاگین بدون ارور درون پروژه ما نصب شده و حالا اگر package.json رو ببینید، بصورت زیر بروز رسانی شده:grunt time 2

حالا باید این بسته رو درون gruntfile.js لود کنیم. نحوه لود کردن این پلاگین، با پلاگینهای قبلی کمی تفاوت داره. در اینجا باید در بالای gruntfile.js، پلاگین مورد نظر رو لود کنیم. بصورت زیر:import time in grunt

این پلاگین مثل پلاگینهای قبلی نیازی به ساخت task جداگونه نداره و بصورت اتوماتیک کار میکنه و زمان سپری شده برای اجرای وظائف رو مشخص میکنه. حالا اگر من cmd رو باز کنم و grunt رو اجرا میکنم. با اینکار چنین نتیجه ای در خروجی نمایش داده میشه:

Running "concat:css" (concat) task                                                                
                                                                                                  
Running "concat:js" (concat) task                                                                 
                                                                                                  
Running "uglify:js1" (uglify) task                                                                
>> 1 file created.                                                                                
                                                                                                  
Running "uglify:js2" (uglify) task                                                                
>> 1 file created.                                                                                
                                                                                                  
Running "uglify:all" (uglify) task                                                                
>> 1 sourcemap created.                                                                           
>> 1 file created.                                                                                
                                                                                                  
Running "cssmin:all" (cssmin) task                                                                
>> 1 sourcemap created.                                                                           
>> 1 file created. 83 B → 153 B                                                                   
                                                                                                  
Running "coffee:compile" (coffee) task                                                            
>> 1 files created.                                                                               
>> 1 source map files created.                                                                    
                                                                                                  
Running "less:compile" (less) task                                                                
>> 1 stylesheet created.                                                                          
>> 1 sourcemap created.                                                                           
                                                                                                  
Running "sass:dist" (sass) task                                                                   
                                                                                                  
Running "pug:compile" (pug) task                                                                  
>> 1 file created.                                                                                
                                                                                                  
Running "pug:debug" (pug) task                                                                    
>> 1 file created.                                                                                
                                                                                                  
Running "pug:release" (pug) task                                                                  
>> 1 file created.                                                                                
                                                                                                  
Running "csslint:lint" (csslint) task                                                             
>> 1 file lint free.                                                                              
                                                                                                  
Done.                                                                                             
                                                                                                  
                                                                                                  
Execution Time (2016-08-26 21:42:50 UTC+4:30)                                                     
loading tasks   617ms  ███████████████████████████████████████████████████████ 41%                
concat:js        16ms  ██ 1%                                                                      
uglify:js1       31ms  ███ 2%                                                                     
uglify:all       16ms  ██ 1%                                                                      
cssmin:all       16ms  ██ 1%                                                                      
coffee:compile   46ms  █████ 3%                                                                   
less:compile     63ms  ██████ 4%                                                                  
sass:dist       464ms  █████████████████████████████████████████ 31%                              
pug:compile     125ms  ████████████ 8%                                                            
pug:debug        47ms  █████ 3%                                                                   
pug:release      16ms  ██ 1%                                                                      
csslint:lint     62ms  ██████ 4%                                                                  
Total 1.5s

میبینید که همه وظایف اجرا میشن و در آخر یک نمودار زیبا که نشان دهنده زمان سپری شده توسط هر وظیفه هست رو نمایش میده. اگر از نمودار عکس بگیرم، چیزی شبیه به زیر میشه:grunt time 3

موردی که در بالا مشخص کردم، کل زمانی هست که همه وظائف انجام شدن. همونطور که میبیند زمان و درصد از کل هر وظیفه، بر روی نمودار نمایش داده شده و میتونین ببینید که کدوم وظیفه زمان بیشتری رو مصرف کرده. اگر در همون ابتدا همه وظایفتون نمایش داده نشد و یا اینکه خواستید اطلاعات بیشتر و دقیقتری رو ببینید، میتونین بجای دستور grunt از دستور grunt --verbose استفاده کنید. خروجی بصورت زیر میشه:

Initializing                                                                                                                                                            
Command-line options: --verbose                                                                                                                                         
                                                                                                                                                                        
Reading "gruntfile.js" Gruntfile...OK                                                                                                                                   
                                                                                                                                                                        
Registering Gruntfile tasks.                                                                                                                                            
Reading package.json...OK                                                                                                                                               
Parsing package.json...OK                                                                                                                                               
Initializing config...OK                                                                                                                                                
                                                                                                                                                                        
Registering "grunt-contrib-concat" local Npm module tasks.                                                                                                              
Reading F:\Users\Mohammad\Desktop\grunt\node_modules\grunt-contrib-concat\package.json...OK                                                                             
Parsing F:\Users\Mohammad\Desktop\grunt\node_modules\grunt-contrib-concat\package.json...OK                                                                             
Loading "concat.js" tasks...OK                                                                                                                                          
+ concat                                                                                                                                                                
                                                                                                                                                                        
Registering "grunt-contrib-uglify" local Npm module tasks.                                                                                                              
Reading F:\Users\Mohammad\Desktop\grunt\node_modules\grunt-contrib-uglify\package.json...OK                                                                             
Parsing F:\Users\Mohammad\Desktop\grunt\node_modules\grunt-contrib-uglify\package.json...OK                                                                             
Loading "uglify.js" tasks...OK                                                                                                                                          
+ uglify                                                                                                                                                                
                                                                                                                                                                        
Registering "grunt-contrib-cssmin" local Npm module tasks.                                                                                                              
Reading F:\Users\Mohammad\Desktop\grunt\node_modules\grunt-contrib-cssmin\package.json...OK                                                                             
Parsing F:\Users\Mohammad\Desktop\grunt\node_modules\grunt-contrib-cssmin\package.json...OK                                                                             
Loading "cssmin.js" tasks...OK                                                                                                                                          
+ cssmin                                                                                                                                                                
                                                                                                                                                                        
Registering "grunt-contrib-coffee" local Npm module tasks.                                                                                                              
Reading F:\Users\Mohammad\Desktop\grunt\node_modules\grunt-contrib-coffee\package.json...OK                                                                             
Parsing F:\Users\Mohammad\Desktop\grunt\node_modules\grunt-contrib-coffee\package.json...OK                                                                             
Loading "coffee.js" tasks...OK                                                                                                                                          
+ coffee                                                                                                                                                                
                                                                                                                                                                        
Registering "grunt-contrib-less" local Npm module tasks.                                                                                                                
Reading F:\Users\Mohammad\Desktop\grunt\node_modules\grunt-contrib-less\package.json...OK                                                                               
Parsing F:\Users\Mohammad\Desktop\grunt\node_modules\grunt-contrib-less\package.json...OK                                                                               
Loading "less.js" tasks...OK                                                                                                                                            
+ less                                                                                                                                                                  
                                                                                                                                                                        
Registering "grunt-contrib-sass" local Npm module tasks.                                                                                                                
Reading F:\Users\Mohammad\Desktop\grunt\node_modules\grunt-contrib-sass\package.json...OK                                                                               
Parsing F:\Users\Mohammad\Desktop\grunt\node_modules\grunt-contrib-sass\package.json...OK                                                                               
Loading "sass.js" tasks...OK                                                                                                                                            
+ sass                                                                                                                                                                  
                                                                                                                                                                        
Registering "grunt-contrib-pug" local Npm module tasks.                                                                                                                 
Reading F:\Users\Mohammad\Desktop\grunt\node_modules\grunt-contrib-pug\package.json...OK                                                                                
Parsing F:\Users\Mohammad\Desktop\grunt\node_modules\grunt-contrib-pug\package.json...OK                                                                                
Loading "pug.js" tasks...OK                                                                                                                                             
+ pug                                                                                                                                                                   
                                                                                                                                                                        
Registering "grunt-contrib-csslint" local Npm module tasks.                                                                                                             
Reading F:\Users\Mohammad\Desktop\grunt\node_modules\grunt-contrib-csslint\package.json...OK                                                                            
Parsing F:\Users\Mohammad\Desktop\grunt\node_modules\grunt-contrib-csslint\package.json...OK                                                                            
Loading "csslint.js" tasks...OK                                                                                                                                         
+ csslint                                                                                                                                                               
                                                                                                                                                                        
Registering "grunt-contrib-jshint" local Npm module tasks.                                                                                                              
Reading F:\Users\Mohammad\Desktop\grunt\node_modules\grunt-contrib-jshint\package.json...OK                                                                             
Parsing F:\Users\Mohammad\Desktop\grunt\node_modules\grunt-contrib-jshint\package.json...OK                                                                             
Loading "jshint.js" tasks...OK                                                                                                                                          
+ jshint                                                                                                                                                                
Loading "gruntfile.js" tasks...OK                                                                                                                                       
+ default                                                                                                                                                               
                                                                                                                                                                        
No tasks specified, running default tasks.                                                                                                                              
Running tasks: default                                                                                                                                                  
                                                                                                                                                                        
Running "default" task                                                                                                                                                  
                                                                                                                                                                        
Running "concat" task                                                                                                                                                   
                                                                                                                                                                        
Running "concat:css" (concat) task                                                                                                                                      
Verifying property concat.css exists in config...OK                                                                                                                     
Files: development/css/css1.css, development/css/css2.css -> final/css/final.css                                                                                        
Options: separator="\r\n\r\n/*--------Next File-------*/\r\n\r\n", banner="/*! grunt-project - v1.5.0 - 2016-08-26 */\r\n\r\n", footer="\r\n\r\n/*------Mohammad Esfandi
ari---------*/", stripBanners=false, process=false, sourceMap=false, sourceMapName=undefined, sourceMapStyle="embed"                                                    
Reading development/css/css1.css...OK                                                                                                                                   
Reading development/css/css2.css...OK                                                                                                                                   
Writing final/css/final.css...OK                                                                                                                                        
File final/css/final.css created.                                                                                                                                       
Running "concat:js" (concat) task                                                                                                                                       
Verifying property concat.js exists in config...OK                                                                                                                      
Files: development/js/js1.js, development/js/js2.js -> final/js/final.js                                                                                                
Options: separator="\r\n\r\n/*--------Next File-------*/\r\n\r\n", banner="/*! grunt-project - v1.5.0 - 2016-08-26 */\r\n\r\n", footer="\r\n\r\n/*------Mohammad Esfandi
ari---------*/", stripBanners=false, process=false, sourceMap=false, sourceMapName=undefined, sourceMapStyle="embed"                                                    
Reading development/js/js1.js...OK                                                                                                                                      
Reading development/js/js2.js...OK                                                                                                                                      
Writing final/js/final.js...OK                                                                                                                                          
File final/js/final.js created.                                                                                                                                         
Running "uglify" task                                                                                                                                                   
                                                                                                                                                                        
Running "uglify:js1" (uglify) task                                                                                                                                      
Verifying property uglify.js1 exists in config...OK                                                                                                                     
Files: development/js/js1.js -> final/js/js1.min.js                                                                                                                     
Options: banner="", footer="", compress={"warnings":false}, mangle=false, beautify=false, report="min", expression=false, maxLineLen=32000, ASCIIOnly=false, screwIE8, q
uoteStyle=0                                                                                                                                                             
Minifying with UglifyJS...Reading development/js/js1.js...OK                                                                                                            
OK                                                                                                                                                                      
Writing final/js/js1.min.js...OK                                                                                                                                        
File final/js/js1.min.js created: 245 B → 145 B                                                                                                                         
>> 1 file created.                                                                                                                                                      
                                                                                                                                                                        
Running "uglify:js2" (uglify) task                                                                                                                                      
Verifying property uglify.js2 exists in config...OK                                                                                                                     
Files: development/js/js2.js -> final/js/js2.min.js                                                                                                                     
Options: banner="", footer="", compress={"warnings":false}, mangle=false, beautify=false, report="min", expression=false, maxLineLen=32000, ASCIIOnly=false, screwIE8, q
uoteStyle=0                                                                                                                                                             
Minifying with UglifyJS...Reading development/js/js2.js...OK                                                                                                            
OK                                                                                                                                                                      
Writing final/js/js2.min.js...OK                                                                                                                                        
File final/js/js2.min.js created: 60 B → 12 B                                                                                                                           
>> 1 file created.                                                                                                                                                      
                                                                                                                                                                        
Running "uglify:all" (uglify) task                                                                                                                                      
Verifying property uglify.all exists in config...OK                                                                                                                     
Files: development/js/js1.js, development/js/js2.js -> final/js/all.min.js                                                                                              
Options: banner="", footer="", compress={"warnings":false}, mangle=false, beautify=false, report="min", expression=false, maxLineLen=32000, ASCIIOnly=false, screwIE8, q
uoteStyle=0, sourceMap, sourceMapName="final/js/all.min.js.map"                                                                                                         
Minifying with UglifyJS...Reading development/js/js1.js...OK                                                                                                            
Reading development/js/js2.js...OK                                                                                                                                      
OK                                                                                                                                                                      
Writing final/js/all.min.js...OK                                                                                                                                        
Writing final/js/all.min.js.map...OK                                                                                                                                    
File final/js/all.min.js.map created (source map).                                                                                                                      
File final/js/all.min.js created: 305 B → 189 B                                                                                                                         
>> 1 sourcemap created.                                                                                                                                                 
>> 1 file created.                                                                                                                                                      
                                                                                                                                                                        
Running "cssmin" task                                                                                                                                                   
                                                                                                                                                                        
Running "cssmin:all" (cssmin) task                                                                                                                                      
Verifying property cssmin.all exists in config...OK                                                                                                                     
Files: development/css/import.css -> final/css/import.min.css                                                                                                           
Options: rebase=false, report="min", sourceMap, advanced=false, sourceMapName="final/css/import.min.css.map"                                                            
Reading development/css/import.css...OK                                                                                                                                 
Writing final/css/import.min.css.map...OK                                                                                                                               
File final/css/import.min.css.map created                                                                                                                               
Writing final/css/import.min.css...OK                                                                                                                                   
File final/css/import.min.css created 83 B → 153 B                                                                                                                      
>> 1 sourcemap created.                                                                                                                                                 
>> 1 file created. 83 B → 153 B                                                                                                                                         
                                                                                                                                                                        
Running "coffee" task                                                                                                                                                   
                                                                                                                                                                        
Running "coffee:compile" (coffee) task                                                                                                                                  
Verifying property coffee.compile exists in config...OK                                                                                                                 
Files: development/coffee/coffee.coffee -> final/js/coffee.js                                                                                                           
Options: bare, join=false, sourceMap, joinExt=".src.coffee", separator="\r\n", sourceMapDir="final/js/coffee.js.map"                                                    
Reading development/coffee/coffee.coffee...OK                                                                                                                           
Writing final/js/coffee.js...OK                                                                                                                                         
File final/js/coffee.js created.                                                                                                                                        
Writing final/js/coffee.js.map\coffee.js.map...OK                                                                                                                       
File final/js/coffee.js.map\coffee.js.map created (source map).                                                                                                         
>> 1 files created.                                                                                                                                                     
>> 1 source map files created.                                                                                                                                          
                                                                                                                                                                        
Running "less" task                                                                                                                                                     
                                                                                                                                                                        
Running "less:compile" (less) task                                                                                                                                      
Verifying property less.compile exists in config...OK                                                                                                                   
Files: development/less/style.less -> final/css/less.css                                                                                                                
Options: banner="", compress, sourceMap, sourceMapFilename="final/css/less.css.map"                                                                                     
Reading development/less/style.less...OK                                                                                                                                
Writing final/css/less.css.map...OK                                                                                                                                     
File final/css/less.css.map created.                                                                                                                                    
Writing final/css/less.css...OK                                                                                                                                         
File final/css/less.css created                                                                                                                                         
>> 1 stylesheet created.                                                                                                                                                
>> 1 sourcemap created.                                                                                                                                                 
                                                                                                                                                                        
Running "sass" task                                                                                                                                                     
                                                                                                                                                                        
Running "sass:dist" (sass) task                                                                                                                                         
Verifying property sass.dist exists in config...OK                                                                                                                      
Files: development/sass/compile.sass -> final/css/sass.css                                                                                                              
Files: development/sass/compile.scss -> final/css/scss.css                                                                                                              
Options: sourcemap="none", style="compressed"                                                                                                                           
Command: sass development/sass/compile.sass final/css/sass.css --sourcemap=none --style=compressed                                                                      
Command: sass development/sass/compile.scss final/css/scss.css --sourcemap=none --style=compressed                                                                      
File final/css/scss.css created                                                                                                                                         
File final/css/sass.css created                                                                                                                                         
                                                                                                                                                                        
Running "pug" task                                                                                                                                                      
                                                                                                                                                                        
Running "pug:compile" (pug) task                                                                                                                                        
Verifying property pug.compile exists in config...OK                                                                                                                    
Files: development/pug/template.pug -> final/html/template.html                                                                                                         
Options: namespace="JST", separator="\r\n\r\n", amd=false, data={"debug":false}                                                                                         
Reading development/pug/template.pug...OK                                                                                                                               
Writing final/html/template.html...OK                                                                                                                                   
File final/html/template.html created.                                                                                                                                  
>> 1 file created.                                                                                                                                                      
                                                                                                                                                                        
Running "pug:debug" (pug) task                                                                                                                                          
Verifying property pug.debug exists in config...OK                                                                                                                      
Files: development/pug/template.pug -> final/html/debug.html                                                                                                            
Options: namespace="JST", separator="\r\n\r\n", amd=false, data={"debug":true}                                                                                          
Reading development/pug/template.pug...OK                                                                                                                               
Writing final/html/debug.html...OK                                                                                                                                      
File final/html/debug.html created.                                                                                                                                     
>> 1 file created.                                                                                                                                                      
                                                                                                                                                                        
Running "pug:release" (pug) task                                                                                                                                        
Verifying property pug.release exists in config...OK                                                                                                                    
Files: development/pug/template.pug -> final/html/release.html                                                                                                          
Options: namespace="JST", separator="\r\n\r\n", amd=false, data={"debug":false}                                                                                         
Reading development/pug/template.pug...OK                                                                                                                               
Writing final/html/release.html...OK                                                                                                                                    
File final/html/release.html created.                                                                                                                                   
>> 1 file created.                                                                                                                                                      
                                                                                                                                                                        
Running "csslint" task                                                                                                                                                  
                                                                                                                                                                        
Running "csslint:lint" (csslint) task                                                                                                                                   
Verifying property csslint.lint exists in config...OK                                                                                                                   
Files: final/css/final.css                                                                                                                                              
Options: csslintrc=".csslintrc"                                                                                                                                         
Reading .csslintrc...OK                                                                                                                                                 
Reading final/css/final.css...OK                                                                                                                                        
Linting final/css/final.css...OK                                                                                                                                        
>> 1 file lint free.                                                                                                                                                    
                                                                                                                                                                        
Done.                                                                                                                                                                   
                                                                                                                                                                        
                                                                                                                                                                        
Execution Time (2016-08-26 21:58:39 UTC+4:30)                                                                                                                           
loading tasks   672ms  █████████████████████████████████████████████████████████ 42%                                                                                    
concat:css       16ms  ██ 1%                                                                                                                                            
concat:js        15ms  ██ 1%                                                                                                                                            
uglify:js1       47ms  ████ 3%                                                                                                                                          
uglify:js2        0ms  0%                                                                                                                                               
uglify:all       31ms  ███ 2%                                                                                                                                           
cssmin:all       32ms  ███ 2%                                                                                                                                           
coffee:compile   47ms  ████ 3%                                                                                                                                          
less:compile     62ms  ██████ 4%                                                                                                                                        
sass:dist       412ms  ███████████████████████████████████ 26%                                                                                                          
pug:compile     146ms  █████████████ 9%                                                                                                                                 
pug:debug        31ms  ███ 2%                                                                                                                                           
pug:release      47ms  ████ 3%                                                                                                                                          
csslint:lint     47ms  ████ 3%                                                                                                                                          
Total 1.6s

میبینید که اطلاعات خیلی جامعتری در مورد هر وظیفه به شما داده میشه و میتونین بهتر اونا رو آنالیز کنید. همچنین شما میتونین یکی از وظایف رو بصورت تکی اجرا کنید:grunt one task time

دیدید که زیبا و حرفه ای زمان سپری شده بر روی نمودار به شما نمایش داده میشه. برای مطالعه بیشتر در مورد این پلاگین میتونین به این لینک سر بزنید.

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

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

موفق باشید

یا علی

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.