skillup

技術ブログ

JavaScript

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

投稿日:

今更ですが、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入門。インストールからSassのコンパイルまで

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

-JavaScript
-

執筆者:


comment

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

関連記事

no image

クリック編集のjQuery

最近のWEBサービスだと表示の画面と編集画面が同じになっていて、一見表示なんだけど、クリックすると特定の項目は編集できる、そんな画面がふえていきていますよね。 先日社内アプリをつくっていたところ、そう …

no image

途中入力離脱防止処理 JavaScript

WordPressの入力画面なんかでは実装されていますが、途中で文字入力をしてページりだすをしようとするとブラウザのアラートがでます。これも一般のお問い合わせフォームなんかでも実装可能です。 この場合 …

no image

JavaScriptでのオブジェクト指向 クラス作成&インスタンス生成

JavaScriptというと一般的にはjQueryを使って画面の装飾をするスクリプト言語という認識が一般的かと思います。 しかし、JavaScriptでもPHPなどのようにオブジェクト指向的な思想は実 …

no image

横からスクロール sidrの使い方

携帯サイトの場合、端末のサイズが小さいため、メニューなどはどう縮めてもやはり圧迫してしまいます。 そんなとき、クリックさせてスクロールさせるタイプであれば、場所が狭いことが気になりません。本日はそんな …

no image

JavaScript 変数、配列、オブジェクト、スコープ、関数、オブジェクトの基本について

日頃業務で使っているJavaScriptについて。自分的なメモです。 Contents1 変数定義2 配列の定義2.1 展開3 オブジェクトの定義3.1 展開4 関数4.1 スコープ4.2 即時関数4 …