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

JavaScriptのコールバック関数について

Angularをやるうえで前提となるJavaScriptの知識を書いていこうかと。 PHPでもありますが、関数を変数として扱い、別の関数の引数にすることができます。 これを利用すると下記のようなソース …

no image

vueのコンポーネント化

vueの記事をポツポツ上げてきましたが、コンポーネント化した書き方に関して。 既存のvueの記事 Vue.jsについて vueの環境構築 今まではCDNで読み込んだり、HTMLの中に直接vueを入れて …

no image

jQuery子要素の取得方法など

jQueryで要素を取得する方法って$(“セレクタ”)しか知らなかったんですが、他にもいろいろあることがわかったのでちょっと紹介。 例えばtrの列の中に横1列に<inpu …

no image

クロスドメインがらみのajax

ajaxで別ドメインに対して、プログラムを実行したい時に注意すべきことなどを。 Contents1 ログ、レスポンスヘッダをとにかく追う2 特定ドメインからの許可3 フレームワーク側での認証ロジック( …

no image

bootstrapでのJavaScriptエラーチェック

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