2019年10月10日SHAREツイートシェアはてブLINEPocketSassを使ったCSSコーディングの効率化、画像の圧縮、JavascriptやCSSファイルの縮小など、ウェブサイトの制作には様々な作業、技術が必要です。最近、こういった作業を自動的に行ってくれるタスクランナーというツールが注目されていますね。タスクランナーとは、Node.jsで開発された様々なタスクを自動で行ってくれるツールで、今までは「Grunt」が有名でしたが、最近では「Gulp」という後発のツールが徐々に人気を集めています。今回はこのGulpのご紹介と、Gruntとの違い、導入手順(Windows8)、Gulpでできる事などをまとめたいと思います。目次タスクランナー「Gulp」とは??Gruntと何が違うの??Gulpの導入1.Node.jsをインストール2.Gulp.jsをインストール3.package.jsonの作成4.プラグインのインストール1.Node.jsをインストール2.Gulp.jsをインストール3.package.jsonの作成4.プラグインのインストールGulpを使ってみよう!gulpfile.jsの設定タスクランナー「Gulp」とは??Gruntと同じくNode.jsで作られたタスクランナーで、Sassのコンパイル、Javascript、CSSファイルの結合や縮小、画像の圧縮等を自動化できるツールで、使いこなせばウェブサイトの制作時間を大幅に削減できるものです。導入と設定に少し知識が必要ですが、使わない時と比べると制作スピードが圧倒的に違います!Gulp公式サイトGruntと何が違うの??簡単に言うと、強みとしては、Gruntよりコードが短く済む事、処理が速い事、コードが書きやすい事が挙げられます。弱みとしては、リリースされて日が浅い事もありGruntよりはプラグインが少ないです。Gruntより高性能だったり、最低限のものは揃っていたりで、困る事は無いかな?と思います。Gulpの導入それでは、実際にGulpを導入してきましょう!手順は大きく以下になります。1.Node.jsをインストールGulpを使うにはNode.jsが必要なので、まずはNode.jsをインストールします。2.Gulp.jsをインストールコマンドラインを使い、Gulp.jsをインストールします。3.package.jsonの作成またもやコマンドラインを使い、package.jsonを任意のディレクトリにインストールします。4.プラグインのインストール使いたい機能に必要なプラグインをインストールしていきます。各項目の詳細手順です。1.Node.jsをインストール公式サイトからインストーラーをダウンロードし、実行してください。画面中央の「INSTALL」から、最新版のインストーラーがダウンロードできます。インストーラーのウィザードに沿ってそのまま進みましょう。注意点などもありません。2.Gulp.jsをインストールコマンドラインから、Gulp.jsをインストール。windowsなら、コマンドプロンプトを起動します。Gulpは、ローカルとグローバルへのインストールが必要です。–save-dev[/ruby]バージョン表示でインストールできているか確認しましょう。CLI、Local両方バージョンが表示されていたらOKです。3.package.jsonの作成またコマンドライン。インストールするディレクトリまで「cd」コマンドで移り、package.jsonをインストールします。c:\sample/gulpc:\sample\gulp>[/ruby]package.jsonのインストール。以下のコマンドを入力します。init[/ruby]すると、プロジェクトの名前、バージョン、説明などなどの質問が続きますので、任意の入力をしていきます。お好きな名前などを入力してENTERで進めていきます。(yes)[/ruby]最後にENTERを押せば完了。4.プラグインのインストール必要なプラグインをインストールします。今回は、前回ご紹介したCompassを動かす為のgulp-compassを入れてみましょう。先程と同じく、CLI、ローカル両方にインストールする為、「–save-dev」を付けましょう。–save-dev[/ruby]これでGulpの導入までの手順は完了です。Gulpを使ってみよう!導入が終わったので、Gulpがどんなに便利なのか試しに使ってみましょう!gulpfile.jsの設定Gulpは、gulpfile.jsに書かれた処理を実行します。gulpfile.jsを作成します。先程インストールしたCompassを動かすgulpfile.jsを書いてみます。Compassは、SassからCSSを作成するので、Sassを編集する度にCSSを生成しようとコマンドを打って実行していたら手間ですよね。Sassを保存したら自動的にCSSが再生成されるようにします。require(‘プラグイン名’);で、gulpと、インストールしたプラグインを呼び出します。{});でタスクの登録をおこないます。3.gulp.src(’ファイル’のパス);で読み出したいファイルを指定します。4.pipe(行いたい処理);でsrcで取得したファイルに処理を施します5.gulp.task(‘default’,function(){});で、defaultというコマンド「gulp」で実行できるタスクを登録しておきます。6.gulp.watch(‘監視するファイルのパターン’,[実行したいタスク]);で監視するファイルと実行するタスクを指定します。これで、「gulp」とコマンドを実行しておけば、Sassが書き換わる度に自動的にタスクが実行され、CSSファイルが生成されます。随時監視させておきたいタスクはこのdefaultタスクに入れておけば便利です。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。I...次の記事Googleの「パンダアップデート」と「ペンギンアップデート」...たきおうぇぶめも。自分の備忘録も兼ねたウェブ系のちょっとした情報や、育児、ネットでの稼ぎ方などを発信しております。