خلاصه مطالب gulp

Question

چرا از 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 این چشم پوشی رو به صورت پیش فرض انجام میدهد

طراحی وب

emad ta

12 آذر 99

Answer 1

حذف شده

نکته : ما برای کامپایل کردن ها sass میتوانیم دو تا کار انجام بدهیم یک بیایم و در داخل خود پوشه ی css در داخل src اون هارو کامپایل کنیم و این جارو ادرس به فایل های html امون بدهیم و یا راه حل دوم این هستش که بیایم و ادرس رو در داخل پروژه نهایی یا همون dist امون بهش بدهیم تا از اونجا وقتی کامپایل شد بیاد و بخوند

کامپایل کردن فایل های sass به css

// 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/"));
});

برای کم کردن حجم کد های 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"));
});

نکته : برای تغیر نام دادن از کامنت rename استفاده میکینم که خود این یک پکیج هستش

// npm i gulp-rename --save-dev

const rename = require("gulp-rename"); 
.pipe(rename('style.min.css'))  در داخل کدهامون میایم و استفاده میکنیم

کامپایل کردن فایل های pug به html

// 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"));
});

برای استفاده از concat لازم هستش که فقط برای js ها از اون استفاده بکنیم

برای نوشتن یک task به صورت پیش فرض به صورت زیر باید بیایم و عمل کنیم و تک تک task هایی که نیاز داریم تا به صورت پیش فرض بیان و اعمال بشوند رو ما نیاز داریم تا به صورت یک آرایه بهشون بدهیم

gulp.task('default',gulp.parallel('msg','copyhtml','minifyimage','compress-js','compile-sass','minify-css','compile-pug'));

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

نوشتن task به نام watch که یک چیزی مثل همین تسک پیش فرض بالایی هستش ولی دیگه قطع نمیشه و دائمی میاد و رصد میکند و به صورت اتوماتیک هستش

 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'));
         
         });

نکته : بهتر هستش که ما بیایم و کد های مربوط به watch رو در بالای default قرار دهیم همچنین در داخل پروژه هنگامی که کلن پوشه dist نداریم کافی است که در ابتدا از پیش فرض استفاده کنیم تا watch هم برای اولین بار فعال شود

توسط

emad ta

12 آذر 99

خلاصه مطالب gulp

سوالات مرتبط