اندازه‌ی قلم متن
تخمین مدت زمان مطالعه‌ی مطلب:
سه دقیقه
در مقالات قبلی به طور کامل با گالپ آشنا شدیم و گفتیم که می‌تواند ما را در بهینه سازی ورک فلویمان کمک کند. در این قسمت یاد خواهیم گرفت که چگونه تجربه‌ی کاربری بهتری را از سرعت بارگذاری سایتمان ایجاد کنیم.
افزایش کارآیی Performance وب با گالپ
برای اینکه بفهمیم چه کارهایی می‌تواند سایت یا اپلیکیشن ما را کاراتر کند، از Developer tools با زدن Ctrl+Shifi+I درون گوگل کروم، کار خود را شروع می‌کنیم. به برگه‌ی Audits می‌رویم و دکمه‌ی Run را با تنظیمات پیش فرض می‌زنیم. نتایج آن بعد از اندکی صبر، برای من به صورت شکل زیر است:
ما قصد داریم بدانیم گالپ چه ابزاهایی را برای راه حل‌های داده شده توسط مرورگر دارد؟
۱− کنار هم قرار دادن و فشرده کردن فایل‌های جاوا اسکریپت
پلاگین‌های گالپ برای اینکار، gulp-concat و gulp-uglify هستند. آنها را در مسیر ریشه‌ی پروژه نصب می‌کنیم.
npm install --save-dev gulp-uglify gulp-concat
بعد از نصب، فایل gulpfile.js را به صورت زیر ویرایش و تسک js را به آن اضافه می‌کنیم.
// first load all required js files
// concat them in to script.min.js
// and minify it.
gulp.task('js', function() {
return gulp.src([
config.bowerDir + '/jquery/dist/jquery.min.js', // این فایل وابستگی فایل‌های زیر است
config.bowerDir + '/materialize/dist/js/materialize.min.js',
'./resources/js/app.js'
])
.pipe(concat('script.min.js'))
.pipe(uglify())
.pipe(size())
.pipe(gulp.dest('./public/js'));
}); 
فشرده کردن جاوا اسکریپت، حجم فایل‌ها را ۳۰ تا ۹۰ درصد کاهش می‌دهد.
۲− حذف سکلتور‌های بدون استفاده css
همانگونه که در عکس اول آمده، ۹۳ درصد سلکتور‌ها در این صفحه بلا استفاده هستند! و این یعنی کاهش فوق العاده زیاد حجم فایل فشرده شده css. به طور معمول، توسعه دهندگان ۸۵ درصد حجم فایل css خود را می‌توانند با این کار کاهش دهند (البته بیشتر این اتفاق هنگام استفاده از فریک ورک‌هایی مانند bootstrap,... می‌افتد) برای این کار از پلاگین gulp-uncss استفاده می‌کنیم. نصب:
npm install gulp-uncss --save-dev
gulp.task('css', function() {
return sass(config.sassPath + '/style.scss', {
style: 'compressed',
loadPath: [
'./resources/sass',
config.bowerDir + '/materialize/sass'
]
})
.on('error', util.log)
.pipe(size())
.pipe(uncss({
html: ['./index.html', './posts.html']
}))
.pipe(gulp.dest('./public/css'))
.pipe(size())
.pipe(connect.reload());
}); 
نتیجه فوق العاده است! ۸۷ درصد کاهش حجم css! اما ممکن است بعضی از استایل‌های شما توسط javascript به صفحه تزریق شوند. در این صورت نباید سکلتور‌های لازم را حذف کرد و آنها را داخل آرایه‌ی ignore قرار می‌دهیم. برای این منظور، تسک بالا را به صورت زیر به روز رسانی می‌کنیم.
gulp.task('css', function() {
return sass(config.sassPath + '/style.scss', {
style: 'compressed',
loadPath: [
'./resources/sass',
config.bowerDir + '/materialize/sass'
]
})
.on('error', util.log)
.pipe(size())
.pipe(uncss({
html: ['./index.html', './posts.html'],
timeout : 2000, // wait for load js files
ignore: [
".waves-ripple ",
".drag-target",
"#sidenav-overlay",
".waves-effect",
".waves-effect .waves-ripple",
".waves-effect.waves-pinck .waves-ripple",
".waves-block.waves-light"
]
}))
.pipe(minifyCss())
.pipe(size())
.pipe(gulp.dest('./public/css'))
.pipe(connect.reload());
});