#MinifyCSS

[intorque]

How to Speed Up Your Webflow Site in 5 Easy Steps

In the digital age, website speed is paramount. A fast-loading site not only improves user experience but also boosts your search engine ranking. Webflow is a powerful tool for web design, but to fully harness its potential, you must ensure your site is optimized for speed. Here, we outline five essential steps to enhance your Webflow site's performance.

1. Optimize Your Images

Because they are frequently the largest files on a webpage, images have a big impact on load speeds. Here’s how to ensure your images are optimized:

a. Choose the Right Format

Using the appropriate image format can make a big difference. JPEG is ideal for photographs due to its compression capabilities, while PNG is better for graphics with fewer colors. WebP, a newer format, offers superior compression and quality, making it a good choice for most images.

b. Compress Images

Use tools like TinyPNG or ImageOptim to compress your images without compromising quality. Compressed images load faster and reduce the overall weight of your site.

c. Use Responsive Images

Leverage Webflow’s responsive image feature. It automatically generates various image sizes for different devices, ensuring that users only download the smallest necessary version.

d. Lazy Load Images

To ensure that images load only when they enter the viewport, enable lazy loading. This speeds up perceived performance and cuts down on the initial load time.

2. Minimize and Combine Files

Minimizing and combining your site’s CSS, JavaScript, and HTML files reduces the number of HTTP requests, which in turn speeds up your site.

a. Minify CSS, JavaScript, and HTML

Minification removes unnecessary characters (like white spaces, commas, and comments) from your code without affecting its functionality. Tools like UglifyJS for JavaScript and CSSNano for CSS are great for this purpose.

b. Combine Files

Whenever possible, merge several JavaScript and CSS files into one.This reduces the number of requests the browser needs to make, speeding up page load times.

c. Load JavaScript Asynchronously

By loading JavaScript files asynchronously, you ensure they don’t block the rendering of the page. This means the browser can continue loading other elements while it fetches the JavaScript.

3. Use a Content Delivery Network (CDN)

A CDN distributes your content across various servers worldwide, allowing users to load your site from a server closer to their location, which significantly reduces load times.

a. Choose the Right CDN

Popular CDNs like Cloudflare, Fastly, and Amazon CloudFront offer reliable services that can greatly enhance your site's speed and performance.

b. Enable Caching

CDNs cache your content, so subsequent visits to your site are faster. Ensure your CDN is configured to cache static assets like images, CSS, and JavaScript files.

c. Optimize Delivery

Leverage your CDN’s features to optimize content delivery. For instance, enabling Brotli or GZIP compression can further reduce file sizes and accelerate load times.

4. Reduce Webfont Usage

While webfonts can enhance your site’s aesthetic, they can also slow it down. Here’s how to optimize webfonts for better performance:

a. Limit the Number of Fonts

Employ a small selection of font weights and families.Each additional font adds to the load time, so stick to a maximum of two to three families.

b. Use Modern Formats

WOFF2 is the latest webfont format, offering better compression and faster loading times than older formats like TTF or EOT.

c. Optimize Loading

Consider loading webfonts asynchronously using the font-display: swap CSS property. This allows text to be displayed immediately using a fallback font until the webfont is fully loaded.

5. Enable Browser Caching

Browser caching stores certain files on the user’s device, so they don’t have to be re-downloaded on subsequent visits. This drastically reduces load times for returning visitors.

a. Set Expiration Dates

Set expiration dates on your server according to the different kinds of files.Static assets like images and CSS files can have a longer expiration period, while dynamic content should have shorter periods.

b. Leverage Cache-Control Headers

Use cache-control headers to define how and for how long browsers should cache your resources. The max-age directive specifies the maximum amount of time a resource is considered fresh.

c. Validate Cached Resources

Use the ETag and Last-Modified headers to validate cached resources. This ensures users receive the latest version of a resource if it has changed, while still benefiting from caching when possible.

Conclusion

By following these five steps—optimizing images, minimizing and combining files, using a CDN, reducing webfont usage, and enabling browser caching—you can significantly improve your Webflow site’s speed and performance. In addition to improving user experience, a quicker website raises your search engine rating and increases website traffic.

Website:- How to Speed Up Your Webflow Site in 5 Easy Steps

[howto1minute]

https://www.youtube.com/watch?v=bbjTECVYWao How To Minify CSS JavaScript Files in WordPress 2023 #minifycss #javascript #wordpress

[rplussoft]

How to optimize website performance for better user experience.

Introduction:

In the digital age, where attention spans are short and competition is fierce, having a high-performing website is crucial for attracting and retaining visitors. A slow-loading website can turn off visitors and hurt your company’s online presence. In this blog, we will look at practical ways for improving website performance and user experience. You can ensure that your website loads quickly, performs properly, and makes a great impression on your visitors by using these tactics.

Optimize Image Sizes:

Large image files can significantly slow down your website’s loading speed. To optimize images for better performance:

Resize and compress images before uploading them to your website.

Utilize modern image formats like WebP, which offer better compression and quality.

Implement lazy loading, a technique that defers the loading of off-screen images until the user scrolls to them.

2. Minify CSS, JavaScript, and HTML:

Reducing the size of your CSS, JavaScript, and HTML files can improve website performance. Minification involves removing unnecessary characters, comments, and whitespace from your code. Tools like minifyCSS, UglifyJS, and HTMLMinifier can help automate this process.

3. Enable Browser Caching:

Browser caching allows you to store certain website files on a user’s device, reducing the need to download them repeatedly. By enabling browser caching:

Set expiration headers for static resources to specify how long they should be cached.

Leverage browser caching plugins or server configurations to control caching settings.

4. Use Content Delivery Networks (CDNs):

CDNs help distribute your website’s files across multiple servers worldwide, reducing the physical distance between the user and your content. This results in faster loading times. Consider using a reputable CDN service to enhance your website’s performance.

5. Optimize Server Response Time:

Server response time plays a crucial role in website performance. To optimize it:

Choose a reliable hosting provider with fast servers and robust infrastructure.

Optimize your website’s code and database queries to reduce server processing time.

Implement caching mechanisms, such as opcode caching or database query caching.

6. Implement AMP (Accelerated Mobile Pages):

AMP is a framework designed to create fast-loading mobile web pages. By implementing AMP:

Create simplified versions of your web pages optimized for mobile devices.

Utilize streamlined HTML and limited JavaScript for faster rendering.

Benefit from AMP’s cache and pre-render capabilities to enhance performance.

7. Monitor and Analyze Website Performance:

Regularly monitor and analyze your website’s performance using tools like Google PageSpeed Insights, GTmetrix, or Pingdom. These tools provide valuable insights into areas that need improvement, such as page load times, file sizes, and performance bottlenecks.

To ensure your website performs at its best and delivers an exceptional user experience, partner with RPlus, a leading web performance optimization company. Our expert team can analyze, optimize, and fine-tune your website for maximum speed and efficiency. Visit our website or contact us today to learn more about our comprehensive web performance solutions.

[weblyword]

How to Minify CSS and JavaScript in WordPress?

If your website running slow, then consider minifying #CSS and #JavaScript in your WordPress site. Learn how to minify CSS and JavaScript files in #WordPress to improve website speed and performance. Read the full article

[minifycss-blog]

https://minify-css.net/blog-detail/benefits-of-css-in-seo  #minifycss #seo #compress #minify #compress #csscompress #sitecompress

[masaa-ma]

psi-local - ローカルサイトにPageSpeed Insightsを適用する

from http://www.moongift.jp/2017/09/psi-local-%e3%83%ad%e3%83%bc%e3%82%ab%e3%83%ab%e3%82%b5%e3%82%a4%e3%83%88%e3%81%abpagespeed-insights%e3%82%92%e9%81%a9%e7%94%a8%e3%81%99%e3%82%8b/

Webページの表示速度が遅くて良い理由はありません。ユーザ体験はもちろん、Eコマースサイトなどでは売り上げに直結するほどです。Googleも表示速度を検索順位の指標に組み込んでおり、その指摘を行ってくれるサービスとしてPageSpeed Insightsを提供しています。

しかしこのPageSpeed Insightsは外部に公開した後でしか使えません。そこで開発中でも使えるようにするのがpsi-localです。

psi-localの使い方

psi-localを使ったテストスクリプトです。JSONオブジェクトが次のように返ってきます。

$ node test.js { kind: 'pagespeedonline#result', id: 'https://a335d185.ngrok.io/', responseCode: 200, title: 'DeviceConnect Users', ruleGroups: { SPEED: { score: 51 }, USABILITY: { score: 99 } }, pageStats: { numberResources: 14, numberHosts: 4, totalRequestBytes: '1017', numberStaticResources: 10, htmlResponseBytes: '19354', cssResponseBytes: '102764', javascriptResponseBytes: '432220', otherResponseBytes: '50111', numberJsResources: 5, numberCssResources: 4 }, formattedResults: { locale: 'en_US', ruleResults: { AvoidLandingPageRedirects: [Object], AvoidPlugins: [Object], ConfigureViewport: [Object], EnableGzipCompression: [Object], LeverageBrowserCaching: [Object], MainResourceServerResponseTime: [Object], MinifyCss: [Object], MinifyHTML: [Object], MinifyJavaScript: [Object], MinimizeRenderBlockingResources: [Object], OptimizeImages: [Object], PrioritizeVisibleContent: [Object], SizeContentToViewport: [Object], SizeTapTargetsAppropriately: [Object], UseLegibleFontSizes: [Object] } }, version: { major: 1, minor: 15 } }

見て分かると思いますが、ngrok.ioを使ってlocalhostの内容を外部に公開しています。その結果、PageSpeed Insightsが行えるという訳です。ページ自体の表示速度はチェックできませんが、どういった点におい��修正すべきかをpageStatsからチェックできるでしょう。

psi-localはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

yankouskia/psi-local: Use PageSpeed Insights locally

[toddbirchard-architect]

Using Gulp to Make Frontend Tolerable

Automate the lame stuff

Alright fine, so maybe the whole obligatory-gulp-tutorial-on-some-coding-blog thing has become a bit cliché at this point. Hate all you want, but I 'll take all the traffic from keywords I can get at this point. Keywords such as Gulp, or ExpressJS, or NodeJS, or React Vue frontend ubuntu installation API social cloud data entrepreneur community. Hopefully this serves as a good reference regardless, like when we copy/paste our gulpfiles from project to project and forget what they actually do. Quick 101 NodeJS developers use Gulp to automate necessary processes before moving their frontend code to production. This includes minifying files to make them run faster, and to also make them unreadable to people who would otherwise make fun of your mediocre Javascript which you were forced to crank out on a short timeline. General Workflow Let's say you're running a basic Express app. As opposed to developing and storing files in a directory such as /public, Gulp enables us to develop in one directory, and compile to another. That means we can keep our horrible uncompressed and uncompiled source in a folder such as /src, and output them to a directory such as /dist, which would be our public-facing output. An Express file structure utilizing this would look something like this: |- src/ |- js/ |- scss/ |- dist/ |- js/ |- css/ |- img/ |- fonts/ |- views |- index.hbs |- routes |- index.js |- gulpfile.js |- node_modules/ |- package.json |- app.js Installation First install the gulp CLI: npm install --global gulp-cli Next, enter your project folder and install gulp while saving it as a project dependency. npm install --save gulp How it Works Without any plugins, Gulp doesn't do anything on its own. Gulp is essentially a process wrapper which executes the tasks you so desire; this entails a bit of setup, but it also makes Gulp highly customizable to your needs. The Gulpfile Gulp works by invoking a file called gulpfile.js in your main directory, which you'll need to create and set up yourself (sorry). The file is divided into two main parts: requiring (importing) plugins, and defining which tasks to run when gulp is invoked. A basic worthless gulpfile might look something like: var gulp = require('gulp'); gulp.task('default', function () { console.log('Sup World!'); }); To make this file useful, we'll need to install more plugins and set up tasks for them. Essential Plugins Let's look at what each one does. Keep in mind there are thousands of Gulp plugins, so let's just touch on the big hitters here. Keep in mind to install any of these plugins, you'll simply need to run the npm installation in your project directory: npm install --save [plugin name] gulp-uglify Minifies Javascript or CSS files, and outputs the result into the directory of your choice. This plugin can be reused across filetypes, as we'll demonstrate in a moment. gulp-concat Combines minified files into a single file. This is essential for browser performance as it reduces the number of http requests being made every time your page loads. gulp-rename Renames files (such as those produced by gulp-concat). gulp-sass / gulp-less Compiles your Sass or Less files into CSS and outputs to the directory of your choice. gulp-minify-css Minifies CSS, as you might imagine. This can chained to gulp-sass or gulp-less to minify the CSS files those tasks produce. gulp-autoprefixer Thank god for this. Autoprefixer finds CSS styles and adds the browser-specific equivalents to your CSS, so you don't need to write the same style 10 times for every horrible browser in existence. This means you can write styles such as: background: linear-gradient(to bottom, white, black); And have them output as: background: -webkit-gradient(linear, left top, left bottom, from(white), to(black)); background: -webkit-linear-gradient(top, white, black); background: -o-linear-gradient(top, white, black); background: linear-gradient(to bottom, white, black); gulp-watch Allows Gulp to listen for changes being made to source files, so that it may fire an event upon file change, such as: gulp-livereload Compiles the changes made in directories being watched via gulp-watch automatically while you work. Next Level Pro Shit While these plugins aren't 'essential', they are really cool and helpful. gulp-sourcemaps An obnoxious side effect of minifying and concating your files is when it comes time to debug errors on the frontend. Errors occurring at "line 235" are pretty useless considering your error codes are referring to the compiled files, without granting a hint as to where the problematic code may have come from in the first place. gulp-sourcemaps resolves this by adding commenting paths to which source files your code originated from. gulp-browser-sync By leveraging BrowserSync , this plugin immediately refreshes an open browser which links to files just changed by gulp. This means you can code, comile, and see the results in real time. This takes a bit extra effort to set up, so be sure to check their documentation . gulp-load-plugins Normally when creating our gulpfile, we need to start off by requiring our plugins via something like this: var gulp = require('gulp'), del = require('del'), concat = require('gulp-concat'), rename = require('gulp-rename'), uglify = require('gulp-uglify'), sass = require('gulp-sass'), watch = require('gulp-watch'), livereload = require('gulp-livereload'), minifyCss = require('gulp-minify-css'), autoprefixer = require('gulp-autoprefixer'); gulp-load-plugins instead checks your package.json for any Gulp plugins and immediately requires them, thus saving you a few precious minutes. The output instead looks like: var $ = require('gulp-load-plugins')(); Building The Gulpfile Now that we have all these dope plugins, we can finally build our gulpfile. Here's an example (without using gulp-load-plugins for now): var gulp = require('gulp'), del = require('del'), concat = require('gulp-concat'), rename = require('gulp-rename'), uglify = require('gulp-uglify'), sass = require('gulp-sass'), watch = require('gulp-watch'), livereload = require('gulp-livereload'), minifyCss = require('gulp-minify-css'), autoprefixer = require('gulp-autoprefixer'); gulp.task('styles', function() { return gulp.src('src/sass/*.scss') .pipe(sass({outputStyle: 'expanded', unix_newlines: true, linefeed: "lf"}).on('error', sass.logError)) .pipe(autoprefixer()) .pipe(minifyCss({ keepSpecialComments: 1 })) .pipe(rename("theme.min.css")) .pipe(gulp.dest('./assets/css/')); }); gulp.task('scripts', function() { return gulp.src(['src/js/plugin/*.js', 'src/js/base.js']) .pipe(uglify()) .pipe(concat('theme.min.js')) .pipe(gulp.dest('assets/js')); }); gulp.task('ghost_config', ['scripts'], function() { return gulp.src(['src/js/config.js', 'assets/js/theme.min.js']) .pipe(concat('theme.min.js')) .pipe(gulp.dest('assets/js')); }); gulp.task('default', function() { gulp.start('styles', 'scripts', 'ghost_config', 'watch'); }); gulp.task('watch', function() { gulp.watch('src/sass/*.scss', ['styles']); gulp.watch('src/js/*.js', ['scripts', 'ghost_config']); livereload.listen(); gulp.watch(['*']).on('change', livereload.changed); }); Just by looking at the file itself, you may be able to dissect what's happening here. After we require our plugins, we define our tasks, which are essentially individual jobs consisiting of one or more gulp plugins depending on how you've chained them. Here's the general terminology to help clear things up: gulp.task : Defines a task consisting of one of more plugin actions. gulp.src :  Specifies the folder containing source files. gulp.dest : Defines the folder to output compiled files to. pipe() : Allows multiple events to be chained together in a single task. Wrapping up Once your file is ready to go, simply run the grunt command in your project directory. You should see Gulp output the status of each task you've set, as well as any errors which may have occured. In short, just use Gulp. The scientific community has come to a consensus that Gulp is objectively superior to its counterpart, Grunt. Ask Matt, he's a scientist. Peace fam!

- Todd Birchard Read post

[hackersandslackers]

Using Gulp to Make Frontend Tolerable

Automate the lame stuff

Alright fine, so maybe the whole obligatory-gulp-tutorial-on-some-coding-blog thing has become a bit cliché at this point. Hate all you want, but I 'll take all the traffic from keywords I can get at this point. Keywords such as Gulp, or ExpressJS, or NodeJS, or React Vue frontend ubuntu installation API social cloud data entrepreneur community. Hopefully this serves as a good reference regardless, like when we copy/paste our gulpfiles from project to project and forget what they actually do. Quick 101 NodeJS developers use Gulp to automate necessary processes before moving their frontend code to production. This includes minifying files to make them run faster, and to also make them unreadable to people who would otherwise make fun of your mediocre Javascript which you were forced to crank out on a short timeline. General Workflow Let's say you're running a basic Express app. As opposed to developing and storing files in a directory such as /public, Gulp enables us to develop in one directory, and compile to another. That means we can keep our horrible uncompressed and uncompiled source in a folder such as /src, and output them to a directory such as /dist, which would be our public-facing output. An Express file structure utilizing this would look something like this: |- src/ |- js/ |- scss/ |- dist/ |- js/ |- css/ |- img/ |- fonts/ |- views |- index.hbs |- routes |- index.js |- gulpfile.js |- node_modules/ |- package.json |- app.js Installation First install the gulp CLI: npm install --global gulp-cli Next, enter your project folder and install gulp while saving it as a project dependency. npm install --save gulp How it Works Without any plugins, Gulp doesn't do anything on its own. Gulp is essentially a process wrapper which executes the tasks you so desire; this entails a bit of setup, but it also makes Gulp highly customizable to your needs. The Gulpfile Gulp works by invoking a file called gulpfile.js in your main directory, which you'll need to create and set up yourself (sorry). The file is divided into two main parts: requiring (importing) plugins, and defining which tasks to run when gulp is invoked. A basic worthless gulpfile might look something like: var gulp = require('gulp'); gulp.task('default', function () { console.log('Sup World!'); }); To make this file useful, we'll need to install more plugins and set up tasks for them. Essential Plugins Let's look at what each one does. Keep in mind there are thousands of Gulp plugins, so let's just touch on the big hitters here. Keep in mind to install any of these plugins, you'll simply need to run the npm installation in your project directory: npm install --save [plugin name] gulp-uglify Minifies Javascript or CSS files, and outputs the result into the directory of your choice. This plugin can be reused across filetypes, as we'll demonstrate in a moment. gulp-concat Combines minified files into a single file. This is essential for browser performance as it reduces the number of http requests being made every time your page loads. gulp-rename Renames files (such as those produced by gulp-concat). gulp-sass / gulp-less Compiles your Sass or Less files into CSS and outputs to the directory of your choice. gulp-minify-css Minifies CSS, as you might imagine. This can chained to gulp-sass or gulp-less to minify the CSS files those tasks produce. gulp-autoprefixer Thank god for this. Autoprefixer finds CSS styles and adds the browser-specific equivalents to your CSS, so you don't need to write the same style 10 times for every horrible browser in existence. This means you can write styles such as: background: linear-gradient(to bottom, white, black); And have them output as: background: -webkit-gradient(linear, left top, left bottom, from(white), to(black)); background: -webkit-linear-gradient(top, white, black); background: -o-linear-gradient(top, white, black); background: linear-gradient(to bottom, white, black); gulp-watch Allows Gulp to listen for changes being made to source files, so that it may fire an event upon file change, such as: gulp-livereload Compiles the changes made in directories being watched via gulp-watch automatically while you work. Next Level Pro Shit While these plugins aren't 'essential', they are really cool and helpful. gulp-sourcemaps An obnoxious side effect of minifying and concating your files is when it comes time to debug errors on the frontend. Errors occurring at "line 235" are pretty useless considering your error codes are referring to the compiled files, without granting a hint as to where the problematic code may have come from in the first place. gulp-sourcemaps resolves this by adding commenting paths to which source files your code originated from. gulp-browser-sync By leveraging BrowserSync , this plugin immediately refreshes an open browser which links to files just changed by gulp. This means you can code, comile, and see the results in real time. This takes a bit extra effort to set up, so be sure to check their documentation . gulp-load-plugins Normally when creating our gulpfile, we need to start off by requiring our plugins via something like this: var gulp = require('gulp'), del = require('del'), concat = require('gulp-concat'), rename = require('gulp-rename'), uglify = require('gulp-uglify'), sass = require('gulp-sass'), watch = require('gulp-watch'), livereload = require('gulp-livereload'), minifyCss = require('gulp-minify-css'), autoprefixer = require('gulp-autoprefixer'); gulp-load-plugins instead checks your package.json for any Gulp plugins and immediately requires them, thus saving you a few precious minutes. The output instead looks like: var $ = require('gulp-load-plugins')(); Building The Gulpfile Now that we have all these dope plugins, we can finally build our gulpfile. Here's an example (without using gulp-load-plugins for now): var gulp = require('gulp'), del = require('del'), concat = require('gulp-concat'), rename = require('gulp-rename'), uglify = require('gulp-uglify'), sass = require('gulp-sass'), watch = require('gulp-watch'), livereload = require('gulp-livereload'), minifyCss = require('gulp-minify-css'), autoprefixer = require('gulp-autoprefixer'); gulp.task('styles', function() { return gulp.src('src/sass/*.scss') .pipe(sass({outputStyle: 'expanded', unix_newlines: true, linefeed: "lf"}).on('error', sass.logError)) .pipe(autoprefixer()) .pipe(minifyCss({ keepSpecialComments: 1 })) .pipe(rename("theme.min.css")) .pipe(gulp.dest('./assets/css/')); }); gulp.task('scripts', function() { return gulp.src(['src/js/plugin/*.js', 'src/js/base.js']) .pipe(uglify()) .pipe(concat('theme.min.js')) .pipe(gulp.dest('assets/js')); }); gulp.task('ghost_config', ['scripts'], function() { return gulp.src(['src/js/config.js', 'assets/js/theme.min.js']) .pipe(concat('theme.min.js')) .pipe(gulp.dest('assets/js')); }); gulp.task('default', function() { gulp.start('styles', 'scripts', 'ghost_config', 'watch'); }); gulp.task('watch', function() { gulp.watch('src/sass/*.scss', ['styles']); gulp.watch('src/js/*.js', ['scripts', 'ghost_config']); livereload.listen(); gulp.watch(['*']).on('change', livereload.changed); }); Just by looking at the file itself, you may be able to dissect what's happening here. After we require our plugins, we define our tasks, which are essentially individual jobs consisiting of one or more gulp plugins depending on how you've chained them. Here's the general terminology to help clear things up: gulp.task : Defines a task consisting of one of more plugin actions. gulp.src :  Specifies the folder containing source files. gulp.dest : Defines the folder to output compiled files to. pipe() : Allows multiple events to be chained together in a single task. Wrapping up Once your file is ready to go, simply run the grunt command in your project directory. You should see Gulp output the status of each task you've set, as well as any errors which may have occured. In short, just use Gulp. The scientific community has come to a consensus that Gulp is objectively superior to its counterpart, Grunt. Ask Matt, he's a scientist. Peace fam!

- Todd Birchard

[gokhanmeric]

Hello Gulp

Sıfırdan bir projeyi gulp ile derlemek için yapmamız gerekenler.

Gulpjs front-end’de iş akışınızı otomatikleştirmeye yarayan Nodejs tabanlı bir Javascript aracıdır.Bazen manuel olarak yapılan ve gereksiz yere vakit kaybedilen işlerde Gulpjs yardımınıza hızır gibi yetişmektedir.Alternatif olarak Grunt aracıda kullanılmaktadır ancak Grunt’u,Gulp’a göre kod bakımından okuması daha zordur ve Gulp üzerindeki konfigrasyonları nodejs kodu gibi çalıştırdığından Grunt’a göre daha hızlı çalışmaktadır.(Gulp ile yaptığınız tüm işleri Grunt ile de yapabilirsiniz)

###Gulp ile neler yapılabilir ? - Javascript dosyalarınızı sıkıştırabilirsiniz (gulp-uglify) - CSS dosyalarınızı sıkıştırabilirsiniz (gulp-minify-css) - CSS ve JS dosyalarınızı tek bir dosyada toplayabilirsiniz (gulp-concat) - Resimlerinizi sıkıştırabilir (gulp-imagemin) ve optimize edebilirsiniz (gulp-image-optimization) - Javascript hata kontrolü yapabilirsiniz (gulp-jslint) - CSS hata kontrolü yapabilirsiniz (gulp-csslint) - SASS (gulp-ruby-sass),LESS (gulp-less) ve Stylus (gulp-stylus) dosyalarınızı CSS çevirebilirsiniz - Değişiklik yaptığınız dosya üzerinde watcher oluşturabilirsiniz (gulp-watch) - CoffeeScript dosyalarınızı JS olarak derleyebilirsiniz (gulp-coffee)

Daha fazla eklenti için http://gulpjs.com/plugins/ adresini ziyaret edebilirsiniz.

###Kurulum

Gulp yükleyebilmek için makinanızda nodejs yüklü olması gerekmektedir.Nodejs kendi sitesinden edinebilirsiniz.

Nodejs kurulumunu tamamladıktan sonra Gulp kurulumuna başlayabiliriz

npm install -g gulp

Gulp global olarak kuruldu ancak yapacağımız her projeye gulpjs tekrardan indirmek zorundayız.Bunun için terminalden proje dizinine giderek gulpjs projeye dahil ediyoruz.

npm install --save-dev gulp

Daha sonra projenin ana dizinine gulpfile.js adında bir js dosyası oluşturuyoruz.Bu dosya içerisine aşağıdaki kodları yazarak ilk taskımızı oluşturabiliriz.

var gulp = require('gulp'); gulp.task('default',function(){ console.log('Default task running'); });

Dosyayı kaydedip terminale gulp yazdığımızda karşımıza şöyle bir ekran gelecektir

Burada default task adıdır.Default task dışında bir task yazmışsanız, terminale çalıştırmak için gulp task_adı komutunu yazmanız gerekmektedir.

Şimdide üstte bahsettiğim gulp-pluginlerden birkaçını deneyelim

Örneğin js dosyalarımızı sıkıştırıp tek bir dosyada toplamak istiyoruz.Bunun için gerekli pluginler : gulp-uglify ve gulp-concat

Hemen bu pluginleri projemize dahil edelim

npm install --save-dev gulp-uglify gulp-concat

node_modules klasörüne baktığınızda gulp-uglify ve gulp-concat klasörlerini gördüyseniz pluginler sorunsuz yüklendi demektir.

Şimdi gulpfile.js dosyamızın içeriğini güncelleyelim

var gulp = require('gulp'), uglify = require('gulp-uglify'), concat = require('gulp-concat'); gulp.task('scripts',function(){ gulp.src('app/js/*.js') .pipe(uglify()) .pipe(concat('scripts.js')) .pipe(gulp.dest('dist/js')) });

Daha sonra terminale gidip gulp scripts yazdığımızda app/js klasörü içerisindeki tüm js dosyalarını sıkıştırıp scripts.js klasöründe birleştirecek ve dist/js klasörüne atacaktır.

Aynı şekilde CSS dosyalarını sıkıştırıp,birleştirmek için önce gulp-minify-css plugini indirdikten sonra gulpfile.js içerisindeki kodları güncelleyelim.

npm install --save-dev gulp-minify-css

var gulp = require('gulp'), uglify = require('gulp-uglify'), minifyCSS = require('gulp-minify-css'), concat = require('gulp-concat'); gulp.task('scripts',function(){ gulp.src('app/js/*.js') .pipe(uglify()) .pipe(concat('scripts.js')) .pipe(gulp.dest('dist')) }); gulp.task('styles',function(){ gulp.src('app/css/*.css') .pipe(minifyCSS({keepBreaks : true})) .pipe(gulp.dest('dist/css')) });

Bu iki taskı çalıştırmak içinde terminale çalıştırmak istediğimiz taskın adını önüne gulp yazarak çalıştırıyoruz. “Hepsini tek tek mi yazacağız? Nerde vakitten kazanç ?” dediğinizi duyar gibiyim.Sakin olun hemen onuda tek satır kodla halledelim.gulpfile.js dosyasını tekrar güncelleyelim.

var gulp = require('gulp') uglify = require('gulp-uglify'), minifyCSS = require('gulp-minify-css'), concat = require('gulp-concat'); gulp.task('scripts',function(){ gulp.src('app/js/*.js') .pipe(uglify()) .pipe(concat('scripts.js')) .pipe(gulp.dest('dist')) }); gulp.task('styles',function(){ gulp.src('app/css/*.css') .pipe(minifyCSS({keepBreaks : true})) .pipe(gulp.dest('dist/css')) }); gulp.task('default', ['scripts', 'styles']);

Son satıra dikkat ederseniz default task yazdık ve bu task çalıştırıldığı anda ‘scripts’ ve ‘styles’ tasklarımızında çalışmasını sağladık.Artık terminale gidip gulp yazmanız yeterli olacaktır.

Aslında problemler bitmedi.Hala vakitten kaybımız var.Şimdide şöyle bir senaryomuz olsun.Css kodluyorsunuz ve her kaydettiğinizde sıkıştırma ve birleştirme işlemini terminale giderek gulp styles mi yazacaksınız ? Tabikide hayır.Bu oldukça zahmetli bir iş.Bunun için watcher oluşturacağız ve her kaydettiğimizde otomatik olarak tasklar çalışacak.

Önce gulp-watch plugini indirelim

npm install –save-dev gulp-watch

Daha sonra gulpfile.js dosyamızdaki kodları güncelleyelim.

var gulp = require('gulp'), uglify = require('gulp-uglify'), minifyCSS = require('gulp-minify-css'), concat = require('gulp-concat'); gulp.task('scripts',function(){ gulp.src('app/js/*.js') .pipe(uglify()) .pipe(concat('scripts.js')) .pipe(gulp.dest('dist')) }); gulp.task('styles',function(){ gulp.src('app/css/*.css') .pipe(minifyCSS({keepBreaks : true})) .pipe(gulp.dest('dist/css')) }); gulp.task('watch',function(){ gulp.watch('app/js/*.js',['scripts']); gulp.watch('app/css/*.css',['styles']); }); gulp.task('default', ['scripts', 'styles','watch']);

Eklediğimiz watch taskınıda default taska depend ettik.Artık terminale gidip gulp yazmanız yeterli olacaktır.

[minifycss-blog]

https://minify-css.net/blog-detail/top-10-latest-google-ranking-factors  #minifycss #seo #compress #minify #compress #csscompress #sitecompress

[minifycss-blog]

https://minify-css.net/blog-detail/how-can-you-speed-up-your-website  #minifycss #seo #compress #minify #compress #csscompress #sitecompress