skillup

技術ブログ

JavaScript

gulpインストールとタスクの実行

投稿日:2017年11月25日 更新日:

今更ですが、gulpインストールと作業に関して。

less使ってたんですが、コンパイルをずっとatomのエディタで行っていたんですが、一般的にはgulpで実行する方のほうが多いでしょう。

別件でgulpを使うことがあったんで、gulpのインストールと実際のタスクを。

gulp.js を今一度キチンと!gulp.js 導入基礎

gulpの紹介とインストール

タスクランナーといわれ、様々な作業を自動化するツールです。様々なjsのライブラリの読み込みやcssやjs等のファイルのコンパイルやビルドなどを行います。

node_modulesというディレクトリが作られ、その中にgulpのファイルができているのがわかると思います。

タスクの記述と実行

gulpfile.jsというファイルを作成し、ここに作業を記述していきます。

実際にコマンドを実行する際は

というコマンドを打てばdefaultの中の作業が実行されます。

まずコマンドが長いので、package.jsonの中に以下の記述を追加します。

これで

というコマンドで実行できるようになります。

またたとえばlessファイルのコンパイルのタスクは下記のように書きます。

srcという部分は読み込むファイル、pipeというのは作業のつなぎ(チェーンのイメージ)、gulp.destというのはコンパイルするファイルの吐き出し先になります。

上記のように記述した場合、下記コマンドで実行されます。

もっと実践的なgulpのタスクは下記はリンクを参照。

絶対つまずかないGulp入門(2018年版) – インストールとSassを使うまでの手順

遅すぎたgulp実践導入 (Mac編)

-JavaScript
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

bootstrapでのJavaScriptエラーチェック

お問い合わせフォームの入力チェックというのは本来サーバーサイド側でやらなくてはいけないのですが、JavaScriptによってクライアント側でやることも可能です。 入力欄にフォーカスして、遷移したときに …

no image

formのシリアライズ+return falseなど

ajaxでformの値を投稿しようとするとき、一つ一つの要素をjQueryでとっていたのですが、項目が多いとなかなか手間です。 そんな時、下記のメソッドで一気にフォーム要素を取得して投げることができま …

no image

Firebaseについて

前回Lambdaに少し触れましたが、2019年6月現在、サーバーレスなアプリというものが活況(?)のようです。 大規模なアプリというと Webサーバー+RDB+サーバーサイドプログラミング言語 が必須 …

no image

timepickerについて

日付を入力するときに直接、文字入力するのがメンドイことからカレンダーが表示されるプラグインを使っている人は多いでしょう。 私も日頃Datepickerというライブラリを使っています。が、このプラグイン …

no image

npmでのJSライブラリインストール&ビルド(※Laravel使用時)

JavaScriptのインストールですが、いままではライブラリを1つ1つインストールしてました。 bowerでインストールしたこともあったんですが、読み込み自体は1つ1つしていました。 先日仕事でnp …