VPSでGulp.jsを使い始める方法
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」であり、タスクが実行されるソースファイルを検索します。 この場合、プロジェクトルートのsass/フォルダーにある.scssファイル。 これらのファイルは、Gulpプラグインを介してパイプされ、gulp.destによって設定された宛先に送信されます。
つまり、このタスクは、そのフォルダーからすべての.scssファイルを取得し、それらをcssにコンパイルしてから、自動プレフィックスを実行します。 結果のファイルは、css/フォルダーに配置されます。 次に、同じファイルがコピーされ、最後に .min サフィックスが付いた名前に変更され、ミニファイプラグインを実行して、同じcss/フォルダーに配置されます。
これをテストするには、2つのフォルダー（sassとcss）を作成し、sass/フォルダーに「styles.scss」という名前の.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/フォルダーをチェックインすると、style.cssとstyle.min.cssの2つのファイルが表示されます。 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ファイルや画像を操作したり、他のタスクを実行するタスクを設定してさらに自動化することができます。
