GLPを使用してサイトの速度を最適化し、SEOを向上させる

あなたが灯台または任意のページの速度の洞察ツールを介してあなたのウェブサイトを実行するような何かを行ったことがあればあなたはそれが遅いことを実現するために失望する可能性があります.…本当に遅い.

低速負荷速度の主要な欠点の一つはSEOが影響を受けることである.
私のウェブサイトについては、プレーンOLのJS、CSS、およびHTMLで構築され、GitHubページでホストされているので、私は圧縮したり、画像を作成したり、HTMLやCSSやJavaScriptを連結したりしません.与えられたのは、私がブートキャンプから出てすぐに仕事をしたことです.しかし、私はそれが非常に開発者フレンドリーなセットアップのためのCMS、特にクラフトにそれを切り替えるの過程にある.私がWordPressについて考えたので、私はウェブサイトビルダーでいくつかのクライアントプロジェクトのためにそれを使いました.しかし、クラフトは勝ちました.
そして、ものを動かすとき、私はガップを使いに来ます.JSは、Javascriptタスクランナーは、ワークフローを本当に簡単にするために、退屈なタスクを自動化し、ウェブページの速度を向上させる.それでは始めましょう.

インストール

Gulpのインストールはかなり簡単です.そこで、あなたはあなたのグローバルNPMでGulp CLIパッケージをインストールしなければなりません.私はNPMとフロントエンドの開発に精通していると仮定するつもりです.
お使いのマシンにNPMがインストールされている場合は、端末でこれを実行します.

npm install --global gulp-cli

WordPressプロジェクトまたは別のテンプレートベースのCMSまたは非フレームワークスタイルのフロントエンドディレクトリにいる場合は、テンプレートまたはテーマまたはWebサイトがあるルートディレクトリで最初にプロジェクトを初期化する必要があります.

npm init

そして、任意の入力を必要としないデフォルトの「はい」フラグでコマンドを実行することができます.

npm init --y

これは、NPMで初期化されたのと同じディレクトリに“package . json”ファイルを作成します.あなたはまた、gitは“nodeilesモジュール”フォルダを保存していないことを知っている“gitignore”ファイルを追加したいと思います.Here's Aすべてについてのリンク.
次に、初期化したディレクトリで、それが反応、バニラJavaScript、WordPressサイトかどうか、名前を付けます.

npm install --save-dev gulp

これはGLPをプロジェクトの開発者依存としてインストールするだけです.
最後に、Gulpfile . jsというプロジェクトにファイルを作成する必要があります.これは私たちのタスクを自動化するために使用するガップのタスクを保持するつもりです.
今、Gulpについて素晴らしいことは、私たちのCSS、JS、またはHTMLと私たちがプラグインに必要なファイルのパイプだけを管理する素晴らしいGulpプラグインを書いたスマートな人々のトンがあるということです.
私はあなたのパフォーマンスをスピードアップするために私の個人的なサイトにGulpを使用するプロセスを示すつもりです.

画像圧縮

基本的に、私のページイメージは巨大で、彼らを圧縮して、パフォーマンスに巨大な打撃を見ます.私がこのために使用するGulpプラグインをインストールすることができます

npm i gulp-imagemin --save-dev

我々のGulpfileで、我々は現在持ちます

'use strict';

var gulp = require('gulp')
var imagemin = require('gulp-imagemin')

“use strict”フラグはJavaScriptの慣例では、言語の奇妙なquirksを防ぐためです.私は、それがGulpfileでこれを加えるために一般的な慣例であるのを見ました、そして、ちょっと進んで、それをしました.
今すぐイメージminを使用するには

var baseDir = "./src"
var targetDir = "."
gulp.task('imagemin', function() {
    return gulp.src(baseDir + '/assets/*')
    .pipe(imagemin([
        imagemin.mozjpeg({quality: 75, progressive: true}),
        imagemin.optipng({optimizationLevel: 5})
    ]))
    .pipe(gulp.dest(targetDir + '/images'))
})

上記の構文は、私たちが「imagemin」と名づけられた仕事を持っていて、何かをする機能を入力したいというGulpを伝えることに等しいです.具体的には、このタスクのための私たちの関数は、基本的に“私たちはファイルやファイルを取り出して、それにいくつかのものを開始したい.”私と私のために、私はGulpに私のsrcフォルダを見て、資産フォルダーの中のすべてのファイルを探すことを望みました.それは“*”シンボルが言っていることです.CSSとJSに移動すると、特定のタイプのファイルを探すために、背の高いGulpが必要です.
そこから、Gulpは私たちがインストールしたImageMinプラグインにそれらのファイルをパイプします.私は圧縮のためのいくつかの基本的なオプションを与えました.デフォルトの圧縮オプションでは、すべてのことをしないようにする必要があります私は何か、またはWeb上の他の何かを微調整してください.
最後に、最後の行は、出力された圧縮ファイルをフォルダ“画像”の下にあるターゲットディレクトリにパイプするように言う.これは、HTMLでIMGタグに挿入するために使用される素敵な圧縮画像になります.
あなた自身のケースのために、それは少しのように見えるべきです

gulp.task('imagemin', function() {
    return gulp.src([Directory where images are])
    .pipe(imagemin([
        imagemin.mozjpeg({quality: 75, progressive: true}),
        imagemin.optipng({optimizationLevel: 5})
    ]))
    .pipe(gulp.dest([Directory where you want outputted images to live]))
})

これを実行するには

gulp imagemin

プロジェクトディレクトリのコマンドラインに.
注意の場合は、応答するビューポートの別の画像サイズの寸法を出力することができますGulpのプラグインです.たとえば、小さな画面、中画面、および大画面のイメージを出力することができます.あなたは、hereを見てみることができます.

CSS

上記の例と同様に、実行してCSS Minプラグインをインストールします

npm i gulp-clean-css --save-dev

そして、我々のガップ仕事は、このように見えます

var cleanCSS = require("gulp-clean-css");
gulp.task('css', () => {
    return gulp.src(baseDir + '/css/*.css')
      .pipe(cleanCSS({compatibility: 'ie8'}))
      .pipe(gulp.dest(targetDir));
  });

そして、上記のimageminのように、コマンドラインで「Gulp CSS」を実行します.
以前のimageminの例と同じように、これは私が指定したのと同じbasedir変数を使います(これを乾燥させたまま)、CSSディレクトリ内の任意のファイルとCSSファイルタイプを探します.それから、私たちは、そのファイルをCleanssプラグインに渡して、それから、私たちがCSSが終了したいどんなディレクトリにでもそれをパイプで送ります.

js

最後に、私たちはJavaScriptを管理して、私たちのES 6をBabelと共にES 5に移すオプションを持っています.JavaScriptやコンパイルについてのいくつかの例を見つけました.しかし、Gulp Pippingについての良いことは、私がちょうどこれらの処理されるチェーンをすることができたということです.あなたのJSを管理するために、あなたはインストールします

npm i gulp-uglify gulp-concat gulp-rename --save-dev

そして、あなたがBabelを使用して追放する場合

npm i @babel/core @babel/preset-env gulp-babel --save-dev

私のコードで一緒に働いているこれらは、すべてのように見えます

var rename = require('gulp-rename')
var babel = require('gulp-babel');
var uglify = require('gulp-uglify')
var concat = require('gulp-concat')

gulp.task('js', function() {
    return gulp.src(baseDir + "/js/**/*.js")
    .pipe(babel({
        presets: ['@babel/env']
    }))
    .pipe(concat('concat.js')) //this will concat all the files into concat.js
    .pipe(gulp.dest(baseDir + "/concat")) //this will save concat.js in a temp directory defined above
    .pipe(rename('index.js')) //this will rename concat.js to index.js
    .pipe(uglify()) //this will uglify/minify uglify.js
    .pipe(gulp.dest(targetDir + "/js"));
})

これは少しのより多くのものです、しかし、我々はちょうどうなぎを覚えています.src属性は、私たちのファイルがどこにあるか、そして、彼らが「. js」filetypeを彼らに持っていることを確認して、彼らをBabel Translationプラグインに接続して、次に、すべてのファイルを1つのファイルに押しつけるConcatenateプラグインです.次に、連結したファイルを一時ディレクトリに保存します.次に、私たちはファイルをuglifyにパイプします.そして、それはJavascriptを不正化/ミニマムします.そして、最終的に我々の望ましい目標ディレクトリにそのファイルを保存します.
Phew
よく私たちは良いol ';“GLPのJS”をコンパイルし、Voilaでこれをラウンド、我々は最適化し、Webのための本当に小さく、迅速なコードにすべての大きなコードを圧縮しました.そして、あなたは何を知っていますか

あなたがそれをこれまでに作ったならば、私と貼り付けてくれてありがとう.我々が正しいプラグインを得るならば、Gulpはトンを成し遂げることができる本当にクールなツールです.