VPSでGulp.jsを使い始める方法

投稿日: 2022-04-20 2022-10-12
タグ: Node.js, Ruby

Gulp.jsについて

Gulp.js は、フロントエンドの開発エクスペリエンスを大幅に支援できるタスクランナーです。タスクランナーの目的は、プロジェクトの過程で何度も何度も実行しなければならない面倒なタスクを自動化することです。 Grunt.jsは、多くの開発者がフロントエンドプロセスの自動化に使用している、もう1つの人気のあるタスクランナーです。

Gulp.jsは、設定より規約を使用してタスクを設定します。これにより、プロジェクトの保守が非常に簡単になります。さらに、Node.jsストリームを使用するため、非常に高速です。 GulpとGruntの主な違いは、プラグインごとに入力/出力を設定する代わりに、Gulpが設定されたすべてのプラグインを介してソースファイルをパイプ処理し、宛先ファイルを生成することです。

Grunt.jsの設定に関する優れた記事については、このチュートリアルをお読みください。

ただし、このチュートリアルでは、VPSにGulp.jsをインストールし、タスクの自動化がいかに簡単であるかを示す小さなプロジェクトを設定します。このために、Node.jsがNPM（Node Package Manager）と一緒にインストールされていることを前提としています。まだ行っていない場合は、このチュートリアルを開始できます。

インストール

Gulp.jsのインストールは実際には非常に簡単です。 NPMを使用しているため、次のコマンドを実行するだけです。

npm install gulp -g

これにより、Gulp.jsがGloabllyにVPSにインストールされ、コマンドラインで使用できるようになります。したがって、必要に応じてGulpプラグインを追加する個別のプロジェクトを設定します。

我々のプロジェクト

Gulpの力を説明するために、 Gus という小さなフロントエンドプロジェクトを開始し、スタイリングの問題に焦点を当てます。したがって、プロジェクトフォルダーを作成し、内部をナビゲートしましょう。

mkdir Gus
cd Gus

Node Package Managerの良いところは、プロジェクトに必要なライブラリをで宣言できることです。 package.json その後、バージョン管理されたリポジトリにコミットできるファイル。このファイルは手動で作成することも、コマンドラインユーティリティを使用して作成することもできます。構文ミスをしないという点で安全であるため、2番目のオプションを使用します。次のコマンドを実行し、画面の指示に従います。

npm init

私の新しい package.json すべてのデフォルトに従い、プロジェクトの説明を設定すると、ファイルは次のようになります。

{
  "name": "Gus",
  "version": "0.0.0",
  "description": "My Gus project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "BSD-2-Clause"
}

これより少ない場合も多く含まれる場合もあります（後で説明します）。

これで、 package.json ファイルの場合、Gulp.jsライブラリをプロジェクトに追加し、devDependenciesとしてこのファイルに自動的に含めることができます。しかし、最初に、どのライブラリを使用したいですか？

このチュートリアルでは、次のタスクに固執します。sassファイルをコンパイルし、結果のcssファイルにベンダープレフィックスを自動プレフィックスしてから、それらを縮小します。

GulpがSassファイルをコンパイルできるようにするには、最初にRuby、Ruby Gems、およびSassをVPSにインストールする必要があります。次のコマンドを使用して、これをすばやく処理できます。

sudo apt-get update
sudo apt-get install ruby-full rubygems
sudo gem install sass

次に、次のコマンドを実行してGulpをプロジェクトにインストールし、devDependencyとして保存します。

npm install gulp --save-dev

次に、次のコマンドを実行して、今述べたタスクを実行するために必要なライブラリをインストールします。

npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-rename --save-dev

これらのコマンドを実行した後に気付くことがいくつかあります。（1）プロジェクトルートに「node_modules」という名前の新しいフォルダーがあり、インストールされているすべてのパッケージが含まれています。（2）後者は package.json devDependenciesとしてファイルします。

タスクの設定

それらのすべてのタスクと要件は、というファイルに設定する必要があります gulpfile.js プロジェクトのルートにあります。それで、それを作成して、次のブロックに貼り付けます。

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    rename = require('gulp-rename');

ご覧のとおり、上記のすべてのライブラリを必要とするいくつかの変数を作成します。ファイルの名前を変更するのに役立つ「名前の変更」と呼ばれる追加のファイルがあります。

この宣言の下に、タスクを作成できます。複数のタスクを作成し、それらを相互に実行させることもできますが、ここでは、 styles:

gulp.task('styles', function() {
  return gulp.src('sass/*.scss')
    .pipe(sass({ style: 'expanded' }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
    .pipe(gulp.dest('css'))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('css'));
});

上記で使用します gulp.task 「スタイル」と呼ばれる新しいタスクを生成します。そのコールバックは「gulp.src」であり、タスクが実行されるソースファイルを検索します。私たちの場合、 .scss にあるファイル sass/ プロジェクトルートのフォルダ。これらのファイルは、Gulpプラグインを介してパイプされ、によって設定された宛先に送信されます。 gulp.dest.

言い換えれば、このタスクはすべての .scss そのフォルダーからファイルを作成し、自動プレフィックスで実行する前にcssにコンパイルします。結果のファイルは、 css/ フォルダ。次に、同じファイルがコピーされ、最後に .min サフィックスが付いた名前に変更され、縮小プラグインを実行して同じ場所に配置されます。 css/ フォルダ。

これをテストするには、2つのフォルダー（sassとcss）を作成し、 .scss のファイル sass/ 「styles.scss」というフォルダ。内部に、次のステートメントを配置します。

$color: #eee;

#box {
  color : $color;
  box-sizing: border-box;
}

ご覧のとおり、これはまだ接頭辞が付いていないCSSプロパティを含む基本的なSASS構文です。 Gulp.jsを実行してみましょう styles これを私たちが必要とするものに変えるタスク。プロジェクトのルートフォルダから、次のコマンドを実行します。

gulp styles

ターミナルウィンドウに次のようなものが表示されます。

[gulp] Using file /path/to/project/Gus/gulpfile.js
[gulp] Working directory changed to /path/to/project/Gus
[gulp] Running 'styles'...
[gulp] Finished 'styles' in 224 ms

今、あなたがチェックインすると css/ フォルダには、2つのファイルがあります。 style.css と style.min.css. 2番目のものには、次のcssコードが含まれている必要がある最初のものの縮小バージョンが含まれている必要があります。

#box {
  color: #eeeeee;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

すぐにコンパイルされ、プレフィックスが付けられるので、もう心配する必要はありません。また、縮小版もスタンバイ状態です。これはすでに素晴らしいですが、Gulpに変更を監視させる方法を見てみましょう。 .scss ファイルを保存し、ファイルが保存されているときにタスクを実行します。これにより、タスクを実行するためのコマンドラインにたどり着く必要がなくなります。

このために、既存のタスクの下に新しいタスクを作成する必要があります。

gulp.task('watch', function() {

  // Watch the sass files
  gulp.watch('sass/*.scss', ['styles']);

});

これは基本的に、指定されたフォルダー内のファイルへの変更を監視し、これが発生したときにタスクを実行するタスクになります。この場合に実行するように設定したタスクは styles. 次に、コマンドラインから監視タスクを実行する必要があります。

gulp watch

そして、これは変更についてそれぞれのフォルダを監視し続け、 styles 停止するまでのタスク：

ctrl + c

結論

このチュートリアルでは、フロントエンドプロジェクトでGulp.jsを設定し、それを使用して自動化されたタスクを非常に便利に実行する方法を説明しました。タスクで使用できるプラグインが多数あるため、その能力はここで止まりません。 javascriptファイルや画像を操作したり、他のタスクを実行するタスクを設定してさらに自動化することができます。

投稿者： http ：//www.webomelette.com/ ”>ダニー

getdocs

13036