به تازگی گولپ به دست آوردن محبوبیت بزرگ، و روشن است که چرا. سریع تر، زیبا تر و راحت تر از آن است Grunt.. من مجبور شدم با او کار کنم، اما من همیشه راه حل های آماده شده را گرفتم و به طور کامل درک نکردم که چگونه این کار را تمام کرد. در این آخر هفته، تصمیم گرفتم این مشکل کوچک را کنار بگذارم. این را بپذیرید و امروز صحبت کنید

GULP چیست؟

GULP یک ابزار مونتاژ جلو است. این اجازه می دهد تا شما را به خودکار وظایف تکراری (مونتاژ و تخلیه فایل های CSS و JS، راه اندازی تست، مرورگر راه اندازی مجدد و دیگران). بنابراین، GULP سرعت و بهینه سازی روند توسعه وب را افزایش می دهد.

نصب GULP

نصب GULP به اندازه کافی آسان است. اگر چیزی کار نمی کند، در نظرات خود بنویسید یا مشکل خود را بکشید. بنابراین برای نصب شما نیاز به انجام 3 مرحله:

• GULP GLOBAL را نصب کنید
• نصب GULP به عنوان تحریم ها (وابستگی برای توسعه)
• یک فایل gulpfile.js ایجاد کنید

گام اول این است که GULP را در سطح جهانی نصب کنید. ترمینال را باز کنید و بنویسید:

npm install - gulpglobal

پس از آن شما نیاز به نصب GULP به عنوان devmendencence برای پروژه خود را. اطمینان حاصل کنید که یک فایل package.json دارید. اگر اینطور نیست، آن را با نوشتن آن به کنسول NPM INIT ایجاد کنید. حالا شما می توانید GULP را به عنوان devpendencencence نصب کنید:

npm install --save-dev gulp

در نهایت، شما باید Gulpfile.js را در ریشه پروژه خود ایجاد کنید، که شامل وظایف شما (وظایف) است. به عنوان یک گام متوسط، ما پلاگین GULP-UTIL را نصب خواهیم کرد. برای نشان دادن پلاگین ها نصب شده است:

npm install - save-dev gulp-util

اکنون زمان برای نوشتن اولین وظیفه ما آمده است. فایل gulpfile.js تازه ایجاد شده را باز کنید و به آن بنویسید:

/ * فایل: gulpfile.js * / // جمع آوری تمام پلاگین های ما var gulp \u003d نیاز به ("GULP")، GUTIL \u003d نیاز ("GULP-UTIL")؛ // ایجاد یک کار که به طور پیش فرض اجرا می شود گولپ وظیفه ("پیش فرض"، تابع () (بازگشت Gutil. ورود به سیستم ("Gulp در حال اجرا است!"))؛

و اکنون ما باید GULP را در ترمینال راه اندازی کنیم و ما چیزی شبیه به آن را خواهیم دید:

\u003e GULP [12:32:08] با استفاده از GULPFILE ~ / PROJECTS / GULP-SCOCK-IO / GULPFILE.JS [12:32:08] شروع "به طور پیش فرض" ... [12:32:08] GULP در حال اجرا است! [12:32:08] پس از 1 ms "به طور پیش فرض" به پایان رسید

بررسی اجمالی

GULP خود را بسیار مقیاس بر روی فرصت ها است. اما همه شما باید به پلاگین های جداگانه قرار دهید. آنها با GULP، معجزات را ایجاد می کنند.

API GULP بسیار کوچک است و شامل تنها 4 توابع درجه بالاتر است:

• gulp.task
• gulp.src.
• gulp.dest
• gulp.watch

gulp.task وظایف ما را تعریف می کند. استدلال نامیده می شود، وابستگی (آرایه) و عملکرد (اقدامات اصلی). وابستگی ممکن است نباشد:

گولپ وظیفه ("MyTask"، تابع () (/ / انجام کاری))؛ گولپ وظیفه ("وابسته"، ["MyTask"]، تابع () ( // انجام کاری پس از "MyTask" اجرا خواهد شد });

gulp.src نشان می دهد فایل هایی که ما می خواهیم استفاده کنیم. از آن استفاده می کند. دسترسی به فایل به فایل ها از طریق پلاگین ها.

gulp.dest اشاره به پوشه ای که در آن ما می خواهیم فایل های اصلاح شده را ذخیره کنیم.

gulp.src و gulp.dest برای یک نسخه ساده از فایل ها استفاده می شود:

گولپ وظیفه ("CopyHtml"، تابع () ( // کپی تمام فایل های HTML از منبع / عمومی / گولپ src ("منبع / *. HTML). لوله (Gulp dest ("عمومی"))؛ ))

در GULP، یک سیستم پاسخ پاسخ فایل (gulp.watch) ساخته شده است. شما می توانید از این کار برای شروع وظایف دیگر که نیاز دارید هنگام تغییر فایل ها استفاده کنید.

آیا می خواهید امتیاز بیشتری را در سرعت Google Page شماره گیری کنید؟ نمی دانید چه نوع "جلوی انتهایی" مونتاژ؟ سپس شما اینجا جالب خواهد بود.

node.js چیست؟

node.js معمولی به نام "جاوا اسکریپت شمالی" است. این پلت فرم به شما اجازه می دهد برنامه ها را با استفاده از نحو جاوا اسکریپت بنویسید.

پیاده سازی برای ویندوز، سیستم عامل مک و لینوکس وجود دارد.

کیت شامل یک مدیر بسته است npmکه با آن شما می توانید بسته ها را نصب کنید.

GULP چیست؟

GULP یک بسته نوشته شده در node.js است، که به مدیران وب کمک می کند تا پروژه ها را در طرح طرح بندی ساخت.

برای نصب GULP، شما باید از خط فرمان استفاده کنید.

NPM نصب GULP.

در پایان این مقاله یک فایل وجود دارد که به جمع آوری یک پروژه معمول کمک خواهد کرد.

در این مثال، با GULP، ما موارد زیر را انجام خواهیم داد:

• به طور خودکار تصاویر را برای وب بهینه سازی کنید
• جمع آوری یک سبک حداقل از Precrossors (SASS، SCSS)؛
• جمع آوری یک فایل حداقل با اسکریپت.

چگونه برای جمع آوری یک جلوی جلو با استفاده از GULP؟

برای درک چگونگی کار همه چیز، همه چیز را در مراحل بررسی خواهیم کرد.

ساختار را می توان در تصویر مشاهده کرد.

• دارایی دارایی - برای منابع تصویری، سبک ها و اسکریپت ها؛
• پوشه عمومی - نتیجه مونتاژ پروژه در آن قرار خواهد گرفت؛
• gulpfile.js - یک فایل است که منطق کار کار کارگر را توصیف می کند؛
• package.json یک فایل است که حاوی اطلاعاتی در مورد برنامه ها و پلاگین هایی است که برای عملکرد صحیح GULP استفاده می شود.

package.json

محتویات فایل:

("نام": "gulp_project"، "نسخه": "1.0.0"، "توضیحات": "مثال"، "main": "gulpfile.js"، "scripts": ("test": "echo \\" ERROR: بدون تست مشخص شده \\ "&& خروج 1")، "نویسنده": "Dmitriy Ilichev"، "مجوز": "ISC"، "Devpenepencience": ("Gulp": "^ 3.9.0"، "Gulp-CSSO ":" ^ 1.0.0 "،" Gulp-concat ":" ^ 2.6.0 "،" gulp-uglify ":" ^ 1.2.0 "،" gulp-imagemin ":" ^ 2.3.0 "،" gulp -SASS ":" ^ 2.1.1 "))

این فایل به شرح زیر است:

• نام پروژه gulp_project، نسخه و توضیحات؛
• فایل اصلی gulpfile.js است؛
• نویسنده این پروژه، مجوز - این همه مهم نیست و به سادگی این زمینه ها می تواند خالی باشد؛
• یک نکته جالب، اختراعات است. این وابستگی را توصیف می کند.

فایل را می توان در معمول ویرایش کرد ویرایشگر متن. همچنین می تواند برای پروژه جدید توسط فرمان NPM INT ایجاد شود.

بر اساس این، node.js درک می کند که ما باید کار کنیم:

• GULP نسخه 3.9.0 و بالاتر برای مونتاژ؛
• GULP-CSSO نسخه 1.0.0 و بالاتر - افزونه به سبک های وزیر (CSS)؛
• GULP-CONCAT نسخه 2.6.0 و بالاتر - پلاگین برای چسباندن چندین فایل به یک؛
• GULP-UGLIFY نسخه 1.2.0 و بالاتر - پلاگین به جاوا اسکریپت؛
• Gulp-Imagemin نسخه 2.3.0 و بالاتر - پلاگین برای بهینه سازی تصاویر؛
• GULP-SASS نسخه 2.1.1 و بالاتر - پلاگین برای دریافت CSS از SASS (SCSS).

عالی پس از آن، شما باید همه آن را نصب کنید. این از خط فرمان انجام می شود. در حالی که در پوشه پروژه شما باید دستور را اجرا کنید:

نصب NPM

تمام اطلاعات لازم از package.json گرفته خواهد شد.

پس از تمام این سحر و جادو ظاهر خواهد شد پوشه خدمات node_modules.

gulpfile.js

محتویات فایل:

/ * * * تعیین متغیرها * * / var gulp \u003d نیاز به ("GULP")، // گزارش GULP JS UGLIFY \u003d نیاز ("GULP-UGLIFY")، // minification JS concat \u003d نیاز ("Gulp-concat") ، // فایل Gluing Imagemin \u003d نیاز به ("Gulp-Imagemin")، // minification csso \u003d نیاز به تصاویر ("Gulp-CSSO")، // minification CSS Sass \u003d نیاز به ("Gulp-Sass")؛ // SASS تبدیل (SCSS) در CSS / * * * ایجاد وظایف (سلیقه) * * /// SASS وظیفه. فرمان GULP SASS GULP.TASK ("SASS"، FUNCTION () (GULP.SRC ("./ دارایی ها / سبک ها / style.scss") // پرونده ای که Processes.pipe (Sass () را در ("خطا" ، sass.logError) // تبدیل SASS در CSS .PIPE (csso ()) // minifixture css، که در مرحله قبلی به دست آمده است. لوله (gulp.dest ("./ public / css /")؛ // نتیجه ما در آدرس مشخص شده بنویسیم))؛ // task "js". فرمان Gulp JS Gulp.Task ("JS"، تابع () (gulp.src (["./assets/javascripts/jquery-2.1.4.min.js"، "./assets/javascripts/bootstrap. حداقل .js "،" ./assets/javascricts/script.js "]) // فایل هایی که وارد سیستم می شوند (concat (min.js")) // چسباندن همه ی JS .Pipe (uGlify ()) // نتیجه "پورت" minifixture.pipe (gulp.dest ("./ public / js /")) // نتیجه ما در آدرس مشخص شده بنویسیم))؛ // مشکل "تصاویر". "تصاویر Gulp" توسط gulp.task ("تصاویر"، تابع () (gulp.src (". دارایی / تصاویر / ** / *") // ما هر فایل را در پوشه و زیر پوشه های آن می گیریم. لوله ( imagemin ()) // ما تصاویر را برای وب بهینه سازی می کنیم. لوله (gulp.dest ("./ عمومی / تصاویر /")) // نتیجه ما در آدرس مشخص شده نوشتیم))؛ // TASK "WATCH". این کار توسط "GULP Watch" Command // شروع به تغییر تغییرات در فایل ها می کند و به طور خودکار سایر وظایف Gulp.Task دیگر را شروع می کند ("سازمان دیده بان"، عملکرد () (/ / هنگام تغییر * فایل های .scss در پوشه های سبک و زیر پوشه ها اجرای وظیفه Sass Gulp. سازمان دیده بان ("./ دارایی ها / سبک ها / ** / *. SCSS"، ["SASS"])؛ // هنگام تغییر پوشه * .js files "javascripts" و زیر پوشه ها JS Gulp را اجرا می کنند. Watch Task ("./ دارایی / جاواستریک / ** / *. JS"، ["JS"])؛ // هنگامی که هر فایل را در پوشه "تصاویر" و زیر پوشه ها تغییر دهید، تصاویر Gulp.watch را راه اندازی کنید (" ./ دارایی / تصاویر / ** / * "، [" تصاویر "])؛))؛

تراشه اصلی - در کار تماشا کردن. پس از اجرای آن یک بار، شما می توانید با خیال راحت با منابع کار کنید، و پروژه به طور خودکار هر بار که فایل های قابل ویرایش را ذخیره می کنید جمع آوری می شود.

در خروجی، ما آماده هستیم تا قالب را در اینترنت منتشر کنیم.

وظایف را می توان به طور جداگانه راه اندازی کرد. در نتیجه، در آرشیو در پایان مقاله، موارد زیر را پیدا خواهید کرد:

! توجه داشته باشید برای باز کردن این آرشیو، اول از همه، شما باید دستور NPM نصب را اجرا کنید. این پوشه حاوی زیبا است تعداد زیادی از فایل ها، و کپی / چسباندن آنها هر بار - اتلاف وقت.

در بازداشت

مجموعه ای عظیمی از دیگر پلاگین های مفید وجود دارد. به عنوان مثال، یک قالب جید فوق العاده، که در زمان افزایش سرعت کد HTML است، ممکن است کسی نیاز به کمتر و غیره داشته باشد.

مثال ارائه شده فقط یک پلت فرم و یک قالب است که از آن امکان شروع به استفاده از تمام این تراشه های زیبا بدون دانش بسیار می شود.

سیستم های تدارکات و سیستم های مونتاژ بسیار شتاب دهنده کار، اتوماسیون تدوین تدوین، تست، و سایر وظایف معمول است. همانطور که در هر منطقه دیگر، رقابت شدید در این بازار وجود دارد. تا سال 2014، Task Ranner Grunt در میان آنها غالب بود، اما بعدا یک تیم کوچک از پروژه جدا شد، که تصمیم گرفت تا یک ابزار جایگزین، GULP، مونتاژ پروژه گرا را ایجاد کند.

برای کمک به تصمیم گیری در انتخاب، در چارچوب مقاله، مدیران اصلی اصلی را در نظر بگیرید:

• grunt.

و همچنین روش های دیگر را لمس و ساخت.

به دنبال کمی پیش بروید، بگذارید بگوییم ما از GULP در WAVEACCESS استفاده می کنیم. پیاده سازی ابزار معلوم شد بسیار آسان است: در خانواده از محصولات JetBrains محصولات (ایده، WebStorm، Resharper)، که ما از سال ها استفاده کرده ایم، پلاگین های عالی برای کار با GULP / GRUTT و NPM / NODEJS.

وظیفه مدیر در مقابل سیستم مونتاژ پروژه: تفاوت چیست؟

مدیر وظیفه - ابزار به طور خودکار وظایف. در پیکربندی Ranners، می توانید نام این وظایف را ضبط کنید؛ تابع که آنها را انجام می دهد؛ پلاگین ها برای سرعت بخشیدن به اقدامات استاندارد، اما وظایف خود می توانند خودسرانه باشند. مثلا:

• وظایف برای استقرار (پروژه ZIP، پروژه بارگیری سرور از راه دور و غیره)
• وظایف مونتاژ پروژه (معدن، بهینه سازی، کد تأیید اعتبار و TP)
• وظایف مهاجرت داده ها و غیره

نمونه هایی از چنین ابزارهایی - Grunt و Gulp.

سیستم مونتاژ - این یک ابزار است که تنها یک کار معمولی از مونتاژ پروژه را در اسکریپت جاوا حل می کند که شامل موارد زیر است:

• concatenation،
• بررسی کد برای اعتبار،
• کد معدن، و TD.

ابزارهای مشابه شامل WebPack، کلم بروکلی، برنچ، مرورگر و دیگران است.

تمام وظایف ظاهری مشابه را می توان به صورت خودکار با استفاده از سایر ابزارها انجام داد: به عنوان مثال، با استفاده از NPM Run، که ما در مقاله نیز صحبت خواهیم کرد.

مثال

یک فایل GULP را برای جمع آوری پروژه در نظر بگیرید:

Const Gulp \u003d نیاز به ('Gulp')؛ Const Coffee \u003d نیاز به ('Gulp-Coffee')؛ Const Concat \u003d نیاز به ('Gulp-concat')؛ Const Uglify \u003d نیاز به ('Gulp-Uglify')؛ Const Imagemin \u003d نیاز به ('Gulp-Imagemin')؛ Const Sourcemaps \u003d نیاز به ('Gulp-sourcemaps')؛ const del \u003d نیاز به ('del')؛ )

اما مجمع یک مورد خاص از یک کار معمولی است. برای GULP، شما می توانید پیکربندی دیگری را بنویسید - بگو، برای استقرار:

var gulp \u003d نیاز به ("GULP")؛ var zip \u003d نیاز ("Gulp-Zip")؛ var del \u003d نیاز ("دل")؛ var install \u003d نیاز ("gulp-install")؛ var ronemosence \u003d نیاز ("اجرای دنباله")؛ var awslambda \u003d نیاز ("node-aws-lambda")؛ gulp.task ("تمیز"، عملکرد (CB) (del (["./ dist"، "./dist.zip"]، cb)؛)؛ gulp.task ("کپی"، تابع () ("index.js") .pipe (gulp.dest ("dist /"))؛))؛ gulp.task ("node-mods"، تابع ("./ package.json") .pipe (gulp.dest ("dist /"))) .pipe (نصب ((تولید: true))؛))؛ // پاک کردن تمام دایرکتوری های AWS-SDK از node_modules. ما نمی توانیم آنها را آپلود کنیم زیرا از نمونه لامبدا در حال حاضر // آن را در دسترس قرار می دهد. Gulp.Task ("Clean-AWS-SDK"، عملکرد (Callback) (DEL ("DEP / NODE_MODULES / ** / aws-sdk "]، callback)؛)؛ gulp.task (" zip "، function () (بازگشت gulp.src ([" dist / ** / * "،"! dist / package.json "]) .pipe (zip ("dist.zip")) .pipe (gulp.dest ("./"))؛)؛ gulp.task ("آپلود"، تابع (callback) (awslambda.deploy ("/ dist .zip "،" ./ lambda-config.js ")، callback)؛)؛ gulp.task (" deploy "، تابع (callback) ([" clean "]، [" copy "]، [" copy "] ، ["node-mods"]، ["Clean-AWS-SDK"]، [zip "]، [" آپلود "]، callback)؛))؛

A را می توان با وظایف جدید به عنوان ترکیبی از موارد موجود توصیف کرد:

gulp.task ('deploy's، gulp.series (' clean '،' copy '،' node-mods '،' clean-aws-sdk '،' zip '،' آپلود '))؛

این تفاوت است. در حال حاضر ابزار اساسی را در نظر بگیرید.

gULP در مقابل Grunt.

بنابراین، در مقابل ما دو کار راندر است: GULP و GRUTT. هر دو توسط node.js و npm استفاده می شود و وظایف را با استفاده از جاوا اسکریپت انجام می دهند.

در نگاه اول، آنها مشابه هستند، با این حال، Gulp دارای چیزی است که باعث می شود آن را راحت تر برای مونتاژ: مهارت موازی با وظایف پردازش و یک پیکربندی جمع و جور، API Laconic است. بیایید به اصل کار خود نزدیکتر باشیم.

داده های موضوع

ما یک فایل اعطا داریم که مونتاژ و پردازش CSS را ایجاد می کند.

این را می توان از آن دیده می شود که در هنگام شروع هر فرآیند، خاتمه می یابد:

فایل را باز می کند

فرآیند را راه اندازی می کند

موجب صرفه جویی در تغییرات؛

فایل پردازش شده را برای جلوگیری از فرآیند زیر در آن بسته می کند؛

فایل را به پوشه نهایی ثبت می کند.

به عبارت دیگر، زنجیره شامل ایجاد چندین پوشه زمانی و ذخیره فایل های متوسط:

پلاگین نویسندگان مختلف را بنویسید به هر پلاگین می تواند با فایل ها کار کند، دور زدن، فایل ها باید به عنوان اشیاء ارسال شوند. در GULP، این وظیفه توسط مجازی انجام می شود سیستم فایل vynyl-fs و GULP بلافاصله فایل را به فرایند زیر ارسال می کند بدون ایجاد فایل های موقت و بدون صرفه جویی در دیسک.

همان پیکربندی GULP در حال حاضر فشرده تر است:

مکانیسم کاری کلی آن - جریان فایل ها بدون نوشتن به دیسک:

توالی اجرای کار

یکی دیگر از تفاوت ها وجود دارد: GULP به طور پیش فرض به طور ناگهانی انجام می شود. مزایا در این و معایب وجود دارد. در همان فایل پیکربندی، ما دستور را برای شمارش فایل ها از دایرکتوری DEV / * SCSS می دهیم و آنها را به SASS ارسال می کنیم.

جریان ها نتیجه v.pipe را ارسال می کنند. روش لوله اجازه می دهد تا شما را به جمع آوری نتیجه در بافر در قطعات، و هنگامی که آن را کامل، بلافاصله اطلاعات را به جریان برای خواندن ارسال، بدون اتمام دریافت محتویات دایرکتوری.

اجرای وظیفه متوالی باعث می شود که GULP سریع و قدرتمند باشد، اما گاهی اوقات نیاز به انجام وظایف همزمان به طور همزمان به عنوان در Grunt. مشکل را می توان از طریق فراخوانی، بازگشت جریان یا وعده حل کرد. وظیفه هابر در جزئیات بیشتر برچیده شده است. یک جایگزین در سایت npm.js وجود دارد

اگر از Grut استفاده می کنید، اما شما با جریان داده ها جذب می شوید - همان ماژول Vynyl-FS را می توان برای پیاده سازی آن در Grunt استفاده کرد.

API Gulp Laconic تنها 5 روش دارد:

وظیفه (نام، FN). یک ویژگی را به نام ثبت می کند. شما می توانید وابستگی به وظایف دیگر را مشخص کنید اگر ابتدا آنها را اجرا کنید.

اجرای (وظایف ...). وظایف را انجام می دهد

سازمان دیده بان (GLOB، FN). اگر فایل را در محل جابجایی تغییر دهید، عملکرد را انجام می دهد.

src (glob). به عنوان یک پارامتر ماسک فایل را می گیرد و موضوع را نشان می دهد که این فایل ها را نشان می دهد. سپس جریان را می توان به پلاگین ورودی منتقل کرد.

dest (پوشه). فایل ها را به پوشه مشخص شده ذخیره می کند.

من به خصوص دوست دارم حضور حضور در API پروژه "بومی" را یادداشت کنم، زیرا ردیابی تغییرات ثابت در فایل ها مهمترین جزء مونتاژ است. خلاصه ای از API امکان تمرکز بر روی وظیفه اصلی خود را به مونتاژ پروژه ها می کند.

جایگزین Gulp و Grunt

با وجود محبوبیت GULP (بیش از 130 بار برای بارگیری در روز) و Grunt (بیش از 86 بار برای بارگیری در روز با توجه به NPMJS.com)، توسعه دهندگان در این سیستم ها و نقص های آنها مشاهده می کنند: به عنوان مثال، وابستگی به پلاگین ها، ناقص مستندات، اشکال زدایی ناراحت کننده. در عوض، شما می توانید سیستم های مونتاژ پروژه (مانند بروکلی و WebPack) یا اسکریپت NPM را در نظر بگیرید.

سیستم های مونتاژ پروژه

چندین راه حل جایگزین را در پلت فرم node.js در نظر بگیرید. برای جمع آوری پروژه، آنها می توانند جایگزین Gulp و Grunt شوند.

این سیستم، مانند Gulp، به عنوان یک رقیب رقیب به زودی به دست آمد، اما توسعه دهندگان در ابتدا آن را دقیقا به عنوان دستیار ساخت با تمام مزایا و معایب. او بدون تنظیمات "درک" نمی کند، که * .js یک فایل با اسکریپت ها، * .coffee CoffeScript است؛ پیکربندی آن فشرده تر است. با این حال، هر گونه اقدامات دلخواه در مرحله مونتاژ او قادر به انجام آن نیست.

در اینجا فایل پیکربندی Brunch است. این در CoffeScript نوشته شده است (شما همچنین می توانید بر روی JS بنویسید):

exports.config \u003d فایل ها: javaScripts: joamscripts: joamscripts / app.js ": / ^ app /" javascripts / vendor.js ": / ^ (bower_components | فروشنده / سبک ها: styleshets / app.css" سفارش : پس از: ["فروشنده / stylees / helpers.css"] قالب ها: مشترک: "javascripts / app.js"

در اینجا من می خواهم به اپراتورهای مشترک و سفارش توجه کنم. در سطح پیکربندی Brunch، به نظر می رسد که شما باید فایل ها را در سفارش دلخواه جمع آوری کنید. در نتیجه، پیکربندی 20 تا 30 خط را می گیرد.

کلم بروکلی

Indi-Tool، که در حال توسعه است. توسعه دهندگان او خواستار ایجاد رقابت در حال حاضر GULP.

در مقایسه با GULP، ابزار بروکلی از اصول دیگر استفاده می کند:

مجمع شتاب هر پلاگین یک ذخیره سازی متوسط \u200b\u200bاز نتایج مونتاژ را به جای تنها Rebeling جزئی تنها فایل های لازم را اجرا می کند.

درختان به جای فایل ها. GULP بهترین تغییر یک فایل را به یک فینال می کند. بروکلی پیش فرض تنها از درختان استفاده می کند، نه فایلها، و آنها را به درختان دیگر تبدیل می کنند (از یک رأس دژنراسیون).

در حال حاضر، این ابزار به طور فعال توسعه می یابد، پلاگین های جدید ظاهر می شود، اما برای پروژه های جدی خیلی زود است: پلاگین ها کافی نیستند.

WebPack یک سیستم مونتاژ انعطاف پذیر است. این نحو غیر معمول است، اما خودش هر گونه نحو ماژول را تصویب می کند.

درک اینکه شما باید با چنین غول های به عنوان GULP رقابت کنید، سازندگان تصمیم گرفتند زندگی ما را در توسعه پروژه های بزرگ کاهش دهند. و اضافه شده به ابزار:

توانایی به طور خودکار ساخت وابستگی های چوب و منابع.

ابزارهای راحت برای اجرای بارگذاری پویا.

سازگاری با عملا هر ماژول (AMD، UMD، ES 2015، مشترک JS، ماژول های شخص ثالث بر اساس آنها).

سازگاری با preprocessors (Sass، Babel، Script، Script نوع، و غیره).

Reload Live Reload (فناوری بوت آسنکرون، که در آن مرورگر به روز رسانی کل صفحات، اما برنامه های جداگانه ای).

توانایی به اشتراک گذاشتن کد و تولید بسیاری از فایل های بسته نرم افزاری، اجتناب از ایجاد یک Bundle.js سنگین.

توانایی بهینه سازی کد

به طور جداگانه، می توانید یک رویکرد انعطاف پذیر به وابستگی ها را ذکر کنید. ماژول می تواند JS، CSS و فایل HTML و حتی JPEG با PNG باشد. شما می توانید از نیاز ("myjsfile.js") استفاده کنید و نیاز به (mycsssfile.css)، به اشتراک گذاری و استفاده از قطعات مصنوعی دوباره.

بیشتر بخوانید در مورد امکانات، تنظیمات ابزار، پلاگین ها را می توان در GitHub یافت، در ارائه با FrontTalks: غوطه وری عمیق در وبپانپک.

اسکریپت NPM

وظایف مونتاژ را می توان با استفاده از اسکریپت های NPM حل کرد. بسیاری از این ایده را ترساندند: تعداد کمی از قابلیت ها، اسکریپت ها در مقایسه با GULP یا WEBPACK به اندازه کافی سریع نیستند. با این وجود، این کمبودها اغراق آمیز است.

قابلیت های اسکریپت NPM

اسکریپت های NPM بسیاری از وظایف را حل می کنند. به عنوان مثال، شما می توانید اسکریپت تله را اجرا کنید:

("نام": "npm-scripts-مثال"، "نسخه": "1.0.0"، "توضیحات": "npm scripts مثال"، "scripts": ("prebuild": "echo من قبل از ساخت اسکریپت اجرا می شود" ، "ساخت": "Cross-Env Node_env \u003d WebPack تولید" "PostBuild": "Echo من پس از ساخت اسکریپت اجرا"))

اسکریپت ها به ترتیب با توجه به پیشوند ها بارگذاری می شوند: پیش ساخته، به عنوان مثال، قبل از ساخت شروع می شود، زیرا پیشوند پیش از آن است. بر این اساس، PostBuild آخرین بار بارگذاری خواهد شد. تیم NPM Run ساخت آنها را در نظم دلخواه راه اندازی خواهد کرد.

شما می توانید یک اسکریپت را از دیگری تماس بگیرید تا تجزیه شود وظایف پیچیده. به عنوان مثال، در اینجا کار پیشبرد کار تمیز را فرا می خواند.

("نام": "npm-scripts-مثال"، "نسخه": "1.0.0"، "توضیحات": "npm scripts به عنوان مثال"، "scripts": ("تمیز": "Rimraf ./dist && mkdir dist "،" Prebuild ":" NPM Run Clean "،" ساخت ":" Cross-env Node_env \u003d تولید WebPack))

اگر این کار خیلی پیچیده شود، همیشه می توانید یک فایل جداگانه تماس بگیرید:

("نام": "npm-scripts مثال"، "نسخه": "1.0.0"، "توضیحات": "npm scripts به عنوان مثال"، "scripts": ("ساخت": "node build.js"))

با توجه به جریان GULP برای وظایف مونتاژ، بسیار راحت تر از Grunt شده است. اما می توان آن را از طریق NPM اجرا کرد. در ویندوز و یونیکس، جریان به طور پیش فرض انجام می شود، بدون صرفه جویی در فایل های متوسط.

به عنوان مثال، در یونیکس شما می توانید محتویات فایل GREP را ارسال کنید و آن را به یک فایل جدید ارسال کنید:

grep 'نام من bigfile.txt\u003e linesthathavemyname.txt

تغییر مسیر (\u003e) رشته های مورد نظر را به فایل مقصد ارسال می کند. این کار بدون صرفه جویی در فایل های متوسط \u200b\u200bانجام می شود.

اما ناراحتی وجود دارد: شما نمی توانید نظرات را در package.json ترک کنید. راه خروج می تواند ایجاد اسکریپت های کوتاه با نام قابل فهم به هدف برخی از یک کار کوچک باشد. در جزئیات بیشتر، سوال جایگزینی Ranners Task Ranners NPM به خوبی در مقاله انگلیسی صحبت می شود چرا من GULP را ترک کرده ام و برای اسکریپت های NPM Grunt.

نتیجه

در بازار یک ابزار رقابت بزرگ برای خودکار سازی وظایف معمول (به عنوان مثال، Gulp و Gulp)، و همچنین ابزار برای خودکار سازی مونتاژ پروژه (WebPack، کلم بروکلی، مدوزا، مرورگر و غیره) وجود دارد.

اگر شما به تیراندازان کار نگاه کنید، سپس Gulp در مقایسه با Grunt ساده تر، درک و تولید می شود: به دلیل صرفه جویی در عملیات دیسک برنده می شود. اما Grunt دارای پلاگین های بیشتری است (به عنوان مثال، یک پلاگین تست وجود دارد). به همین دلیل، او بسیاری از طرفداران باقی می ماند.

اگر ما فقط در مورد مجمع صحبت کنیم، Gulp دارای مزایای بیش از Grunt است:

معماری جریان برای انتقال فایل ها بر روی زنجیره ای که توسط ماژول Vynyl-FS ارائه شده است.

به طور پیش فرض - اجرای کار غیر همزمان.

API Laconic تنها 5 توابع است.

در عین حال، WebPack Build یک ابزار به همان اندازه جالب است. این تکنولوژی Live Reload را فراهم می کند که تسریع تجدید مرورگر را تسریع می کند. این یک تکنولوژی بزرگ است: فناوری موجب صرفه جویی در زمان برای فشار دادن دکمه به روز رسانی که توسعه دهندگان باید به طور مداوم فشار دهید. GULP همچنین دارای بازنگری زنده است، اما WebPack دشوار است مقایسه با GULP یا GULT، به عنوان آن را "تیز" تنها تحت ساخت و نمی داند "چگونه به حل وظایف دلخواه خود را نمی دانم.

همه این تصمیمات کاملا با خانواده محصولات از JetBrains کاملا یکپارچه شده اند، اما ما در WeWeAccess ترجیح می دهیم Grunt برای فرصت های فراوانی برای هر دو پایه، و برای متخصصان ظهور.

اگر سوالی دارید و باید یک پروژه وب را توسعه دهید، به ما بنویسید [ایمیل محافظت شده]

• ظاهری
• Grunt.
• گولپ
• دونده کار

در این مقاله، ما جزئیات فرآیند مونتاژ پروژه پروژه را تجزیه و تحلیل خواهیم کرد، که در طول روز من کار می کرد و برای روال بسیار ساده تر بود.
این مقاله ادعا نمی کند که حقیقت را در آخرین مورد قرار دهد، زیرا امروزه تعداد زیادی از مجامع مختلف و رویکردهای مجمع وجود دارد و هر کس به طعم و مزه انتخاب می کند. من فقط افکار من را در این موضوع به اشتراک می گذارم و گردش کار من را نشان می دهم.

ما از جمع کننده GULP استفاده خواهیم کرد. بر این اساس، Node JS باید در سیستم نصب شود. نصب گره ها برای یک پلت فرم خاص ما در نظر نمی گیریم، زیرا این چند دقیقه طول میکشد.
و برای اولین بار به سوال پاسخ خواهد داد - چرا GULP؟
از گزینه های تخریب بیشتر یا کمتر ما Grunt و Brunt.
هنگامی که من فقط شروع به آمدن به گردآورند - در حال حاضر Grunt و Gulp در بازار وجود دارد. اولین پیش از آن ظاهر شد و در این مورد یک جامعه بزرگتر و پلاگین های مختلفی دارد. با توجه به NPM:
Grunt - 11171 بسته
GULP - 4371 بسته

اما Grunt به من از طریق کلام کلام به من رسید. و پس از خواندن چندین مقاله، مقایسه شد - من گلپ را برای سادگی و دید خود ترجیح دادم.
Brunch یک پروژه نسبتا جوان است، با تمام مزایای این مزایا و معایب. من او را با علاقه تماشا می کنم، اما هنوز از آن استفاده نکرده ام.

بیایید ادامه دهیم:

یک پوشه برای پروژه ما ایجاد کنید، به عنوان مثال "Habr". آن را در کنسول باز کنید و فرمان را اجرا کنید

npm init

شما به سادگی می توانید وارد کنید به تمام سوالات نصب، زیرا حالا اساسا نیست
در نتیجه، در پوشه پروژه، ما توسط بسته بندی فایل تولید می شود، تقریبا چنین محتوایی.

("نام": "Habr"، "نسخه": "1.0.0"، "توضیحات": ""، "اصلی": "index.js"، "scripts": ("test": "echo" خطا: بدون آزمون مشخص شده "&& خروج 1")، "نویسنده": ""، "مجوز": "ISC")

برخی از تغییرات آن تحت نیازهای ما:

("نام": "Habr"، "نسخه": "1.0.0"، "توضیحات": ""، "نویسنده": ""، "مجوز": "ISC"، "devpenepencencials": ("gulp": ("gulp": "^ 3.8.1))

در بلوک های انحصاری، ما نشان دادیم که ما به GULP نیاز داریم و بلافاصله ما تمام پلاگین های ما را تجویز خواهیم کرد.

پلاگین ها:

با سبک ها، من همین کار را با JS انجام می دهم، اما فقط به جای سفت "A - من از واردات داخلی SCSS استفاده می کنم.
Main.Scss ما به نظر می رسد:

/ * * شخص ثالث * / import "CSS: ../../ bower_components / normalize.css / normalize.css"؛ / * * سفارشی * / import "partials / app"؛

به این ترتیب معلوم می شود که کنترل سفارش های سبک را آسان می کند.
کار ما را بررسی کنید، در حال اجرا باشید

سبک GULP: ساخت

ما تصاویر را جمع آوری می کنیم

وظیفه در عکس ها به نظر می رسد:

gulp.task ("تصویر: ساخت"، function () (gulp.src (path.src.img) // عکس های ما را انتخاب کنید. لوله (ImageMin (/ / (/ / (/ / trucking swindsive: true، svgoplugins: [(removeviewbox: false )، استفاده از:، interlaced: true)))))))) .pipe (gulp.dest (path.build.img)) // و پرتاب کردن در ساخت (connect.Reload ())؛))؛

من از تنظیمات پیش فرض Imagemin استفاده می کنم، به استثنای interlaced. بیشتر بخوانید در مورد API این افزونه که می توانید بخوانید.
در حال حاضر، اگر ما برخی از عکس ها را در src / img قرار داده و فرمان را راه اندازی

تصویر GULP: ساخت

بنابراین، ما تصویر بهینه سازی شده ما را در ساخت خواهیم دید. همچنین، GULP در کنسول می نویسد که چقدر فضا برای کاربران از سایت ما ذخیره شده است :)

فونت

با فونت ها، من معمولا نیازی به انجام هر گونه دستکاری ندارم، اما هر آنچه که شما پارادایم را پرستش می کنید "ما در SRC / و جمع آوری در ساخت /" - من به سادگی فایل ها را از src / فونت ها کپی کرده و به ساخت / فونت ها وارد می کنم. اینجا کار

gulp.task ("فونت: ساخت"، تابع (gulp.src (path.src.fonts) .pipe (gulp.dest (path.build.fonts)))؛

حالا اجازه دهید Taq را با نام "ساخت" تعریف کنیم، که همه چیز را که در اینجا حساب کرده اید راه اندازی می کند

gulp.task ("ساخت"، ["ساخت"، ["ساخت"، "JS: ساخت"، "سبک: ساخت"، "فونت: ساخت"، "تصویر: ساخت"])؛

تغییرات فایل

به منظور صعود به تمام وقت در کنسول، اجازه دهید از GULP هر بار که شما برخی از فایل را تغییر دهید تا کار مورد نظر را تغییر دهید. برای انجام این کار، این کار را بنویسید:

GULP.TASK (WATCH "، FUNCTURS () (WATCH (FUNCTION (EVENT، CB) (GULP.START (" HTML: BUILD ")؛))؛ سازمان دیده بان (، تابع (رویداد، CB) (Gulp.Start (" سبک : ساخت ")؛))؛ سازمان دیده بان (، تابع (رویداد، CB) (gulp.start (" JS: build ")؛))؛ سازمان دیده بان (، تابع (رویداد، CB) (gulp.start (" تصویر: ساخت ")؛))؛ تماشا (، تابع (رویداد، CB) (gulp.start (" فونت: ساخت ")؛)؛)؛)

ما درک می کنیم که نباید مشکلی داشته باشیم. ما به سادگی از طریق مسیرهای ما تعریف شده در متغیر مسیر، و در عملکردی که هنگام تغییر فایل نامیده می شود - لطفا شروع لازم را شروع کنید.
سعی کنید در کنسول اجرا کنید

GULP سازمان دیده بان

و فایل های مختلف را تغییر دهید.
خوب، نه سرد؟)

وب سرور

برای لذت بردن از Miracle Liveeload - ما باید یک وب سرور محلی ایجاد کنیم. برای انجام این کار، کار بعدی را بنویسید:

gulp.task ("webserver"، function () (connect.server ((میزبان: server.host، port: server.port، lieveLoad: true))؛)؛)؛

حتی چیزی برای نظر دادن وجود ندارد. ما به سادگی سرور را از Liveload در میزبان و پورت شروع خواهیم کرد که ما در شیء سرور تعریف کرده ایم.

تمیز کردن

اگر شما برخی از عکس ها را اضافه کنید، سپس تصویر را اجرا کنید: ساخت وظیفه و سپس تصویر را حذف کنید - آن را در پوشه ساخت باقی می ماند. بنابراین راحت خواهد بود - به طور دوره ای آن را تمیز کنید. برای این کار ساده ایجاد کنید

gulp.task ("تمیز"، عملکرد (CB) (Rimraf (path.clean، cb)؛))؛

حالا هنگام شروع فرمان

GULP تمیز

فقط پوشه ساخت را حذف کرد.

و در نهایت، رحمت کمی

این وظیفه عملکرد حیاتی را حمل نمی کند، اما من واقعا آن را دوست دارم :)

gulp.task ("OpenBrowser"، تابع () (OPN ("http: //" + server.host + ":" + server.port + "/ build")؛))؛

هنگامی که ما نیاز داریم، ما آن را راه اندازی خواهیم کرد - و در مرورگر ما به طور خودکار برگه را با پروژه ما باز می کند.
سرد :)

توافق نهایی

آخرین چیزی که ما کار پیش فرض را تعریف خواهیم کرد، که کل مجمع را راه اندازی خواهد کرد.

gulp.task ("به طور پیش فرض"، ["ساخت"، "webserver"، "watch"، "openBrowser"])؛

در نهایت، gulpfile.js شما چیزی شبیه به آن نگاه می کند.
در حال حاضر در کنسول انجام می شود

و voila :) قطعه کار برای پروژه شما آماده است و منتظر شما است.

کلمات زوج در نتیجه

این مقاله به عنوان راهی برای تازه کردن در خاطرات ظرافت برای ساخت پروژه های ظریف فکر کرد و انتقال این تجربه را به توسعه دهندگان جدید کاهش داد. شما نیازی به استفاده از این تجسم در پروژه های خود ندارید. Yeoman.io وجود دارد که در آن شما ژنراتورها را تقریبا برای هر نیاز پیدا خواهید کرد.
من این گردآورنده را به دلیل 2 ممکن نوشتم.
- من دوست دارم از من استفاده کنم کد HTML
- تقریبا تمام مجمع هایی که من ملاقات کردم - یک پوشه موقت استفاده می شود (معمولا.TMP /)، برای ضبط نتایج متوسط مونتاژ. من این رویکرد را دوست ندارم و می خواستم از پوشه های موقت خلاص شود.
- و من می خواستم این همه این را به من از جعبه :)

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

امیدوارم مقاله برای شما مفید باشد :)

P.S. تمام خطاها، کاستی ها و شات ها - لطفا شخصی را بنویسید

توسعهدهنده Front-End Gensleman تنظیم شده است

این راز نیست که توسعه دهنده مدرن مدرن باید در آغوش خود داشته باشد یکی از ابزارهای مونتاژ پروژه مانند گولپ یا Grunt.. تا زمانی که برخی از زمان ها یک انحصار را در این زمینه اشغال کردند، اما گروه توسعهدهنده از Grunt تصمیم گرفتند تا GULP سبک وزن و سریع کار خود را ایجاد کنند.

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

ما از تکنولوژی استفاده می کنیم

• پلت فرم نرم افزار: node.js.
• CSS قبل از پردازنده: قلم
• مدیر وظیفه: گولپ

چرا مدیر وظیفه مدیر

تا همین اواخر، من خودم تعجب کردم که چرا من نیاز به صرف وقت برای پیکربندی پیکربندی مدیر وظیفه دارم، اگر من با طرح بندی طرح به خوبی کار کنم تا زمانی که من شروع به استفاده از پیش پردازنده های CSS کردم.

CSS قبل از پردازنده ها - واقعا راحت و سرعت نوشتن سبک های نوشتن، اما کامپایل کد نوشته شده در یک پیش پردازنده به یک CSS معمولی، نه کاملا یک کار بی اهمیت است که توسط یک دکمه حل شده است. در اینجا ما برای نجات هستیم و مدیر وظیفه می آید. تبدیل کد رخ می دهد نه با فشار دادن دکمه، همه چیز به صورت آنلاین بدون مشارکت شما اتفاق می افتد (البته، اگر همه چیز را به درستی پیکربندی کنید).

البته، وظایف مدیر وظیفه به مراتب فراتر از فرآیندهای مرتبط با تبدیل کد تبدیل به CSS خالص می رود. گردآورنده پروژه نیز در یک وزارتخانه مشغول به کار است، Concatenation، چک کردن کد برای خطاها، جمع آوری تصویر در اسپری ها، بهینه سازی تصاویر تحت وب و غیره شما فقط در پروژه خود را بسیاری از فایل های جدا شده از منطق ایجاد کنید، که پس از آن به راحتی در یک دایرکتوری که قبلا پردازش شده و آماده کار در مرورگر هستند، به راحتی جمع آوری شده اند. اما کمی بعد آن است، و اکنون اجازه دهید با آماده سازی شروع کنیم.

نصب Node.js.

اگر می دانید چگونه Node.js را به سیستم خود نصب کنید و از آن استفاده کنید، می توانید با خیال راحت به هدر بعدی بروید.

من می خواهم بلافاصله هشدار بدهم که تمام اقدامات شرح داده شده مربوط به آن هستند Mac OS X.اما به طور کلی برای دیگران قابل اجرا است یونیکس سیستم های. توسعه از طریق مدیر وظیفه و خط فرمان در پنجره ها تا حدودی سخت تر و در اینجا آن را شرح نخواهد داد. با این حال، اگر هنوز از ویندوز استفاده می کنید و آماده نیستم که از آن امتناع کنم، می توانم یک گزینه استفاده را ارائه دهم ماشین مجازی با نصب اوبونتومن از این گزینه در سیستم من استفاده می کنم، که به طور کلی کاملا راحت است.

بنابراین، اولین چیزی که ما باید بسته بندی node.js را به سیستم خود دانلود و نصب کنیم تا با یک گره از طریق کنسول کار کنیم. به سایت رسمی Node.js بروید و یک نسخه پایدار تازه برای سیستم خود را دانلود کنید. پس از نصب، فرمان گره باید بر روی خط فرمان شما موجود باشد. برای تأیید اینکه گره شما کار می کند، دستور را بر روی خط فرمان وارد کنید

در پاسخ، نسخه Node.js نصب شده است. اگر همه چیز خوب باشد، ادامه دهید

ساختار دایرکتوری های پروژه

در پروژه های ما، ما از یک نسخه واحد از ساختار استفاده خواهیم کرد:

توسعه دادن - کاتالوگ توسعه ریشه └start - کاتالوگ پروژه ├Build - مدیر وظیفه جمع آوری شده ─Resource - تمام فایل های منبع برای توسعه (.psd، و غیره) ├SRC - کاتالوگ توسعه │├CSS - فروشگاه توسعه سبک ││├ تصاویر - تمام تصاویر استاتیک ││├sprites. - تصویر جمع آوری شده در Sprite ││├ حق - فایل های سفارشی سبک ها │││├mixins.styl - مخلوط های سفارشی │││└Styles.Styl. - سبک های سفارشی ││├vendor - دیگران فایل های خارجی سبک ها ││└Styles.Styl. - فایل اصلی اصلی │├─fonts - کاتالوگ فونت ها │├img - کاتالوگ تصاویر پویا │├js - کاتالوگ توسعه جاوا اسکریپت ││ ├ _ *. JS - فایل های جانبی JS ││├ ─main.js. - اصلی سفارشی JS ││└ rmain.js. - فایل اصلی JS │├─ .htaccess - پیکربندی سرور │├ * .html. - فایل های نشانه گذاری صفحه │├Pages.html. - فایل با لینک به تمام قالب صفحه │├ ─INDEX.HTML. - فایل نشانه گذاری فایل │└ محدود کردن - کاتالوگ فایل های علامت گذاری پلاگین │ └ ─ * .html - فایل های علامت گذاری پلاگین (header.html، و غیره) ├Package.json - پیکربندی مدیر باند NPM ├gulpfile.js - پیکربندی GULP ├stylus.template.mustache. - ماسک برای خواندن اسپری ├ ─Todo - ورق todo └─Gitignore. - پیکربندی GIT

نصب و راه اندازی

در کنسول با استفاده از فرمان CD، به دایرکتوری ریشه توسعه بروید، یک کاتالوگ پروژه شروع MKDIR ما را ایجاد کنید و به آن حرکت کنید.

ما ساختار ما را برای پروژه از طریق کنسول ایجاد خواهیم کرد:

mKDIR منبع ساخت SRC SRC / CSS SRC / CSS / CSS / SRC / CSS / SRC / CSS / بخش SRC / CSS / فروشنده SRC / JS SRC / TEMPLATE SRC / TEMPLATE / شامل SRC / IMG SRC / FONTS

فایل های اولیه را در ساختار پروژه ایجاد کنید:

touch Gulpfile.js stylus.template.Mostache .Gitignore src / .htaccess src / todo src / css / styles.styl src / css / partial / styles.styl src / css / partial / mixins.styl src / js / main.js src / js / _main.js src / template / pages.html src / template / index.html src / template / شامل / header.html src / template / footer.html

ایجاد package.json

تمام سوالات پاپ آپ را می توان از طریق وارد کردن، گره آنها را به مقادیر پیش فرض تنظیم، و یا پر کردن زمینه های پیشنهادی.

.gitignore

صحبت کردن با گیتا کدام کاتالوگ ها را نادیده می گیرند و مخزن را پر نمی کنند:

/ node_modules / / build / / resource /

دایرکتوری node_modules بعد از نصب افزونه ها ظاهر می شود و شامل تمام پلاگین های گره پروژه خواهد بود.

src / .htaccess

نصب یک فشرده سازی GZIP اضافی و ذخیره سازی برای سرور:

addoutputfilterbytype deflate متن / متن متن / متن ساده / XML متن متن / CSS متن / جاوا اسکریپت / جاوا اسکریپت # Serve Gzip فشرده فایل های CSS اگر آنها وجود داشته باشند # و مشتری دریافت GZIP. rewritecond "٪ (http: encoding encoding)" gzip "rewritecond٪ (request_filename) \\. gz" -s rewraterule "^ (. *) \\. CSS" "$ 1 \\ .css \\ .gz" # serve gzip compressed فایل های JS اگر آنها وجود داشته باشند # و مشتری GZIP را می پذیرد. rewritecond "٪ (http: encid-encoding)" gzip "rewritecond٪ (request_filename) \\. gz" -s rewriterule "^ (. *) \\. js" "$ 1 \\ .js \\ .gz" # محتوا صحیح انواع، و جلوگیری از mod_deflate double gzip. rewriterule "\\ .css \\ .gz $" "-" Rewraterule "\\ .js \\ .gz $" "-" # خدمت به نوع رمزگذاری صحیح. Header Append Content-encoding Content-encoding Proxies Force To Cache Gzipped & # فایل های CSS / JS غیر Gziped به طور جداگانه. append header difference-encoding ExpiresActive در برنامه ExpireSbyType / جاوا اسکریپت "Access Plus 1 ماه" Expiresbytype Image / JPG "Access Plus 1 ماه" Expiresbytype Image / JPEG "Access Plus 1 ماه" Expiresbytype Image / GIF "Access Plus 1 ماه" Expiresbytype Image / PNG "Access Plus 1 ماه "ExpireSbyType متن / CSS" دسترسی به علاوه 1 ماه "

src / css / styles.styl

فایل های سبک کاربر را به فایل اصلی اصلی وصل کنید:

import "جزئی / سبک"

لطفا توجه داشته باشید که برای اتصال فایل های Styl، پسوند مشخص نشده است، با توجه به معنایی از کد پیش پردازنده قلم. برای اتصال سبک ها در یک فرمت دیگر، به عنوان مثال .CSS، نشانه ای از دومی مورد نیاز است.

انجام دادن.

این صفحه شامل یک ورق توسعه TODO است. شما می توانید در مورد کار با این فایل در صفحه پلاگین PLAINTASKS PLAINTASKS برای متن Sublime بیشتر بخوانید.

این تنظیم ساختار کامل شده است.

نصب پلاگین ها را از طریق NPM Batch Manager نصب کنید

node.js به طور پیش فرض شامل یک مدیر دسته ای NPM، که در آن مخازن بسیاری از پلاگین ها جمع آوری شده است که ما باید کار کنیم.

تنظیم پلاگین GULP

ابتدا شما باید GULP را در سطح جهانی (با کلید -G) در سیستم ما نصب کنید

npm نصب GULP -G

آن را یک بار نیاز داریددر آینده، نصب جهانی مورد نیاز نیست.

حالا شما باید GULP را به صورت محلی در کاتالوگ پروژه نصب کنید

npm نصب gulp - save-dev

کلید - Save-Dev نشان می دهد که اطلاعات مربوط به افزونه (نام در مخزن و نسخه آن) به پیکربندی package.json اضافه می شود و آن را برای این پروژه به یاد می آورید. از آنجایی که ما یک پوشه سنگین وزن را با پلاگین های Node_Modules ذخیره نمی کنیم، ذخیره شده در اطلاعات پیکربندی در مورد پلاگین های نصب شده، تنها یک دستور NPM I را قادر می سازد تا تمام پلاگین های لازم را در این پروژه بکار بگیریم.

برای هر تیم اختصارات وجود دارد، بنابراین فرمان بالا ما می توانیم در یک فرمت کوتاه تر بنویسیم

در آینده، ما همچنین از فرمت اختصاصی تیم ها استفاده خواهیم کرد.

پلاگین Stylus برای GULP

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

نصب:

npm من gulp-stylus -d

پلاگین پردازش CSS

avtoprefikser - به صورت خودکار جایگزین prefixes -ms ----- MOZ - Webkit - در خواص مورد نظر:

npm i gulp-autoprefixer -d

CSS Minification - پلاگین Minifies فایل خروجی CSS حذف آن از شکاف های غیر ضروری و زبانه ها:

npm i gulp-minify-css -d

پلاگین پردازش تصویر

انجمن تصاویر در جبهه - شما دیگر نیازی به صرف ساعت های زمان گرانبها ندارید تا تمام تصاویر را در جگر ترکیب کنید و سپس مختصات آنها را محاسبه کنید، این همه به طور خودکار این افزونه را برای شما ایجاد می کند:

npm i gulp.spritesmith -d

اضافه کردن به stylus.Template.Template.Mustache mask برای محاسبه موقعیت در sprites:

((#iTems)) $ ((نام)) \u003d ((px.y)) ((px.offset_x)) ((px.offset_y)) ((px.width)) ((px.width)) ( px.height)) ((px.total_width)) ((px.total_height)) "((escaped_image))"؛ (/ موارد))

اضافه کردن مخلوط های ویژه در mixins.styl:

Spritewidth ($ sprite) عرض $ spriteheight ($ sprite) ارتفاع $ spriteosition ($ sprite) پس زمینه موقعیت $ sprite $ spriteImage ($ sprite) URL تصویر پس زمینه ($ sprite) sprite ($ sprite) اگر! مسابقه ("شناور" ، Selector ()) &&! مطابقت ("فعال"، انتخاب ()) SpriteImage ($ sprite) spriteosition (sprite) spriteheight ($ sprite) spriteheight ($ sprite)

Mixins و یک فایل تولید شده را با مختصات به فایل اصلی SRC / CSS / Styes.Styl اصلی وصل کنید:

import "partial / sprite" import "partial / mixins"

توجه داشته باشید که اسپری ها باید به سبک های کاربر import متصل شوند "جزئی / سبک"

بهینه سازی تصویر برای وب - افزونه به طور خودکار تمام اطلاعات غیر ضروری را از تصاویر خود برش می دهد و آنها را به اندازه مطلوب اضافه می کند که در بعضی موارد اجازه می دهد تا دامنه تصاویر تا 90٪ کاهش یابد:

npm i gulp-imagemin -d

پلاگین پردازش جاوا اسکریپت

جنجالی JS - افزونه کد JS را کاهش می دهد. زمان دانلود آن را کاهش می دهد:

npm من gulp-ugugify -d

ردیابی JS - افزونه کد JS خود را برای شناسایی تمام ناسازگاری ها بررسی می کند و آنها را به کنسول منتقل می کند:

npm من jshint gulp-jshint -d

پلاگین پردازش HTML

فایل های متصل شده - افزونه به شما اجازه می دهد بخش های استاتیک سایت را ذخیره کنید، مانند هدر، پاورقی، کنار، و غیره، در فایل های جداگانه و آنها را به هر بخشی از یک فایل دیگر متصل کنید. دیگر به اندازه کافی وجود ندارد، در مورد تغییرات کوچک در هدر، تغییر ده ها یا حتی صدها صفحات HTML از الگو:

npm من gulp-rigger -d

پلاگین نیز با JS سازگار است.

اتصال کاربر JS به اصلی JS SRC / JS / Main.js ساخت نرم افزار:

// \u003d _main.js.

اتصال به فایل های index.html header.html و footer.html

// \u003d شامل / header.html // \u003d شامل / footer.html

پلاگین های دیگر

liveeload - افزونه شما را حذف می کند تا هر بار که تغییرات را تغییر دهید، صفحه را در مرورگر راه اندازی مجدد کنید، در حال حاضر به طور خودکار در هنگام ذخیره فایل تغییر یافته اتفاق می افتد:

npm من gulp-connect -d

محافظت از گله از خروج - گاهی اوقات اتفاق می افتد که GULP می تواند از حالت مشاهده در صورت خطاهای بحرانی پرواز کند (عمدتا به علت JS). این پلاگین، در صورت امکان، تلاش می کند تا فرآیندهای GULP را ترک کند:

npm من gulp-plumber -d

تغییر نام فایل ها - شایع ترین کار با نام فایل. این افزونه به شما امکان می دهد فایل ها را به طور کامل تغییر دهید، فرمت را تغییر دهید، پیشوند ها و postfix را اضافه کنید، به عنوان مثال، سبک style.styl را در style.min.css اضافه کنید:

npm i gulp-rename -d

دلمه - گاهی اوقات نیاز به تکمیل کاتالوگ دایرکتوری ساخت وجود دارد، یک پلاگین برای نجات وجود دارد:

سوختی - به منظور پس از معدن، فایل های شما از طریق اشکال زدایی مرورگر قابل خواندن بود، شما باید SourceMap را به فایل های Minifier اضافه کنید:

npm من gulp-sourcemaps -d

ویژگی های تماشا پیشرفته - افزونه ساعت هوشمند را تماشا می کند، در حال حاضر تمام فایل های موجود را در هنگام تغییر کل فایل بازنویسی نمی کند، فایل اصلاح شده خاص رونویسی شده است که موجب صرفه جویی در زمان و منابع می شود:

npm من gulp-watch -d

بسته را چک کنید

گذشته از همه اینها پلاگین های نصب شده، بسته ما را بررسی کنید. او باید در مورد نوع زیر داشته باشد:

("نام": "شروع"، "نسخه"، "نسخه": "1.0.0"، "توضیحات": "شروع بسته برای جلوی جلوی توسعه"، "نویسنده": "Ivan Ivanov"، "مجوز": "MIT"، "وابستگی ها": ()، "devpenepencencials": ("gulp": "آخرین"، "gulp-autroprefixer": "آخرین"، "gulp-connect": "آخرین"، "gulp-imagemin": "آخرین"، "jshint": "آخرین"، "jshint-skyish": "آخرین"، "gulp-jshint": "آخرین"، "gulp-minify-css": "آخرین"، "gulp-pillumber": "آخرین"، "Gulp-rename": "آخرین"، "Gulp-Rigger": "آخرین"، "Gulp-sourcemaps": "آخرین"، "gulp-stylus": "آخرین"، "gulp-uughify": "آخرین"، "Gulp-Watch": "آخرین"، "gulp.spritesmith": "آخرین"، "Rimraf": "آخرین"))

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

در پوشه پروژه، دایرکتوری Node_Modules نیز باید ظاهر شود که در آن تمام فایل های پلاگین گره ذخیره می شود. تمام پلاگین های مورد نظر نصب شده اند، شما می توانید به پیکربندی GULP بروید.

راه اندازی gulpfile.js

gulpfile.js - این فایل پیکربندی اصلی مدیر وظیفه ما است، در آن است که ما تمام تنظیمات و دستورات را ذخیره خواهیم کرد.

تمام کار GULP به کار می رود ( انگلیسی یک وظیفه). این وظیفه یک تابع مستقل جداگانه به نام است. هر کار ممکن است به طور جداگانه ایجاد شود.

حالت مجانی با استانداردهای مدرن

اول از فایل، حالت سازگاری را تنها با استانداردهای مدرن متصل کنید:

"استفاده از سخت"؛

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

پلاگین را راه اندازی کنید

پلاگین ها توسط طراحی زیر آغاز می شود:

var initplugin \u003d نیاز ("نام پلاگین")؛

مطابق با این طراحی، تمام پلاگین های ما را راه اندازی می کنید:

var gulp \u003d نیاز به ("GULP")، // پلاگین اصلی GULP Stylus \u003d نیاز به ("GULP-Stylus")، // preprocessor prefixer \u003d نیاز ("Gulp-autroprefixer")، // پذیرش CSSMIN \u003d نیاز به (" gulp-minify-css ")، // minification css uGlify \u003d نیاز به (" Gulp-Uglify ")، // minification js jshint \u003d نیاز به (" Gulp-jshint ")، // خطاهای ردیابی در JS Rigger \u003d نیاز به (" GULP -rigger ")، // کار با گنجاندن در HTML و JS Imagemin \u003d نیاز به (" Gulp-Imagemin ")، // به حداقل رساندن تصاویر spritesmith \u003d نیاز (" gulp.spritesmith ")، // conjoin تصاویر در ramraf \u003d نیاز به اسپری ( "Rimraf")، // تمیز کردن sourcemaps \u003d نیاز به ("Gulp-sourcemaps")، // sourcemaps rename \u003d نیاز ("gulp-rename")، // تغییر نام لوله کش \u003d نیاز به فایل ها ("Gulp-pillumber")، / / Fuse برای متوقف کردن GALP Watch \u003d نیاز ("Gulp-Watch")، // گسترش قابلیت های ساعت Connect \u003d نیاز ("Gulp-connect")؛ // LIKELELOAD.

ثابت های مسیرها

برای راحتی، ما بلافاصله تمام راه ها و ماسک ها را تعریف می کنیم:

var path \u003d (ساخت: (/ / / / / / در اینجا ما اشاره می کنیم که در آن آماده شدن پس از فایل های مونتاژ HTML: "ساخت /"، JS: "Build / JS /"، CSS: "Build / CSS /"، IMG: "Build / CSS / تصاویر / "، فونت:" ساخت / فونت / "، htaccess:" build / "، contentimg:" build / img / "، sprites:" src / css / تصاویر / "، spritescss:" src / css / جزئی / ")، SRC: (// / / راه هایی که برای استفاده از منبع HTML:" src / template / *. html "، // syntax src / template / *. HTML می گوید GULP آنچه ما می خواهیم تمام فایل ها را با extension.html JS: "src / js / js / [^ _] *. JS"، // در سبک ها و اسکریپت ها ما فقط فایل های اصلی JShint را نیاز داریم: "SRC / JS / *. JS"، CSS: "SRC / CSS / Stylees.styl" cssvendor: "src / css / فروشنده\u003e *"، // اگر ما می خواهیم فایل های کتابخانه به طور جداگانه فروشگاه Rastenger IMG: "src / css / تصاویر / ** / ***"، // syntax img / ** / 2 * به معنی - تمام فایل های تمام برنامه های افزودنی را از پوشه و از فونت کاتالوگ های Nested: "src / fonts / mounted"، contentimg: "src / img / ** / 2 *"، scrites: "src / css / sprites / *. png "، htaccess:" src / .htaccess ")، سازمان دیده بان: (/ / ما اشاره می کنیم، برای تغییر KA فایل های KIH ما می خواهیم به تماشای HTML: "SRC / TEMPLATE / ** / *. HTML"، JS: "SRC / JS / ** / *. JS"، CSS: "SRC / CSS / ** / 2 **" ، img: "src / css / images / ** / 7/27، contentimg:" src / img / ** / *، فونت: "src / fonts / ** / 2 *"، htaccess: "src / .htaccess "، Sprites:" src / css / sprites / *. png ")، تمیز:" ./build "، // دایرکتوری که می تواند OutputDir پاک شود:" ./build "// دایرکتوری ریشه منبع برای اجرای وزیر)؛

لطفا توجه داشته باشید که ما می توانیم نام ماسک ها را استفاده کنیم:

• * .js - تمام فایل ها با js extension
• [^ _] *. JS - تمام فایل ها با Extension JS، به استثنای کسانی که از پایین تر از زیرزمین شروع می شوند
• *.* - هر فایل با هر فرمت در بلندگو کنونی
• / ** / * .html - تمام فایل ها با extension.html در دایرکتوری فعلی و تمام دایرکتوری های فرعی

وظیفه (وظایف)

حالا که تمام ثابت ها بیان می شوند، می توانید شروع به نوشتن Taskov کنید. تمام وظایف طراحی زیر را دارد:

gulp.task ("taskname"، function () (/ / برخی از توابع))؛

مینی سرور و لیورل

اول از همه، ما عملیات سرور محلی و لیورلالو را پیکربندی خواهیم کرد:

// سرور محلی برای توسعه gulp.task ("اتصال"، تابع () (connect.server ((// configs root server configs: // root دایرکتوری پورت: 9999 سرور، // کدام پورت از Livereload استفاده می کند: درست است // کار را آغاز کنید))؛))؛

به احتمال زیاد شما اغلب باید یک بار در چندین پروژه کار کنید. سرور به شما امکان می دهد به طور همزمان چندین سرور را اجرا کنید، به اندازه کافی برای پروژه های مختلف برای ثبت نام پورت خود.

Bild HTML.

// وظیفه ساخت HTML Gulp.Task ("HTML: BUILD"، تابع (gulp.src (path.src.html) // انتخاب فایل ها در مسیر دلخواه. لوله (Rigger ()) // زنگ از طریق پیچ و خم . لوله (gulp.dest) // آنها را به ساخت پوشه Build .Pipe (Connect.Reload ()) // بارگیری کنید و سرور خود را به روز رسانی کنید))؛

ساخت JS

// بررسی JS بر روی خطاها و پین آنها را به کنسول Gulp.Task ("jshint: build"، function () (بازگشت gulp.src (path.src.jshint) // انتخاب فایل ها در مسیر دلخواه. لوله (jshint )) // اجرا از طریق JShint .Pipe (JShint.Reporter ("JShint-Skyish))؛ // شیک خروجی خطاهای در کنسول))؛ // bilding yavascript gulp.task ("JS: build"، function () (gulp.src (path.src.js) // پیدا کردن فایل اصلی ما (Rigger ()) // زنگ از طریق Rigger .Pipe (Sourcemaps .init ()) // initialize sourceemap .pipe (uGlify ()) // آواز خواندن JS .Pipe (sourcemaps.write ()) // کارت های پیشنهادی. لوله (تغییر نام (پسوند: ".min")) / اضافه کردن suffix.min به file output.pipe (gulp.dest (path.build.js)) // unload فایل آماده در ساخت .pipe (connect.Reload ()) // و راه اندازی مجدد سرور))؛

ساخت Sprite

تمام تصاویر برای ترکیب به اسپری ها به دایرکتوری src / css / sprites اضافه می شود و پس از اجرای از طریق GULP تبدیل به یک تصویر منحصر به فرد است. در Sprites، شما نباید آرم ها و تخته ها را بدون اندازه روشن اضافه کنید.

// bilda sprites gulp.task ("sprites: build"، function () (var spritedata \u003d gulp.src (path.src.sprites) // را انتخاب کنید که در آن تصاویر را به منظور متحد کردن در Sprites (SPRITEESMITH (IMGNAME: " sprite.png "، // نام اسپری تصویر cssname:" sprite.styl "، // نام سبک که در آن شما ذخیره موقعیت های تصویر در Imgpath:" تصاویر / sprite.png "، // wheels way sprite cssformat:" قلم "// فرمت که در آن من روند CSTemplate را پردازش می کنم:" Stylus.template.mustache "، // ماسک فایل CSSVarmap: تابع (sprite.name \u003d" s- "+ sprite.name // نام هر یک از Sprite شامل خواهد شد نام فایل و طراحی "S-" در ابتدای نام))))؛ spitedata.img.pipe (gulp.dest (path.build.sprites))؛ // مسیر، جایی که ما تصویر Spitedata را ذخیره می کنیم. css.pipe (gulp.dest (path .build.spritescss)؛ // مسیری که ما سبک ها را ذخیره می کنیم))؛

برای خروجی اسپری، به اندازه کافی برای استفاده از مخلوط کافی است. به عنوان مثال، برای فایل lorem.png، نمونه از Sprite به نظر می رسد:

Lorem Sprite ($ s-lorem)

در حال حاضر جسم با class.lorem اندازه تصویر و تصویر خود را به عنوان پس زمینه می گیرد.

تصاویر ثابت استاتیک

تصاویر استاتیک تصاویر مورد استفاده در قالب طرح بندی هستند.

// buildim تصاویر استاتیک gulp.task ("تصویر: ساخت"، function () (gulp.src (path.src.img) // تصاویر ما را انتخاب کنید. لوله (Imagemin (/ / آنها را پیشرو بخوانید: درست، // compresspression.jpg Svgoplugins: [(Removeviewbox: false)]، // svg interlaced: true، //svg.gif optimizationlevel: 3 // نسبت فشرده سازی از 0 تا 7)))) .pipe (gulp.dest (مسیر ساخت. img)) // تخلیه در ساخت .pipe (connect.Reload ()) // راه اندازی مجدد سرور))؛

تصاویر پویا Bild

تصاویر پویا تصاویر محتوا هستند که در سایت تغییر می کنند و در سطح قالب فقط به تظاهرات متصل می شوند. به عنوان مثال، این می تواند تصاویر برای اخبار، و غیره باشد

// BuildIm تصاویر پویا Gulp.Task ("Imagescontent: build"، function () (gulp.src (path.src.conentimg) .pipe (imagemin (/ / sings them progressive: true، //spage.jpg svgoplugins: [(removeviewbox: false)]، // svg interlaced: true، //spotion.gif optimizationlevel: 3 // نسبت فشرده سازی از 0 تا 7))))) .pipe (gulp.dest (path.build.conentimg) // تخلیه در ساخت Pipe (connect.Reload ()) // راه اندازی مجدد سرور))؛

Bildim CSS

// ساخت CSS سفارشی Gulp.Task ("Cssown: build"، function (gulp.src (path.src.css) // انتخاب فایل اصلی اصلی ما. لوله (sourcemaps.init ()) // soucemap اولیه لوله (Compress: True، "شامل CSS": True))) // Compile Stylus .Pipe (Prefixer (مرورگر: ["آخرین نسخه 3"، "\u003e 1٪"، "یعنی 8"، "یعنی 7 ")))) // اضافه کردن فروشنده prefixes.pipe (cssmin ()) // surminem.pipe (sourminem.pipe (sourcemaps.write ()) // propyash sourceemap .pipe (تغییر نام (suffix:" .min))) / / اضافه کردن suffix.min به نام فایل خروجی (gulp.dest (path.build.css)) // نوشیدنی در Build .Pipe (connect.Reload ()) // راه اندازی مجدد سرور))؛

کار جداگانه برای سبک های خارجی:

// ساخت Vendon CSS Gulp.Task ("Cssvendor: build"، function () (gulp.src (path.src.csssvendor) // ما فروشنده را دریافت می کنیم (sourcemaps.init ()) // soucemap اولیه. لوله (CSSMIN ()) // surrem.pipe (sourcemaps.write ()) // propyash sourcemap .pipe (gulp.dest (path.build.css)) // تخلیه شده در build.pipe (connect.Reload ()) // راه اندازی مجدد سرور))؛

همچنین کار را برای Bild General CSS اضافه کنید:

// Bildim CSS کل gulp.task ("CSS: Build"، ["Cssown: Build"، // Cssvendor: Build "])؛

در صورتی که شما نیاز به پردازش سبک های خارجی به طور جداگانه از خانه و تخلیه آنها. فایل های جداگانه شما باید خط "Cssvendor: Build" را رعایت کنید

ساخت فونت ها

// bildim gulp.task فونت ("فونت: ساخت"، تابع (gulp.src (path.src.fonts) .pipe (gulp.dest (path.build.fonts)) // تخلیه در ساخت)؛

build.htaccess

// bildim htaccess gulp.task ("htaccess: build"، function (gulp.src (path.src.htaccess) .pipe (gulp.dest (path.build.htaccess)) // تخلیه در ساخت)؛

ساخت مشترک

به منظور اینکه ما هر بخش را به طور جداگانه خریداری کنیم، وظیفه Propyat برای ساخت کلی:

// bildim همه gulp.task ("ساخت"، ["html: build"، "jshint: build"، "js: build"، "sprites: build"، "CSS: ساخت"، "فونت: ساخت"، " htaccess: ساخت، "تصویر: ساخت"، "Imagescontent: build"])؛

تمیز کردن Bilda

گاهی اوقات لازم است که دایرکتوری ساخت را کاملا پاک کنید. در اینجا کار بعدی به نجات خواهد آمد:

// پاک کردن پوشه Bild Gulp.Task ("تمیز"، عملکرد (CB) (Rimraf (Path.clean، CB)؛)؛

تماشا یا ردیابی تغییرات در زمان واقعی

یکی از مهمترین و ویژگی های مفید GULP تابع ساعت است که به شما اجازه می دهد تا در زمان واقعی همه تغییرات را با فایل های تولید شده مشاهده کنید و بسته به این، انجام مراحل خاص:

// سازمان دیده بان Gulp.Task ("سازمان دیده بان"، تابع () (/ / bildim HTML در مورد تغییر ساعت (، تابع (رویداد، CB) (gulp.start ("html: build)؛)؛ // buildim در صورت تغییر ساعت (Function (Event، CB) (Gulp.Start ("Sprites: Build")؛)؛ // نمونه برداری متنی در صورت تغییر ساعت (عملکرد (رویداد، CB) (Gulp. شروع ("Imagescontent: Build")؛)؛ // Bildim CSS در صورت تغییر ساعت (Function (Event، CB) (Gulp.Start ("CSS: Build")؛)؛ // js را بررسی کنید مورد تغییر ساعت (، ["jshint"])؛ // bildim js در صورت تغییر ساعت (، تابع (رویداد، CB) (gulp.start ("JS: build")؛)؛ // تصاویر Bildim Static در صورت تغییر ساعت (تابع ("تصویر: ساخت")؛))؛ // فونت های Bildim اگر شما تغییر ساعت (، تابع (رویداد، CB) (gulp.start ("فونت: ساخت")؛)؛ / / Bildim Htccess در صورت تغییر ساعت (، تابع (رویداد، CB) (Gulp.Start ("HTACCESS: BUILD")؛)؛))؛)

اقدامات پیش فرض

اقدامات پیش فرض - کدام وظایف هنگام ورود به فرمان GULP در کنسول انجام می شود:

// اقدامات پیش فرض gulp.task ("پیش فرض"، ["ساخت"، "watch"، "connect"])؛

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

دستورات خط فرمان

تمام دستورات Galpa برای خط فرمان شامل دو بخش است که به طور مستقیم است تیم GULP. و از طریق شکاف نام وظیفه. در اینجا یک لیست از دستورات قابل اجرا برای پیکربندی ما است:

• gULP - فرمان اصلی، راه اندازی به طور پیش فرض کار
• gULP BUILD - BILDIM ALL
• gULP WATCH - شروع به تماشای
• gULP تمیز - تمیز کردن کاتالوگ ساخت
• gulp Connect - شروع سرور
• gULP HTML: ساخت - HTML BILD
• gULP JSHINT: ساخت - بررسی JS برای اشتباهات
• gULP JS: ساخت - ساخت JS
• gULP Sprites: ساخت - ساخت Sprite
• gULP تصویر: ساخت - تصاویر استاتیک bild
• gulp Imagecontent: ساخت - تصاویر پویا Bild
• gULP CSSOWN: BUILD - CSS سفارشی BILD
• gULP CSSVENDOR: ساخت - CSS خارجی BILD
• gULP CSS: ساخت - CSS CSS معمولی
• فونت GULP: ساخت - فونت های BILD
• gULP HTACCESS: BUILD - BUILD.HTACCESS

در این مرحله، gulpfile.js تکمیل شده است.

بسته شروع را در پروژه کپی کنید

برای شروع، از طریق کنسول در پوشه ای که در آن ما در حال توسعه است، مانند CD توسعه / مثال و کپی همه چیز را از دایرکتوری بسته شروع به پروژه ما CP -A ~ / توسعه / شروع / شروع /. ~ / توسعه / مثال /

این روش کپی راحت تر است، زیرا این دقیقا همه چیز را کپی می کند، از جمله فایل های مخفی .gitignore، و غیره

نتیجه

استفاده كردن این راهنما ما یک بسته شروع را برای استفاده از GULP در پروژه های خود برای توسعه جلو آماده کرده ایم.

همچنین این بسته در Github موجود است

ارسال Scriptum

این مقاله نهایی نیست و بسته به تغییرات و پیشرفت ها به روز می شود.