Gulp.jsを始めよう
GulpはJavascriptベースのツールで、ワークフローの一部を自動化することができます。自動化は文字通り1日の時間を節約できます。あなたが開発者であろうと、時折HTMLワイヤフレームを作成するデザイナーであろうと、私はあなたが掘り下げることを勧めます。.
この記事では、インストールから基本的な構文、そしていくつかの例まで、Gulpの基本的な使い方を見ていきます。記事の終わりまでにあなたはできるようになるはずです 他の人がGulp用に作成したパッケージを見つけてインストールして使用する SASSのコンパイル、画像の最適化、スプライトの作成、ファイルの連結などを行います。!
Gulpのインストール
心配しないで、インストールはとても簡単です。 OSXとLinuxの端末、またはWindowsのコマンドプロンプトを使う必要があります。これからはターミナルと呼びます。.
それを開き、npm -vとタイプしてEnterを押してください。バージョン番号が表示されている場合は、ノードがすでにインストールされています。これはGulpの依存関係です。.
あなたが得るなら “コマンドが見つかりません” （または同様のエラー）、Node.jsのダウンロードページに進んで、システムに適したパッケージを選択してください。インストールが完了すると、npmコマンドが端末で利用可能になります。.
Gulpのインストールは同じくらい簡単です。以下のコマンドを端末に貼り付けてください。
npm install --global gulp
これはGulpコマンドをインストールします。これはあなたのシステムでグローバルに利用可能になります。.
プロジェクトにGulpを追加する
Gulpがインストールされましたが、それを必要とする各プロジェクトに別々に追加する必要があります。今すぐ空のフォルダを作成して、あなたのターミナルでそれにナビゲートしてください。プロジェクトのフォルダ内にいる間に、次のコマンドを使用します。
npm install --save-dev gulp
これにより、プロジェクトフォルダーにnode_modulesフォルダーとnpm-debug.logファイルが作成されます。これらはGulpがあなたのプロジェクトのためにそのことをするために使用します、あなたはこの段階でそれらについて考える必要はありません。.
特定の各プロジェクトにGulpを追加する必要があるのは、 プロジェクトごとに要件が異なります. 1つはSASSを呼び、もう1つはLessを呼びます。 1つはCoffeescriptを使用し、もう1つは使用しないなどです。.
Gulpfile
Gulpfileは魔法が起こるところです、それはあなたが定義するところです 必要な自動化 そして それらを起こしたいとき. という名前のファイルを作成して、空のデフォルトタスクを作成しましょう。 gulpfile.js 次のコードを貼り付けます.
var gulp = require（ 'gulp'）; gulp.task（ 'default'、function（）//これは今のところ何もしません。すぐに機能を追加します）;
このファイルが保存されたら、あなたの端末に戻ってgulpコマンドを単独で実行することができます。 Gulpは、どのプロジェクトに入っているのかを検出し、デフォルトのタスク（今作成したタスク）を実行します。このようなものが見えるはずです。
タスクは空なので、ここでは実際には何も起こりませんが、正常に機能しています。それでは、いくつかの適切な例を見てみましょう。!
ファイルをコピーする
これは退屈なものです、私は同じくらい認めますが、それはあなたが簡単に起こっていることを理解するのに役立ちます.
プロジェクトフォルダにという名前のファイルを作成します。 to_copy.txt , というフォルダ 開発者. Gulpfileに入り、という名前の新しいタスクを作成しましょう。 コピーする.
gulp.task（ 'copy'、function（）return gulp.src（ 'to_copy.txt'）.pipe（gulp.dest（ 'dev'））;）;
1行目は、copyという名前のタスクを定義しています。この中で、gulp.srcを使用して、このタスクでどのファイルをターゲットにしているかを指定します。この場合、それは名前が付けられた単一のファイルです。 to_copy.txt.
それから、これらのファイルをgulp.dest関数に渡します。この関数は、これらのファイルを配置する場所を指定します - 私はdevディレクトリを使用しました。.
端末に戻って入力してください グループコピー このタスクを実行するには、指定されたファイルを指定されたディレクトリにコピーする必要があります。
パイプコマンドはGulpの心臓部です。コマンド間でデータを移動するのは効率的な方法です。 srcコマンドはdestコマンドにパイプされるファイルを指定します。より複雑なシナリオでは、宛先を指定する前にファイルを他のコマンドにパイプ処理します。.
また、ソースは単一のファイルまたは複数のファイルとして指定できることにも注意してください。フォルダがある場合 製造 そして、私たちは私たちからすべてのファイルを移動したいです。 開発 フォルダを作成するには、次のコマンドを使用します。
gulp.task（ 'copy'、function（）return gulp.src（ 'development / *'）.pipe（gulp.dest（ 'production'））;）;
スター文字はディレクトリ内のものと一致します。また、すべてのサブディレクトリ内のすべてのファイルを照合したり、他のあらゆる種類の豪華な照合を行うこともできます。詳細については、node-globのドキュメントをご覧ください。.
SASSのコンパイル
SASSファイルからスタイルシートを作成することは、開発者にとって一般的な作業です。それはGulpを使ってかなり簡単に行うことができます、しかし我々はいくつかの準備をする必要があるでしょう。 src、dest、その他多数の基本的なコマンドを除いて、すべての機能はサードパーティアドオンを介して追加されます。これが私がそれらを使用する方法です。.
私はタイプする SASSグルプ グーグルに、最初の結果は通常私が必要なものである、あなたはSASSパッケージのためのページを見つけるべきです。それはそれをインストールする方法を示します（npm install gulp-sass）。たぶん、あなたはそれを管理者としてインストールするためにsudoを使う必要があるでしょう、それでそれはたぶんそうなるでしょう（sudo npm install gulp-sass） .
完了したら、パッケージが指示する構文を使用してコードをコンパイルできます。これを行うには、styles.scssというファイルを次の内容で作成します。
$ primary：＃ff9900; body background：$ primary;
今すぐGulpfileに次のGulpタスクを作成します。.
gulp.task（ 'sass'、function（）gulp.src（ '*。scss'）.pipe（sass（））.pipe（gulp.dest（ './ css'））;）;
コマンドを実行する前に、Gulpfileの先頭にあるパッケージを次のように 'require'することを忘れないでください。
var sass = require（ 'gulp-sass'）;
走ったとき ガルプサス, 拡張子がscssのファイルはすべてsass関数にパイプされ、それがcssに変換されます。これらはその後、それらをcssフォルダーに配置するdestination関数にパイプされます。.
ファイルとフォルダを見る
これまでのところこれはすべて便利ですが、それでもコマンドを入力する必要があります。 毎回 特にスタイルシートの変更に関しては、あまり効率的ではありません。 Gulpを使うとファイルの変更を監視したりコマンドを自動的に実行したりできます。.
Gulpfileで、という名前のコマンドを作成します。 自動化する これは、watchコマンドを使用してファイルセットの変更を監視し、ファイルが変更されたときに特定のコマンドを実行します。.
gulp.task（ 'automate'、function（）gulp.watch（ '*。scss'、['sass']）;）;
あなたがタイプするなら gulp自動化 端末に入ると、タスクを開始して終了しますが、変更を監視しているためプロンプトには戻りません。ルートディレクトリにあるすべてのscssファイルを監視し、それらが変更された場合は、以前に設定したsassコマンドを実行します。.
style.scssファイルを変更した場合は、自動的にcssディレクトリ内のcssファイルにコンパイルされるはずです。.
複数のタスクを実行する
複数のタスクを実行したい場合がたくさんあります。あなたのjavascriptフォルダを見ているとき、あなたは2つのファイルを連結してコンパイルして、そして次にそれらを縮小することに進むかもしれません。これを実現する方法は2つあります。.
タスクが関連しているなら、私は好きです チェーンする. 良い例は、JavaScriptファイルの連結と縮小です。まずファイルをconcatアクションにパイプ処理し、次にそれらをgulp-uglifyにパイプ処理してからdestination関数を使用してそれらを出力します。.
タスクが無関係の場合は、 複数のタスクを呼び出す. 例としては、スクリプトを連結して縮小したり、SASSをコンパイルしたりする作業があります。これがどのように見えるかについての彼の完全なGulpfileです。.
var gulp = require（ 'gulp'）; var uglify = require（ 'gulp-uglify'）; var concat = require（ 'gulp-concat'）; var sass = require（ 'gulp-sass'）; gulp.task（ 'scripts'、function（）gulp.src（ 'js / ** / *。js'）.pipe（concat（ 'scripts.js'））.pipe（gulp.dest（ '。'） ）.pipe（uglify（））.pipe（gulp.dest（ '。'）））; gulp.task（ 'styles'、function（）gulp.src（ '/ *。scss'）.pipe（sass（））.pipe（gulp.dest（ './ css'））;）; gulp.task（ 'automate'、function（）gulp.watch（['*。scss'、 'js / ** / *。js']、['scripts'、 'styles']）;）; gulp.task（ 'default'、['scripts'、 'styles']）;
あなたがタイプするなら gulpスクリプト ターミナルに入ると、jsディレクトリ内のすべてのjavascriptファイルが連結され、メインディレクトリに出力されてから、集約されてメインディレクトリに保存されます。.
あなたがタイプするなら ガルプサス, すべてのscssファイルはコンパイルされてcssディレクトリに保存されます。.
あなたがタイプするなら ガルプ （デフォルトのタスク）、あなたの スクリプト タスクが実行され、その後にあなたの スタイル 仕事.
の gulp自動化 taskは、私たちのscssファイルとjsファイルの変更を複数のフォルダーで監視し、変更が検出された場合は、定義した両方のタスクを実行します。.
概要
Gulpを使用することは難しくありません、実際、多くの人々はその単純な構文のためにGruntよりもそれを好みます。新しいオートメーションを作成するときに実行する手順を覚えておいてください。
- プラグインを検索
- プラグインをインストール
- Gulpfileにプラグインを要求する
- ドキュメントの構文を使用してください
Gulpで利用可能な5つのコマンド（task、run、watch、src、dest）はあなたが知る必要がある唯一のものです、すべてのサードパーティアドオンはすばらしいドキュメンテーションを持っています。これは私が使うもののリストです。
- 溝画像最適化による画像の最適化
- gulp-spriteを使ってイメージスプライトを作成する
- gulp-concatによるファイルの連結
- gulp-uglifyを使ってファイルを縮小する
- gulp-delでファイルを削除する
- gulp-jslintでJavascriptをリントする
- gulp-jsonlintを使ったJSONリンティング
- gulp-autoprefixerによるCSSの自動修正
- gulp-frepを使って検索と置換
- gulp-minify-cssでCSSを縮小する
