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

React×TypeScriptをさわって

新年から新しい現場でReact × TypeScriptを触るようのなのですが、予習していて気づいたことを。 ほとんど雑記ですね・・ 当たり前ですが、データの管理の仕方などはVueと似ているため、やっ …

no image

JavaScriptのexport

JavaScriptのexportについて。 es6の大きなメリットとして、ライブラリをモジュール化して、外部から読み込むことができますが、読み込み方に少し癖があります。 気をつけるポイントとしては、 …

no image

vueに関する小ネタ(computed、v-classなど)

先日は埋め込み形式で、vueを書いてましたが、その時に新たな気づいた小ネタなど。 Contents1 computed2 v-class3 ajaxのasync:false computed 主に、v …

no image

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

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

no image

AngularJSでのHtmlFormオプション+Filter

AngularJSにてHTMLのFormオプションの書き方など。 Contents1 HTMLオプション1.1 プルダウン1.1.1 配列型1.1.2 ラベル型1.2 チェックボックス1.3 ラジオ1 …

アーカイブ