توضیحات Gulp de به زبان روسی. نصب و استفاده از Gulp

نصب Gulp بسیار ساده است. ابتدا بسته Gulp را به صورت جهانی نصب کنید:

npm نصب -g gulp

سپس آن را در پروژه خود نصب کنید:

npm نصب --save-dev gulp

با استفاده از Gulp

بیایید یک کار Gulp ایجاد کنیم تا یکی از فایل های جاوا اسکریپت خود را کوچک کنیم. یک فایل با نام gulpfile.js ایجاد کنید. وظایف شما را که با دستور gulp اجرا می شوند را مشخص می کند.

دستورات زیر را به فایل gulpfile.js خود اضافه کنید:

Var gulp = نیاز("gulp"), uglify = need("gulp-uglify"); gulp.task("minify"، تابع () ( gulp.src("js/app.js") .pipe(uglify()) .pipe(gulp.dest("build")) ));

gulp-uglify را از طریق npm با اجرا نصب کنید npm نصب --save-dev gulp-uglifyو سپس کار را از طریق gulp minify اجرا کنید. فرض کنید فایلی به نام app.js در پوشه js دارید، یک app.js جدید در پوشه build ایجاد می شود و حاوی نسخه فشرده js/app.js است.

واقعا اینجا چه خبر است؟

ما چند کار را در فایل gulpfile.js خود انجام می دهیم. ابتدا ماژول های gulp و gulp-uglify را بارگذاری می کنیم:

Var gulp = نیاز("gulp"), uglify = need("gulp-uglify");

سپس وظیفه ای به نام minify تعریف می کنیم که هنگام اجرا، تابعی را که به عنوان آرگومان دوم داده شده است فراخوانی می کند:

Gulp.task("minify"، تابع () ( ));

در نهایت، و این سخت ترین بخش است، ما تعریف می کنیم که وظیفه ما باید چه کاری انجام دهد:

Gulp.src("js/app.js") .pipe(ugliify()) .pipe(gulp.dest("build"))

اگر با Thread ها آشنا نیستید و اکثر توسعه دهندگان front-end آشنایی ندارند، کد بالا به شما چیزی نمی گوید.

جریان ها

جریان‌ها به برخی از داده‌ها اجازه می‌دهند از یک سری توابع معمولاً کوچک عبور کنند که داده‌ها را تغییر می‌دهند و سپس آن را به تابع بعدی منتقل می‌کنند.

در مثال بالا، تابع gulp.src() رشته‌ای را می‌گیرد که مربوط به یک فایل یا مجموعه‌ای از فایل‌ها است و جریانی از اشیاء را ایجاد می‌کند که آن فایل‌ها را نشان می‌دهند. سپس آنها را به تابع uglify () منتقل می‌کنند (یا جریان می‌یابند)، که اشیاء فایل را می‌گیرد و اشیای فایل جدید را با منبع کوچک‌سازی شده برمی‌گرداند. این نتیجه سپس به تابع ()gulp.dest می‌رود که فایل‌های تغییر یافته را ذخیره می‌کند.

در اینجا چیزی است که در شکل نمودار اتفاق می افتد:

وقتی فقط یک کار وجود دارد، تابع هیچ کاری انجام نمی دهد. با این حال کد زیر را در نظر بگیرید:

Gulp.task("js"، تابع () ( return gulp.src("js/*.js") .pipe(jshint()) .pipe(jshint.reporter("default")) .pipe(uglify() ) .pipe(concat("app.js")) .pipe(gulp.dest("build")); ));

برای اجرای خود، gulp، gulp-jshint، gulp-uglify و gulp-concat را نصب کنید.

این کار تمام فایل های منطبق با js/*.js (به عبارت دیگر، همه را می گیرد فایل های جاوا اسکریپتاز پوشه js)، JSHint را روی آنها اجرا می کند، گزارشی را خروجی می دهد، هر فایل را کوچک می کند، و سپس آنها را به هم متصل می کند و آنها را در build/app.js ذخیره می کند. به شکل نمودار:

اگر با Grunt آشنا باشید، متوجه خواهید شد که این با نحوه کار Grunt کاملاً متفاوت است. Grunt از نخ استفاده نمی کند. در عوض، فایل‌ها را می‌گیرد، یک کار را در هر فایل اجرا می‌کند و در فایل‌های جدید ذخیره می‌کند و کل فرآیند را برای هر کار تکرار می‌کند. در نتیجه بسیاری از دسترسی های سیستم فایل، Grunt کندتر از Gulp است.

برای درک بهتر جریان‌ها، کتاب راهنمای جریان را بخوانید.

gulp.src()

تابع gulp.src() یک یا چند فایل یا یک آرایه را می گیرد و جریانی را برمی گرداند که می تواند به پلاگین ها ارسال شود.

دو افزونه دیگر واضح‌تر هستند: تابع uglify کد را کوچک می‌کند و تابع concat ("app.js") همه فایل‌ها را در یک برنامه با نام app.js ترکیب می‌کند.

gulp-load-plugin

ماژولی که به نظر من کاملاً مفید است gulp-load-plugins نام دارد که به طور خودکار هر پلاگین Gulp را از فایل package.json بارگیری می کند و آنها را به شی متصل می کند. برنامه اصلی به شرح زیر است:

Var gulpLoadPlugins = require("gulp-load-plugins"), plugins = gulpLoadPlugins();

شما می توانید همه چیز را در یک خط بنویسید ( var plugins = require("gulp-load-plugins")();)، اما من طرفدار زیادی از تک خط الزامی نیستم.

پس از اجرای این کد، شی پلاگین حاوی پلاگین های شما با نام های CamelCase خواهد بود (به عنوان مثال، gulp-ruby-sass به عنوان plugins.rubySass بارگیری می شود). شما می توانید از آنها در حالت عادی استفاده کنید. به عنوان مثال، وظیفه js ما به صورت زیر کوتاه می شود:

Var gulp = require("gulp"), gulpLoadPlugins = require("gulp-load-plugins"), plugins = gulpLoadPlugins(); gulp.task("js"، تابع () ( return gulp.src("js/*.js") .pipe(plugins.jshint()) .pipe(plugins.jshint.reporter("default")) .pipe (plugins.uglify()) .pipe(plugins.concat("app.js")) .pipe(gulp.dest("build")); ));

پیوست فایل package.json است که حاوی چیزی شبیه به موارد زیر است:

( "devDependencies": ( "gulp-concat": "~2.2.0"، "gulp-uglify": "~0.2.1"، "gulp-jshint": "~1.5.1"، "gulp": " ~3.5.6 اینچ))

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

نسخه 0.4.0 پلاگین gulp-load منتشر شده در اوایل ماه مارس، بارگذاری تنبل افزونه را اضافه کرد که عملکرد را بهبود می بخشد. افزونه ها تا زمانی که فراخوانی نشوند بارگذاری نمی شوند، به این معنی که لازم نیست نگران باشید که افزونه های استفاده نشده در package.json بر عملکرد تأثیر می گذارند (اگرچه به هر حال احتمالاً باید حذف شوند). به عبارت دیگر، اگر وظیفه‌ای را اجرا کنید که فقط به دو افزونه نیاز دارد، همه افزونه‌هایی را که سایر وظایف به آن نیاز دارند بارگیری نمی‌کند.

ردیابی فایل

Gulp این قابلیت را دارد که فایل ها را برای تغییرات مشاهده کند و در صورت شناسایی تغییرات، یک کار یا وظایف را اجرا کند. این ویژگی به طرز شگفت انگیزی مفید است (احتمالاً یکی از مفیدترین ها در Gulp برای من). شما می توانید فایل Less را ذخیره کنید و Gulp آن را به CSS تبدیل کرده و بدون هیچ اقدامی مرورگر را به روز می کند.

برای تماشای یک فایل یا فایل‌ها، از تابع gulp.watch() استفاده کنید که الگوی فایل‌ها، یا آرایه‌ای از آنها (مانند gulp.src())، یا آرایه‌ای از وظایف را برای اجرای آن‌ها یا اجرای یک فراخوانی می‌گیرد. تابع.

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

Gulp.task("watch", function () ( gulp.watch("templates/*.tmpl.html"، ["build"]); ));

حالا با تغییر فایل قالب، build task اجرا می شود که HTML را تولید می کند.

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

Gulp.watch("templates/*.tmpl.html", تابع (رویداد) ( console.log("نوع رویداد: " + event.type); // اضافه، تغییر یا حذف شد console.log("مسیر رویداد: " + event.path); // مسیر فایل ));

یکی دیگر ویژگی متمایز gulp.watch() این است که یک watcher را برمی گرداند. از آن برای گوش دادن به رویدادهای اضافی یا افزودن فایل هایی برای تماشا استفاده کنید. به عنوان مثال، برای اجرای یک لیست از وظایف و فراخوانی یک تابع به طور همزمان، می توانید یک شنونده به رویداد تغییر در هنگام بازگشت تماشاگر اضافه کنید:

Var watcher = gulp.watch("templates/*.tmpl.html", ["build"]); watcher.on("تغییر"، تابع (رویداد) (consol.log("نوع رویداد: " + event.type); // اضافه شد، تغییر داد، یا حذف شد console.log ("مسیر رویداد: " + event.path) ؛ // مسیر فایل ))؛

علاوه بر رویداد تغییر، می‌توانید به تعدادی رویداد دیگر گوش دهید:

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

شی تماشاگر همچنین حاوی متدهایی است که می توان آنها را نام برد:

watcher.end()
تماشاگر را متوقف می کند (هیچ کار یا تماس دیگری فراخوانی نخواهد شد).
watcher.files()
فهرستی از فایل های مشاهده شده توسط تماشاگر را برمی گرداند.
watcher.add(glob)
فایل هایی را به تماشاگر اضافه می کند که با الگوی glob مشخص شده مطابقت دارند (همچنین یک تابع تماس اختیاری را به عنوان آرگومان دوم می پذیرد).
watcher.remove (مسیر فایل)
فایل مشخص شده را از تماشاگر حذف می کند.

سلام. اگر به هر طریقی با JS در ارتباط هستید، احتمالاً نام برنامه ای مانند gulp را شنیده اید. و شاید حتی استفاده شود. با توجه به تجربه خودم، می توانم بگویم که "دریافتن" نحوه کار با او می تواند دشوار باشد، اگرچه کلید درک در ظاهر نهفته است. لذا این مطالب را منتشر می کنم به امید اینکه مفید واقع شود.

همچنین بر اساس این مطالب ویدیویی گرفته شده است که می توانید انتخاب کنید به چه شکلی مصرف کنید.

اگر gulp را با سایر سیستم‌های ساخت محبوب مقایسه کنید، مانند مقایسه یک کوادکوپتر تمام‌شده در نوع «خرید و پرواز» و یک کیت برای خود مونتاژپهپاد بله، شما فقط روز بعد پرواز خواهید کرد، اما انعطاف و کنترل بیشتری در دستان خود دارید، به خصوص اگر کار غیر استانداردی داشته باشید.

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

از راه دور برویم در اکوسیستم nodejs چیزی به نام استریم ها یا استریم وجود دارد. به دلیل پیچیدگی ترجمه، نخ ها را نخ ها یا رشته های یک برنامه چند رشته ای نیز می نامند. در مورد ما، یک جریان یک شی است که داده‌های جریانی را نشان می‌دهد و مفهومی کاملاً متفاوت است.

بنابراین این جریان ها ارائه می دهند رابط کاربر پسندبرای کار ناهمزمان با داده ها کل فرآیند خواندن/نوشتن توسط موتور گره مدیریت می‌شود و ما فقط زمانی که یک داده جدید ظاهر می‌شود، زمانی که خطایی رخ می‌دهد، زمانی که جریان به پایان می‌رسد و غیره، تماس‌های مربوطه را داریم. به این ترتیب، با حداقل تلاش برنامه نویس، بازده ورودی/خروجی به دست می آید.

Const fs = require("fs"); const input = fs.createReadStream("myfile"); input.on("داده"، (تکه) => ( console.log(chunk); )); input.on("پایان"، () => (consol.log("فایل خوانده شد"); ));
جریان‌ها در nodej می‌توانند تقریباً هر چیزی باشند، از فایل‌ها یا رشته‌ها گرفته تا سوکت‌ها. به عنوان مثال، در چارچوب معروف Express، درخواست HTTPو پاسخ چیزی جز جریان نیست. جریان ها می توانند فقط خواندنی، فقط نوشتنی یا هر دو باشند.

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

این به شما این امکان را می‌دهد که جریان داده مورد نظر (دوباره پیچیدگی ترجمه را تعیین کنید. در اینجا منظور ما جریان یا جریان است) بدون اینکه منتظر بمانید تا داده‌ها در دسترس قرار گیرند.

به عنوان مثال، اینگونه می توانیم تعیین کنیم که در نتیجه چه چیزی می خواهیم ارائه دهیم، و خود موتور قبلاً درگیر "چگونه" دادن است.

Const fs = require("fs"); const express = require("express"); var app = express(); app.get("/", تابع (req، res) ( fs.createReadStream("myfile") .pipe(res); )); app.listen(3000);
توجه داشته باشید که کنترل کننده درخواست قبل از اینکه فایل حتی باز شود کامل می شود - موتور گره از بقیه مراقبت می کند.

Gulp بر اساس یک رویکرد مشابه ساخته شده است. این مزیت است، اما در عین حال مضرات آن است. حداقل یک اشکال را می توان به دلیل سردرگمی حاصل نام برد، زیرا gulp از جریان های مشابه، اما ناسازگار دیگر استفاده می کند. Gulp از نزدیک با سیستم فایلبه همین دلیل است که از جریان‌هایی استفاده می‌کند که نه آنقدر که جریانی از داده‌ها را نشان می‌دهند فایل های مجازی، هر کدام محتوای خاص خود را دارند.

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

Const gulp = require("gulp"); gulp.task("پیش فرض"، تابع() ( gulp.src("./*.js") .on("داده"، تابع(فایل) (consol.log("بازخوانی داده"); console.log( file.inspect())؛ /* خروجی می‌دهد: * پاسخ داده‌ها * > * پاسخ تماس داده ها * > */ )) .pipe(gulp.dest("dist/")); ))؛
محتوا را می توان در دو قالب ارائه کرد: به عنوان یک بافر از قبل خوانده شده، یا به عنوان یک جریان گره بومی. هر مرحله از لوله Galpov چنین فایل هایی را به عنوان ورودی می گیرد، نوعی تغییر شکل می دهد و آن را به خروجی زنجیره بعدی منتقل می کند. آخرین زنجیره معمولا فقط آنها را روی دیسک ذخیره می کند.

Pipe(gulp.dest("dist/"));
درک اینکه رشته‌ها در gulp متفاوت هستند، منجر به روشنگری و درک می‌شود، زیرا بیشتر مشکلات و اشکالات را توضیح می‌دهد.

در نظر گرفتن مثال واقعی. شما می خواهید از مرورگر برای به هم پیوستن فایل های JS خود استفاده کنید. شما بروید و افزونه gulp-browserify را پیدا کنید. اما شما یک پست اسکریپت می بینید که می گوید افزونه منسوخ شده است، یعنی. منسوخ.

به عنوان یک برنامه نویس تحصیلکرده، این گزینه را رد می کنید و به دنبال راه حلی می گردید که قدیمی نیست. دستور العمل های رسمی gulp را پیدا کنید و ببینید که browserify مستقیماً با gulp کار می کند. خوب، به طور مستقیم، از طریق یک لایه میانی، که فقط جریان گره بومی را به یک جریان وینیلی که gulp درک می کند، ترجمه می کند. بدون آن، هیچ چیز کار نمی کند، زیرا این موضوعات متفاوت هستند.

اگر می خواهید تغییر شکل خود را بنویسید، می توانید از این الگو استفاده کنید.
همانطور که می بینید، همه چیز در اینجا ساده است: کنترل کننده ما برای هر فایل فراخوانی می شود که تغییرات را انجام می دهد. ما می توانیم هر کاری که بخواهیم انجام دهیم: محتویات فایل را تغییر دهیم، نام فایل را تغییر دهیم، فایل را حذف کنیم یا چند فایل جدید دیگر را به جریان اضافه کنیم.

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

سلام! در این مقاله، پروژه خود را ایجاد می کنیم، فایل مانیفست را مقداردهی اولیه می کنیم و نصب می کنیم قورت دادنبه صورت محلی

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

بنابراین، در آخرین مقاله ای که تنظیم کردیم قورت دادندر سطح جهانی، اکنون باید آن را به صورت محلی نصب کنیم. اول از همه، ما مقداردهی اولیه را انجام خواهیم داد. دستور زیر را در ترمینال بنویسید:

cd path_to_your_project (cd "user/projects/firstProject")
npm init

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

اگر همه کارها را به درستی انجام داده اید، یک فایل باید در پوشه پروژه شما ظاهر شود package.json. اگر آن را باز کنید، می بینید که تمام اطلاعاتی که در هنگام مقداردهی اولیه وارد کرده اید (یا وارد نکرده اید) در آنجا ذخیره می شود. علاوه بر این، فایل اطلاعات مربوط به بسته های استفاده شده را ذخیره می کند و این دقیقا همان چیزی است که ما به آن نیاز داریم. اگر مدام از کتابخانه استفاده می کنید جی کوئری، سپس می توانید آن را در این فایل بنویسید و هنگام شروع یک پروژه جدید به طور خودکار دانلود می شود.

حالا بیایید نصب کنیم قورت دادنبه صورت محلی به پوشه ما.

npm من می خورم --save-dev

پرچم --save-devبرای بسته بندی مورد نیاز است قورت دادنو نسخه آن به طور خودکار در فایل نوشته می شود package.json. اگر این فایل را پس از نصب موفقیت آمیز بسته باز کنید، می بینید که در آنجا موارد زیر ظاهر می شود:

"devDependencies" :(
"gulp": "^3.9.1"
}

فکر کنم واضح باشه که اسم پکیج و ورژنش اینجا نوشته شده. فلش رو به بالا نشان می دهد که این بسته قابل ارتقا است. یک پوشه هم داریم node_modulesجایی که اکنون ذخیره می شود قورت دادنو تمام وابستگی های آن اینجاست که ماژول های جدید نصب خواهند شد.

بنابراین، این همه برای امروز است. در نظر گرفته ایم نحوه نصب gulp به صورت محلیبه پوشه پروژه و اینکه چرا به مانیفست نیاز دارید package.json.

برای سرعت بخشیدن به فرآیند توسعه front-end، برخی از کارها را با استفاده از شیر آب Gulp خودکار می کنیم.
برای این کار به مدیر بسته NPM نیاز داریم. اما برای نصب NPM ابتدا باید Node.js را نصب کنید.

مرحله 1 Node را نصب کنید
ما به سایت رسمی https://nodejs.org می رویم و نسخه پیشنهادی را دانلود می کنیم.

نصب کننده را با حقوق مدیر اجرا کنید.
پس از نصب، 2 آیکون ظاهر می شود: Node.js و Node.js coomand prompt. آنها برای ما مفید نخواهند بود، زیرا ما از Node.js استفاده نمی کنیم و گزینه های راحت تری برای راه اندازی کنسول وجود دارد:
1. از Command Console TotalCommander (Commands - Open command console) استفاده کنید.
2. Shift را نگه دارید و کلیک راست کنید تا باز شود منوی زمینه. آیتم "Open command window" را نمایش می دهد.
بهتر است خط فرمان را از دایرکتوری پروژه مورد نیاز خود راه اندازی کنید، کنسول بلافاصله مسیر دایرکتوری مورد نظر را نمایش می دهد، این کار باعث می شود که نیازی به وارد کردن مسیر به صورت دستی نباشد.

برای بررسی نسخه‌های node و npm، تایپ کنید
node -v را فشار دهید و Enter را فشار دهید
سپس npm -v

نسخه‌های NPM معمولاً بیشتر از نسخه‌های نود به‌روزرسانی می‌شوند تا آخرین نسخه را نصب کنند:
npm نصب کنید [ایمیل محافظت شده]-g

دستورات npm که نیاز داریم :
لیست npm- لیست همه بسته های نصب شده
npm -g ls --depth=0- لیست بسته های نصب شده در سطح جهانی
npm منتشر شدبررسی کنید که آیا بسته ها قدیمی هستند یا خیر
npm به روز رسانی gulp- به روز رسانی نسخه های افزونه
npm init- ایجاد package.json
npm install package_name- بسته را نصب کنید (package_name - نام بسته مورد نیاز)
npm install package_name --save-dev- بسته را نصب کنید و یک ورودی در مورد آن در package.json در قسمت devDependencies ایجاد کنید
npm حذف نصب کنید نام بسته- حذف بسته
npm نصب کنید- تمام بسته های لیست شده در package.json را نصب کنید
قبل از ورود به تولید npm shrinkwrap- نسخه های پکیج را اصلاح کنید، حالا npm install آنها را نصب می کند و مطمئن خواهید بود که همه چیز همانطور که باید کار می کند

اختصارات
-v: --نسخه
-g: --جهانی
-S: --ذخیره
-D: --save-dev
-y: --بله
-n: --بله نادرست است

مرحله 2 نصب gulp
First gulp باید در سطح جهانی نصب شود.

کنسول فرمان را راه اندازی می کنیم.
گاهی اوقات روی برخی منابع مثلاً یک علامت دلار جلوی دستور وجود دارد
$ npm نصب --global gulp-cli

علامت دلار را کپی نکنید، فقط خود دستور را پیست کنید
npm نصب --global gulp-cli

سریع:برای چسباندن متن کپی شده در خط فرمان، خط فرمان را باز کنید، ALT + SPACE -> مقادیر پیش فرض را فشار دهید، کادر انتخاب با ماوس را علامت بزنید. اکنون می توانید متن را با ماوس انتخاب کنید، کپی کنید، در com. روی خط راست کلیک کنید - متن به طور خودکار درج می شود.

مرحله 3. کار با gulp در یک پروژه خاص

3.1 ابتدا اجازه دهید یک بسته وابستگی package.json ایجاد کنیم
فایل package.json حاوی اطلاعاتی است که در ترمینال وارد خواهیم کرد و لیستی از تمام بسته هایی که در پروژه استفاده می کنیم.

هنگام نصب یک بسته با کلید --save-dev، بسته به طور خودکار به package.json اضافه می شود. برای اینکه در هر پروژه جدید همه بسته ها را به صورت دستی نصب نکنیم، از package.json آماده با ماژول ها و وابستگی های مورد نیاز خود استفاده می کنیم و آن را در ریشه پروژه خود قرار می دهیم.

package.json با استفاده از دستور npm init تولید می‌شود که چند سوال را برای ایجاد فایل در کنسول چاپ می‌کند.
آیتم نام به طور پیش فرض نام دایرکتوری پروژه شما را نمایش می دهد.

سریع:
با استفاده از گزینه --yes می توانید این فایل را سریعتر و راحت تر ایجاد کنید (به طور خودکار به همه سؤالات بله پاسخ دهید):
npm init -- بله

خوب است بدانید:
می‌توانید مقادیر پیش‌فرضی را تنظیم کنید که هر بار که npm init را اجرا می‌کنید، استفاده می‌شوند، که باعث صرفه‌جویی در وقت شما می‌شود. پس از نصب، آنها در فایل های .npmrc ذخیره می شوند.
مثلا:
تنظیم npm init.author.name "Valentina Vladova"
تنظیم npm init.author.email" [ایمیل محافظت شده]"
تنظیم npm init.author.url "http://simpalmarket.com/"
npm تنظیم init-license MIT
npm مجموعه init-version 0.0.0
سپس npm init را اجرا کنید، تمام مقادیر مشخص شده به متغیرهای مربوطه کشیده می شوند.

وقتی npm init درخواست یک مخزن git کرد، به طور خلاصه user/repo بنویسید - npm به اندازه کافی هوشمند است که خط را در https://github.com/user/repo گسترش دهد. npm همچنین مخزن، اشکالات و فیلدهای صفحه اصلی را با فرمت صحیح ایجاد می کند.

بنابراین، به پوشه ریشه پروژه بروید، کنسول فرمان را فراخوانی کنید و تایپ کنید
npm init -- بله

یک فایل package.json در ریشه پروژه با چیزی شبیه به این ظاهر می شود

3.2 gulp را به صورت محلی نصب کنید
در پوشه پروژه در کنسول وارد کنید:
npm نصب --save-dev gulp

یا به اختصار
npm من می خورم --save-dev

لیست هشدار - نادیده گرفته خواهد شد.

برای بررسی نسخه، از دستور استفاده کنید
gulp --نسخه

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

یک ورودی به فایل package.json اضافه می شود
"devDependencies" :(
"gulp": "^3.9.1"
}

اکنون می توانید پلاگین های مختلفی را برای gulp نصب کنید.
http://gulpjs.com/plugins/
در قسمت جستجو، نام افزونه مورد نظر خود را وارد کنید.

پلاگین ها را می توان یکی یکی نصب کرد، به عنوان مثال:
npm نصب --save-dev gulp-plumber
و همچنین لیستی که با یک فاصله از هم جدا شده است، به عنوان مثال:
npm نصب gulp-sass gulp-plumber gulp-autoprefixer gulp-minify-css --save-dev
پلاگین ها برای نصب و پلاگین ها برای اسمبلی بهتر است با دستورات جداگانه نصب شوند

npm init

شما نیاز خواهید داشت:

نام پروژه را مشخص کنید
نسخه پروژه
شرح پروژه
نقطه ورود
تیم
مخزن Git
کلید واژه ها
نام نویسنده
مجوز

npm i –g قورت دادن

نام وظیفه

تست بلع

وظیفه دارد کار می کند.

قلپ سرو

npm من gulp-sass --save-dev

کامپایل sass به css
اضافه کردن پیشوندها
ذخیره یک فایل در src/css

ایجاد یک کار در قلپ

خروجی

https://gulpjs.com/plugins/

ترمینال را باز کنید و به پوشه پروژه بروید. اولین کاری که باید انجام دهیم این است که npm را برای انجام این کار مقداردهی اولیه کنیم، دستور را اجرا کنید:

npm init

شما نیاز خواهید داشت:

نام پروژه را مشخص کنید
نسخه پروژه
شرح پروژه
نقطه ورود
تیم
مخزن Git
کلید واژه ها
نام نویسنده
مجوز

همه چیز را می توان به طور پیش فرض رها کرد (اگر نمی خواهید پروژه را در آن آپلود کنید دسترسی عمومی)

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

خوب. NPM راه اندازی شد. اکنون فایل packages.json در ریشه ظاهر شده است - فایل پیکربندی مدیر بسته.

حالا می توانیم gulp را نصب کنیم. ابتدا باید آن را به صورت سراسری و سپس برای پروژه نصب کنید. برای نصب جهانی، دستور زیر را اجرا کنید:

npm i –g قورت دادن

حالا بیایید gulp را برای پروژه نصب کنیم:

npm نصب --save-dev gulp

تمام قلپ برای پروژه نصب شده است.

بیایید بررسی کنیم. بیایید یک فایل gulpfile.js ایجاد کنیم و یک کار آزمایشی در آن ایجاد کنیم که "I'm working" را در کنسول نمایش می دهد.

var gulp = require("gulp"); gulp.task("test"، function() ( console.log("I'm working"); ));

اول، ما شامل gulp می‌شویم، و دوم، تابع وظیفه gulp را فراخوانی می‌کنیم که دو پارامتر دارد:

نام وظیفه
تابع ناشناسکه وظیفه ما را شرح می دهد

حالا در کنسول دستور زیر را اجرا کنید

تست بلع

وظیفه دارد کار می کند.

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

Browsersync، بسته ای که به شما امکان می دهد هنگام تغییر فایل ها، صفحه را به طور خودکار به روز کنید

برای نصب در کنسول، دستور زیر را اجرا کنید:

npm من مرورگر-همگام سازی --save-dev

حالا بیایید کاری ایجاد کنیم که همگام سازی مرورگر را اجرا کند و تغییرات فایل را مشاهده کند.

Gulp.task("serve", ["sass"], function() ( browserSync.init(( سرور: "src/" )); gulp.watch("src/css/*.css")on("change "، browserSync.reload); gulp.watch("src/*.html").on("تغییر"، browserSync.reload); ));

وظیفه سرویس نامیده می شود. و اگر فایل‌های css (واقع در پوشه src/css) و فایل‌های html (واقع در پوشه src) تغییر کرده باشند، مرورگر همگام‌سازی صفحه مرورگر را به‌طور خودکار به‌روزرسانی می‌کند.

برای شروع این کار، دستور را اجرا کنید

قلپ سرو

من از sass برای چیدمان استفاده می کنم. بنابراین برای کامپایل از sass به css از بسته gulp-sass استفاده می کنم.

نصب و پیکربندی gulp-sass

برای نصب gulp-sass در کنسول، دستور زیر را اجرا کنید:

npm من gulp-sass --save-dev

حالا بیایید یک کار sass ایجاد کنیم که sass را به css کامپایل می کند. و وظیفه سرویس را طوری تغییر دهید که همگام سازی مرورگر ما به جای گوش دادن فایل cssساس

var gulp = require("gulp"); var browserSync = require("browser-sync").create(); var sass = نیاز ("gulp-sass"); gulp.task("serve", ["sass"], function() ( browserSync.init(( سرور: "src/" )); gulp.watch("src/sass/*.sass"، ["sass" ])؛ gulp.watch("src/*.html").on("تغییر"، browserSync.reload); )); gulp.task("sass", function() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("خطا"، sass.logError)) .pipe(gulp. dest("src/css")) .pipe(browserSync.stream()); ));

اکنون وقتی وظیفه سرویس را اجرا می کنید، وظیفه sass اجرا می شود.

نصب و پیکربندی gulp-autoprefixer

برای نصب gulp-autoprefixer دستور زیر را اجرا کنید:

npm من gulp-autoprefixer --save-dev

و یک پیشوند به کار sass اضافه کنید.

var gulp = require("gulp"); var browserSync = require("browser-sync").create(); var sass = نیاز ("gulp-sass"); var autoprefixer = require("gulp-autoprefixer"); gulp.task("serve", ["sass"], function() ( browserSync.init(( سرور: "src/" )); gulp.watch("src/sass/*.sass"، ["sass" ])؛ gulp.watch("src/*.html").on("تغییر"، browserSync.reload); )); gulp.task("sass", function() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("خطا"، sass.logError)) .pipe(autoprefixer( ( مرورگرها: ["2 نسخه آخر"]، cascade: false ))) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream()); ));

حال، هنگام اجرای task sass، c دارای:

کامپایل sass به css
اضافه کردن پیشوندها
ذخیره یک فایل در src/css

بسته زیر تمام فایل های css را در یک فایل ترکیب می کند.

نصب و پیکربندی contactCss

برای نصب contactCss از دستور زیر استفاده کنید:

npm من gulp-concat-css --save-dev

و اجرای این بسته را به task sass اضافه کنید. (ما تمام فایل های css را در style.css ترکیب می کنیم)

var gulp = require("gulp"); var browserSync = require("browser-sync").create(); var sass = نیاز ("gulp-sass"); var autoprefixer = require("gulp-autoprefixer"); var concatCss = require("gulp-concat-css"); gulp.task("serve", ["sass"], function() ( browserSync.init(( سرور: "src/" )); gulp.watch("src/sass/*.sass"، ["sass" ])؛ gulp.watch("src/*.html").on("تغییر"، browserSync.reload); )); gulp.task("sass", function() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("خطا"، sass.logError)) .pipe(autoprefixer( ( مرورگرها: ["2 نسخه آخر"]، آبشار: نادرست))) .pipe(concatCss("style.css")) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream( ))))))

خوب. حالا بیایید بسته ای اضافه کنیم که نام فایل ها را تغییر می دهد. (به آن نیاز داریم، کدی که فایل های css و js را به حداقل می رسانیم)

نصب و پیکربندی gulp-rename

برای نصب gulp-rename دستور زیر را اجرا کنید:

npm من gulp-rename --save-dev

در حال حاضر، ما این بسته را به هیچ کار اضافه نمی کنیم.

نصب و پیکربندی بسته ای برای کوچک کردن فایل های CSS - clean-css

برای نصب clean-css دستور زیر را اجرا کنید:

npm من gulp-clean-css --save-dev

حالا بیایید یک کار mincss ایجاد کنیم که پسوند ".min" را به نام فایل اضافه می کند، فایل css را کوچک می کند و آن را در app/css ذخیره می کند.

var gulp = require("gulp"); var browserSync = require("browser-sync").create(); var sass = نیاز ("gulp-sass"); var autoprefixer = require("gulp-autoprefixer"); var concatCss = require("gulp-concat-css"); var cleanCSS = require("gulp-clean-css"); var rename = require("gulp-rename"); gulp.task("serve", ["sass"], function() ( browserSync.init(( سرور: "src/" )); gulp.watch("src/sass/*.sass"، ["sass" ])؛ gulp.watch("src/*.html").on("تغییر"، browserSync.reload); )); gulp.task("sass", function() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("خطا"، sass.logError)) .pipe(autoprefixer( ( مرورگرها: ["2 نسخه آخر"]، آبشار: نادرست))) .pipe(concatCss("style.css")) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream( )))))) gulp.task("mincss", function() ( return gulp.src("src/css/*.css") .pipe(rename((پسوند: ".min"))) .pipe(cleanCSS()) . pipe(gulp.dest("app/css")); ))

عالی است، اجازه دهید بسته gulp را نصب کنیم، که فایل های js را کوچک می کند.

نصب و پیکربندی بسته gulp برای کوچک کردن فایل های js --gulp-uglify

برای نصب gulp-uglify دستور زیر را اجرا کنید:

npm من gulp-uglify --save-dev

حالا بیایید کاری ایجاد کنیم که پسوند ".min" را به فایل اضافه کند، فایل js را کوچک کند و در app/js ذخیره کند.

var gulp = require("gulp"); var browserSync = require("browser-sync").create(); var sass = نیاز ("gulp-sass"); var autoprefixer = require("gulp-autoprefixer"); var concatCss = require("gulp-concat-css"); var cleanCSS = require("gulp-clean-css"); var rename = require("gulp-rename"); var uglify = نیازمند ("gulp-uglify"); gulp.task("serve", ["sass"], function() ( browserSync.init(( سرور: "src/" )); gulp.watch("src/sass/*.sass"، ["sass" ])؛ gulp.watch("src/*.html").on("تغییر"، browserSync.reload); )); gulp.task("sass", function() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("خطا"، sass.logError)) .pipe(autoprefixer( ( مرورگرها: ["2 نسخه آخر"]، آبشار: نادرست))) .pipe(concatCss("style.css")) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream( )))))) gulp.task("mincss", function() ( return gulp.src("src/css/*.css") .pipe(rename((پسوند: ".min"))) .pipe(cleanCSS()) . pipe(gulp.dest("app/css")); )) gulp.task("minjs", function() ( return gulp.src("src/js/*.js") .pipe(تغییر نام((پسوند : ".min"))) .pipe(ugliify()) .pipe(gulp.dest("app/js")); ))

ما وظایف اصلی را ایجاد کرده ایم. اما دو مورد آخر باید هنگام تولید پروژه انجام شود. و باید با هم انجام شوند. بیایید یک وظیفه ایجاد کنیم که وظیفه mincss و سپس minjs را اجرا کند

ایجاد یک کار در قلپ

بیایید یک وظیفه min ایجاد کنیم که وظایف mincss و minjs را اجرا کند

var gulp = require("gulp"); var browserSync = require("browser-sync").create(); var sass = نیاز ("gulp-sass"); var autoprefixer = require("gulp-autoprefixer"); var concatCss = require("gulp-concat-css"); var cleanCSS = require("gulp-clean-css"); var rename = require("gulp-rename"); var uglify = نیازمند ("gulp-uglify"); gulp.task("serve", ["sass"], function() ( browserSync.init(( سرور: "src/" )); gulp.watch("src/sass/*.sass"، ["sass" ])؛ gulp.watch("src/*.html").on("تغییر"، browserSync.reload); )); gulp.task("sass", function() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("خطا"، sass.logError)) .pipe(autoprefixer( ( مرورگرها: ["2 نسخه آخر"]، آبشار: نادرست))) .pipe(concatCss("style.css")) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream( )))))) gulp.task("mincss", function() ( return gulp.src("src/css/*.css") .pipe(rename((پسوند: ".min"))) .pipe(cleanCSS()) . pipe(gulp.dest("app/css")); )) gulp.task("minjs", function() ( return gulp.src("src/js/*.js") .pipe(تغییر نام((پسوند : ".min"))) .pipe(ugliify()) .pipe(gulp.dest("app/js")); )) gulp.task("min"،["mincss"، "minjs"]) ;

همه چيز. بیایید یک کار پیش فرض را نیز تعیین کنیم.

تنظیم وظیفه پیش‌فرض gulp

gulp.task("پیش فرض"، ["خدمت"]);

خروجی

ما در نظر گرفته ایم که gulp برای چیست، چگونه آن را نصب کنیم. نصب شده است بسته های اضافیکه برای چیدمان و تنظیم وظایف ضروری هستند.

می توانید بسته های لازم را خودتان در https://gulpjs.com/plugins/ پیدا کنید و آنها را نصب کنید. و سپس وظایفی را برای بهینه سازی فرآیند توسعه ایجاد کنید.