なので Web開発者 、同じ退屈な作業を何度も繰り返すことがあります。ビルドコマンドを実行したり、ブラウザで更新を押したりすることでどれだけの時間が無駄になるかを考えると、多くの時間を節約できることがわかります。さらに、プロセスを自動化することで、一時的に「ゾーン」（生産性の状態）を離れることなく、目前のタスクに集中できます。

cプログラミングで何ができるか

このJavaScript自動化チュートリアルでは、自動化する方法を学習します。 設計 とGulpによる開発プロセス。あなたがもっといるなら デザイン志向 、私はあなたが持っている恐れを克服し、読み進めることをお勧めします。一方、開発者の場合は、その背後にあるロジックを理解すれば、これを一掃することができます。

gulp は、Node.jsのストリームを使用して、自動化への非同期の送信元と宛先のアプローチを実装するビルドシステムです。すべてがJavaScriptで記述されているため、コーディングの知識が中級者であれば誰でも簡単に始めることができます。 Gulpビルドプロセスは、ウォッチャーとタスクのコレクションで構成されています。さらに、Gulpの背後にあるコミュニティは 巨大なプラグインディレクトリ npm内で、JavaScriptの連結からSVGからのアイコンフォントの作成までのタスクを実行するのに役立ちます。

Gulpの代替

そこにはたくさんの選択肢があり、そのほとんどは過去数年で生まれました-最も注目すべきものは 接地 。 GulpとGruntの間のコンテストは、どちらも長所と短所があるため、明確な勝者になることはありません。したがって、私はそれを深く掘り下げることは避けます。一言で言えば、Gruntの構成への大きな依存は、GulpのJavaScriptアプローチに人々を導くものです。それまでの間、次のようなネイティブGUI実装 コアラ 主にコーディングを控える人々から、ある程度の根拠を得ています。ただし、バンドルされたアプリケーションでは、Gulpが提供するカスタマイズ性と拡張性のレベルに到達することは不可能です。

プロセス自動化の基礎

プラグイン

プラグインは、gulpが各プロセスを実行するための手段です。プラグインはnpmを介してインストールされ、「require」を使用して開始されます。

タスク

Gulpの場合、タスクには常にソースと宛先があります。それらの間に、各プラグインを呼び出し、変換された結果を次のパイプに出力するパイプがあります。

グロブ

グロブは、ファイルを参照するワイルドカードパターンです。グロブまたはグロブの配列は、タスクソースの入力として使用されます。

ウォッチャー

ウォッチャーは、ソースファイルの変更を監視し、変更が検出されるたびにタスクを呼び出します。

gulpfile.js

これは、「gulp」コマンドが指すJavaScriptファイルです。これには、タスクからウォッチャー、またはタスクで使用されるその他のコードまで、すべてが含まれています。

簡単なタスク

開始するには、 Node.js 管理者アクセス権を持つコマンドラインシェル。あなたはできる Node.jsをダウンロード ここから。インストールしたら、次のコマンドを実行して、npmが最新であることを確認できます。

データベースを最初に設計するときに重要ではないこと

sudo npm install npm -g

-gフラグは、インストールがグローバルになることを示します。

これで、Gulpをインストールして、いくつかの簡単なタスクの呼び出しを開始する準備が整いました。次のコマンドを使用して、Gulpをグローバルにインストールします。

sudo npm install gulp -g

同じコマンドを使用して更新することもできることに注意してください。

最初のタスクに役立つスターターキットをからダウンロードできます。 toptal-gulp-tutorial / step1 。これには、SCSSファイルをCSSにコンパイルする非常に単純なタスクが含まれています。 gulp-sassプラグインを使用しています。 libsass 。ここでlibsassを選択したのは、Rubyの代替よりもはるかに高速だからです。 その機能の一部が欠けています 。プロジェクトのルートディレクトリに移動したら、次のコマンドを使用して、必要なすべてのプラグインをインストールできます。

npm install

このコマンドはpackage.jsonファイルを読み取り、必要なすべての依存関係をインストールします。ここでは、以下の省略形として「npminstall」を使用しています。

npm install gulp --save-dev npm install gulp-sass --save-dev

「–save-dev」フラグは、選択したプラグインをpackage.json devDependenciesに追加します。これにより、次にすべてをインストールするときに、便利な「npminstall」を使用できます。

この時点で、最初のタスクを実行できます。次のコマンドを実行し、/ scssフォルダー内のすべてのSCSSファイルが対応するディレクトリのCSSにコンパイルされるのを確認します。

gulp scss

この例では、実行するタスクを指定していることに注意してください。タスク名を省略した場合、「default」という名前のタスクが実行されます。

.netのWebAPI

コードウォークスルー

上記は、わずか7行のJavaScriptコードで実行されます。確かに、そのシンプルさを理解すれば、くつろげるでしょう。

var gulp = require('gulp'); var scss = require('gulp-sass');

最初に、使用するすべてのプラグインを初期化します。 Gulpは、私たちがなくてはならない唯一のものです。

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

「scss」という名前のタスクを定義します。

return gulp.src('scss/*.scss')

タスクのソースファイルを設定します。これらはグロブとして定義されます。この例では、「。scss」で終わる「scss /」フォルダー内のすべてのファイルを参照しています。

.pipe(scss())

この時点で、以前に定義したgulp-sassプラグインを呼び出します。

.pipe(gulp.dest('css'));

最後に、「gulp.dest」を使用してファイルの宛先フォルダーを定義します。ファイルが連結されている場合、これは単一のファイル名にすることもできます。

このプロセス自動化の実装をさらに改善するために、他のいくつかのGulpプラグインを含めることを試みることができます。たとえば、次を使用してタスクの最終製品を縮小したい場合があります。 gulp-minify-css ベンダープレフィックスを自動的に追加します gulp-autoprefixer 。

ウォッチャーの採用

すぐに使えるウォッチャースターターキットを作成しました。あなたはそれをからダウンロードすることができます toptal-gulp-tutorial / step2 。これには、以前に作成されたSCSSタスクの拡張バージョンと、ソースファイルを監視してタスクを呼び出すウォッチャーが含まれています。それを開始するには、次のコマンドを使用します。

gulp

このコマンドは、ウォッチャーを開始する「デフォルト」タスクを開始します。この時点で、任意のSCSSファイルを編集して、CSSファイルが再コンパイルされるのを見ることができます。コマンドラインでGulpの通知を確認できます。

Windowsで書かれたプログラミング言語は何ですか

コードウォークスルー

たった3行のコードで、タスクのウォッチャーを設定しました。とは言うものの、ウォッチャースターターキットは導入例と大差ありません。このセクションでは、すべての追加と変更について説明します。

return gulp.src(['scss/**/*.scss', '!scss/**/_*'])

この例では、Gulpソースにグロブの配列が提供されています。 1つ目は、サブフォルダー内の「.scss」で終わるすべてのファイルを含み、2つ目は、「_」で始まるファイルを除外します。このようにして、SCSSの組み込み関数@importを使用して、_page.scssファイルを連結できます。

gulp.task('default', ['scss'], function() {

ここでは、「デフォルト」タスクを定義します。 「scss」タスクは、「default」の前に依存関係として実行されます。

gulp.watch('scss/**/*.scss', ['scss']);

最後に、Gulpの監視関数を呼び出して、「。scss」で終わるファイルをポイントし、変更イベントが発生するたびに「scss」タスクを実行します。

最高のC ++コース

これで、JavaScriptの連結、コードのヒント、CoffeeScriptのコンパイルなど、他の自動化されたプロセスの新しいウォッチャーを作成する準備が整いました。このJavaScript自動化の実装をより深く掘り下げるために、追加することを提案します gulp-notify タスクが実行されると通知されます。また、別のタスクを作成して、結果のCSSコードを縮小し、「scss」タスクをその依存関係として実行することもできます。最後に、あなたは使用することができます gulp-名前の変更 結果のファイルに「.min」サフィックスを追加します。

JavaScript自動化のための高度なGulpプラグイン

Gulpのプラグインベースには何千ものプラグインが存在し、そのうちのいくつかはビルドプロセスの単純なJavaScript自動化をはるかに超えています。ここにいくつかの優れた例があります：

BrowserSync

BrowserSync CSS、JavaScriptを挿入し、変更が加えられるたびにブラウザを自動的に更新します。さらに、同僚を怖がらせたり、ブラウザのテストを大幅に高速化するために使用できるghostMode機能が含まれています。

Browserify

Browserify アプリケーションの「require」呼び出しを分析し、バンドルされたJavaScriptファイルに変換します。また、ブラウザコードに変換できるnpmパッケージのリストがあります。

Webpack

Browserifyと同様に、 Webpack 依存関係のあるモジュールを静的ファイルに変換することを目的としています。これは、モジュールの依存関係をどのように設定するかについてユーザーに自由度を与え、Node.jsのコードスタイルに従うことを目的としていません。

カルマ

gulp-karma 悪名高いテスト環境をGulpにもたらします。 Karmaは、Gulpも推奨している最小の構成アプローチに従います。

結論

このプロセス自動化チュートリアルでは、Gulpをビルドツールとして使用することの美しさとシンプルさを示しました。チュートリアルで説明されている手順に従うことで、将来のプロジェクトとレガシープロジェクトの両方でソフトウェア開発プロセスを完全に自動化する準備が整います。古いプロジェクトのビルドシステムのセットアップにある程度の時間を投資することで、将来の貴重な時間を確実に節約できます。

近日公開されるより高度なGulpチュートリアルにご期待ください。

関連： スピードの必要性：ApeeScapeJavaScriptコーディングチャレンジの回顧展