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ライブラリ sugar

去年、JavaScriptの仕事をがりがりやった時にお世話になったライブラリsugar。 JavaScriptのライブラリというとunderscore.jsが有名ですが、こいつも結構使えるライブラリで …

no image

ケース別JavaScriptライブラリまとめ

Webエンジニアとしてはサーバーサイドのプログラムのみならず、JavaScriptをいじることがおおいでしょう。 私自身、昔はわけがわからず大嫌いだったんですが、最近はデバッグが楽なこともあり、結構愛 …

no image

JavaScriptでの時計作成

今回はWebアプリで1秒ごとに更新されるデジタル時計の作成方法について。 基本的には 現在時刻を秒まで含めて表示 その関数を一秒ごとに更新 でOKです。 ネットにどんぴしゃりのサンプルが落ちていたので …

no image

jquery multipleについて(応用編) keepOrder

さて、複数選択だけなら前回のエントリーだけでなんとかなりますが、左の項目の順番を入れ変えて保存したい場合、難易度がかなり上がります。 公式ページには下記のように書けばOKとかいてあります。 [cray …

no image

timepickerについて

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