چگونگی انجام وظایف در ویژوال استودیو کد به صورت خودکار

<div class="line number1 index0 alt2"><code class="bash plain">.</code></div>
<div class="line number2 index1 alt1"><code class="bash plain">├── css</code></div>
<div class="line number3 index2 alt2"><code class="bash plain">│   ├── sass</code></div>
<div class="line number4 index3 alt1"><code class="bash plain">├── gulpfile.js</code></div>
<div class="line number5 index4 alt2"><code class="bash plain">├── index.html</code></div>
<div class="line number6 index5 alt1"><code class="bash plain">├── js</code></div>
<div class="line number7 index6 alt2"><code class="bash plain">│   ├── src</code></div>
<div class="line number8 index7 alt1"><code class="bash plain">├── node_modules</code></div>
<div class="line number9 index8 alt2"><code class="bash plain">└── package.json</code></div>
<div class="line number9 index8 alt2">

تعدادی از وظایف ثبت شده در gulpfile.js شرح زیر است:

</div>
<div class="line number9 index8 alt2">var gulp = require('gulp');
var uglify = require('gulp-uglify');
var sass = require('gulp-sass');
var jsSrc = './js/src/**/*.js';
var sassSrc = './css/sass/**/*.scss';
gulp.task( 'scripts', function() {
return  gulp.src( jsSrc )
.pipe( uglify() )
.pipe( gulp.dest( './js' ) )
});
gulp.task( 'styles', function() {
return  gulp.src( sassSrc )
.pipe( sass( { outputStyle: 'compressed' } ) )
.pipe( gulp.dest( './css' ) );
});
gulp.task( 'automate', function() {
gulp.watch( [ sassSrc, jsSrc ], [ 'scripts', 'styles' ] );
});
gulp.task( 'default', ['scripts', 'styles', 'automate'] );</div>
<div class="line number9 index8 alt2">

 

 

اجرا  خودکار وظایف

در حال اجرا و خودکار “وظایف” در ویژوال استودیو کد بسیار ساده است. نخست، راه اندازی فرماندهی پالت با فشار دادن کلیدهای Shift + کلید ترکیبی، کلیدهای Cmd + P و یا از طریق نوار منو، نمایش> فرماندهی پالت را انجام دهید سپس، نوع وظایف، و انتخاب گزینه “وظایف: اجرای کار” از چند تعدادی از گزینه های نشان داده شده را انتخاب کنید.

 

کد های ویژوال استودیو  هوشمند است.  لیستی از وظایف است که ما در فایل تعریف شده است.

در اینجا،به طور پیش فرض وظیفه را انتخاب کنید. شیوه SCSS و جاوا اسکریپت  پس از انتخاب خواهد شد.این وظیفه وارد شدهو به طور خودکار این کار انجام میشود

هنگام تغییر یک فایل – یک شیوه یا یک فایل جاوا اسکریپت – آن را به طور خودکار وارد خواهد شد. کد های ویژوال استودیو نیز تولید گزارش به موقع برای هر موفقیت و اشتباهات است که در عمل ساخت رخ می دهد.

INTERGRATION عمیق

علاوه بر این، ما می توانیم پروژه ها را  به ویژوال استودیو بدهیم. و یکپارچه سازی وظایف ما در ویژوال استودیو  آسان و سریع میشود

راه اندازی فرماندهی پالت را انتخاب کنید “تنظیمات وظیفه دونده”. کد های ویژوال استودیو یک لیست از ابزار ساخت  را پشتیبانی می کند.

کد های ویژوال استودیو در حال حاضر باید یک فایل جدید تحت .vscode نام tasks.json در دایرکتوری پروژه خود را ایجاد کرده باشند.

شما می توانید در زیر مشاهده کنید، در انجام وظایف اموال در حال حاضر فقط یک آرایه خالی است.

</div>
<div class="line number9 index8 alt2">
<div class="line number1 index0 alt2"><code class="javascript plain">{</code></div>
<div class="line number2 index1 alt1"><code class="javascript spaces">  </code><code class="javascript string">"version"</code><code class="javascript plain">: </code><code class="javascript string">"0.1.0"</code><code class="javascript plain">,</code></div>
<div class="line number3 index2 alt2"><code class="javascript spaces">  </code><code class="javascript string">"command"</code><code class="javascript plain">: </code><code class="javascript string">"gulp"</code><code class="javascript plain">,</code></div>
<div class="line number4 index3 alt1"><code class="javascript spaces">  </code><code class="javascript string">"isShellCommand"</code><code class="javascript plain">: </code><code class="javascript keyword">true</code><code class="javascript plain">,</code></div>
<div class="line number5 index4 alt2"><code class="javascript spaces">  </code><code class="javascript string">"args"</code><code class="javascript plain">: [</code></div>
<div class="line number6 index5 alt1"><code class="javascript spaces">  </code><code class="javascript string">"--no-color"</code></div>
<div class="line number7 index6 alt2"><code class="javascript spaces">  </code><code class="javascript plain">],</code></div>
<div class="line number8 index7 alt1"><code class="javascript spaces">  </code><code class="javascript string">"tasks"</code><code class="javascript plain">: []</code></div>
<div class="line number9 index8 alt2"><code class="javascript plain">}</code></div>
<div class="line number9 index8 alt2">

گسترش ارزش وظایف به شرح زیر است.

</div>
<div class="line number9 index8 alt2">
<div class="line number1 index0 alt2"><code class="javascript plain">{</code></div>
<div class="line number2 index1 alt1"><code class="javascript spaces">  </code><code class="javascript string">"version"</code><code class="javascript plain">: </code><code class="javascript string">"0.1.0"</code><code class="javascript plain">,</code></div>
<div class="line number3 index2 alt2"><code class="javascript spaces">  </code><code class="javascript string">"command"</code><code class="javascript plain">: </code><code class="javascript string">"gulp"</code><code class="javascript plain">,</code></div>
<div class="line number4 index3 alt1"><code class="javascript spaces">  </code><code class="javascript string">"isShellCommand"</code><code class="javascript plain">: </code><code class="javascript keyword">true</code><code class="javascript plain">,</code></div>
<div class="line number5 index4 alt2"><code class="javascript spaces">  </code><code class="javascript string">"args"</code><code class="javascript plain">: [</code></div>
<div class="line number6 index5 alt1"><code class="javascript spaces">  </code><code class="javascript string">"--no-color"</code></div>
<div class="line number7 index6 alt2"><code class="javascript spaces">  </code><code class="javascript plain">],</code></div>
<div class="line number8 index7 alt1"><code class="javascript spaces">  </code><code class="javascript string">"tasks"</code><code class="javascript plain">: [{</code></div>
<div class="line number9 index8 alt2"><code class="javascript spaces">    </code><code class="javascript string">"taskName"</code><code class="javascript plain">: </code><code class="javascript string">"default"</code><code class="javascript plain">,</code></div>
<div class="line number10 index9 alt1"><code class="javascript spaces">    </code><code class="javascript string">"isBuildCommand"</code><code class="javascript plain">: </code><code class="javascript keyword">true</code><code class="javascript plain">,</code></div>
<div class="line number11 index10 alt2"><code class="javascript spaces">  </code><code class="javascript plain">}]</code></div>
<div class="line number12 index11 alt1"><code class="javascript plain">}</code></div>
<div class="line number12 index11 alt1">

taskName نام وظیفه در gulpfile.js ما است که ما می خواهم برای اجرای مشخص کنیم. اموال isBuildCommand دستور به طور پیش فرض به عنوان “ساخت” دستور تعریف می کند. در حال حاضر، به جای رفتن به فرماندهی پالت، شما می توانید به سادگی شیفت کلید ترکیبی + کلیدهای Cmd + B را فشار دهید

امیدواریم این مقاله به شما در چگونگی انجام وظایف در ویژوال استودیو کد به صورت خودکار کمک کرده باشد.برای مشاهده مقالات بیشتر درباره ی طراحی قالب وردپرس به https://www.on5.ir مراجعه نمایید

انفایو مرجع مقالات تخصصی طراحی قالب وردپرس