خلاصه مطالب gulp

چرا از task Runner ها مثل gulp.js و webpack.js میایم و استفاده میکنیم ؟؟

هنگامی که ما میایم و یک پروژه رو توسعه میدهیم وقتی این پروژه هی بزرگ و بزرگ‌تر میشود قبل از این که کد‌های ما به نسخه ی production یا همان محصول نهایی امان اضافه بشود نیاز داریم که یکسری عملیات‌های تکراری رو هی روی کد هامون انجام بدهیم مثل minify کردن کد‌های css و یا کم کردن حجم عکس‌ها حال برای جلوگیری از انجام این گونه کار‌های تکراری و مدیریت در زمان پروژه باید بیایم و از taskRunner‌ها استفاده بکنیم

تعریف taskRunner یک سری ابزار برای مدیریت وظایف هستند که میان و یکسری کار‌های تکراری که ما در داخل پروژه انجام میدهیم رو بر عهده میگیرند و امجام میدهند

پوشه بندی ها

ما در توسعه ی یک محصول دو تا مبحث مهم داریم یکی Production که محصول نهایی ما هستش و در اختیار کاربرامون قرار میگیرد و دومی هم develop هستش که نسخه ی در حال توسعه ام هستش و ما در این مرحله باید بیایم و از taskRunner ها استفاده بکنیم پوشه بندی در این مرحله این شکلی هستش که ما در داخل root پروژه امون یک پوشه با نام src داریم که فایل‌های در حال توسعه و خام امون در این پوشه قرار میگیرد و یک پوشه با نام build که کامپایل شده یا فایل‌های نهایی کدهامون در این مرحله قرار میگیرد که تبدیل شده‌های پوشه src امون هستش و محتوای این پوشه قراره به نسخه ی production اضافه شود

نکته : webpack یک module bundler هستش که برای دسته بندی مجموعه از فایل‌های جاوااسکریپتی استفاده می‌شود و بیشتر برای پروژه‌های بزرگ استفاده میشود و شبیه به gulp هستش ولی بیشتر کاراش باندل کردن هستش

ما برای نصب gulp باید اون رو هم به صورت سراسری در سیستم امون نصب کنیم و همم درد داخل پروژه ای که ازش میخاهیم استفاده بکنیم

نکته : برای استفاده از gulp ما باید در ابتدا node رو نصب کنیم و بهترین نسخه برای هماهنگی با gulp نسخه ی 8 اون هستش

1 - نصب به صورت سراسری در داخل سیستم امون npm install --global gulp-cli

نکته ما با استفاده از دستور mkdir میتوانیم در داخل cmd امان بیایم و یک دایرکتوری بسازیم همچنین ما میتوانیم با استفاده از دستور code . بیایم و در داخل کامنت vscode امون پوشه امون رو باز کنیم

نکته : ما مدیریت پوشه بندی مون باید بهینه‌تر کنیم برای همین باید یک پوشه جداکانه به نام dist درست کنیم و یک بار src که اون دیست فایل‌های پروژه نهایی ما هستش که تحویل کار فرما می‌شود

2- موقعی که ما میخاهیم و بیایم و از gulp استفاده بکنیم باید بیایم و اون رو در قسمت root پروژه مون npm init رو انجام بدهیم که میاد و برای ما یک فایل package.json درست میکند که در داخل آن تمام پکیج هایی که ما با استفاده از آن‌ها میایم و با gulp کار می‌کنیم رو در این جا برامون لیست اش میکند

3- برای نصب gulp هم باید در قسمت root پروژه امون از دستور زیر استفاده بکنیم npm install --save-dev gulp

که بعد از نصب یک پوشه ی node_modules برای ما اضافه میکند

4- حال میایم و در داخل root پروژه امون یک فایل با نام gulpfile.js درست میکنیم و تمام تسک هایی که مینویسیم در داخل آن هستش و در داخل این فایل ما هر پکیجی رو که نصب میکنیم باید در این فایل بیاد و معرفی بشود

استفاده از gulp :

ما هر پروژه ای که میایم و نصب میکنیم باید بیایم و در فایل gulpfile.js استفاده کنیم

دستورات gulp

gulp.task برای مشخص کردن یک وظیفه

gulp.src اشاره به محل قرار گیری فایل هامون

gulp.dest اشاره کردن به پوشه ی dest یعنی خروجی‌های ما در آن قرار دارد مثلا فایل‌های فشرده شده

gulp.watch برای رصد کردن فولدر هایی که دارن هی تغیر میکنند و رصد کننده تغیرات ما هستش

در داخل این فایل باید بیایم و ابتدا پکیج اضافه شده امون رو در داخل آن معرفی کنیم و بعد با استفاده از متد‌های task و pipe فعالیت امون رو انجام بدهیم

فشرده سازی عکس ها

ابتدا نصب npm install --save  -dev  gulp-imagemin 
 const imagemin = require("gulp-imagemin");
   gulp.task("minifyimage",acync function () {
   gulp
    .src("src/assets/img/*")
    .pipe(imagemin())
    .pipe(gulp.dest("dist/assets/img"));
});

نکته : در داخل sass زمانی که فایلی با پیش وند _ شروع شد منظور اون این هستش که این فایل compile نشود که gulp این چشم پوشی رو به صورت پیش فرض انجام میدهد

// minify sass // npm install node-sass gulp-sass --save-dev const sass = require("gulp-sass"); gulp.task("compile-sass", async function () { gulp .src("src/assets/sass/*.scss") .pipe(sass().on("error", sass.logError)) .pipe(gulp.dest("src/assets/css/")); });

// minfy css file //npm install gulp-clean-css --save-dev const cleanCSS = require("gulp-clean-css"); gulp.task("minify-css", async function () { return gulp .src("src/assets/css/*.css") .pipe(cleanCSS({ compatibility: "ie8" })) .pipe(rename("style.min.css")) .pipe(gulp.dest("dist/assets/css")); });

// compile PUG to HTML // npm i gulp-pug --save-dev const pug = require("gulp-pug"); gulp.task("compile-pug", async function () { return gulp.src("src/*.pug").pipe(pug()).pipe(gulp.dest("dist/")); });

// minify js // npm install --save-dev gulp-concat // npm install --save-dev gulp-uglify const uglify = require("gulp-uglify"); const concat = require("gulp-concat"); gulp.task("compress-js", async function () { gulp .src("src/assets/js/*.js") .pipe(concat("app.min.js")) .pipe(uglify()) // .pipe(rename("app.min.js")) .pipe(gulp.dest("dist/assets/js")); });

gulp.task('watch',async function(){ gulp.watch('src/assets/img/*',gulp.series('minifyimage')); gulp.watch('src/assets/js/*.js',gulp.series('compress-js')); gulp.watch('src/assets/sass/*.scss',gulp.series('compile-sass')); gulp.watch('src/assets/css/*.css',gulp.series('minify-css')); gulp.watch('src/*.pug',gulp.series('compile-pug')); });