Atomエディタで「Gulp」を操作するなら「gulp-control」パッケージが便利

パソコン

gulp-control

前回「Gulp」でCSSをMinify化する方法をご紹介いたしました。

Windowsに「Node.js」 と「Gulp.js」をインストールして、WordPressテーマのSimplicityの子テーマにあるCSSをMinify化して読み込んでみた
「Gulp」というタスクランナーが以前から気になっていたので、当サイトで採用しているWordPressテーマのSimplicityで適用してみることにしました。 今回は「Gulp」でCSSのMinify化(圧縮)を行ってみたのでご紹介いたし...

「Gulp」は便利なのですが、実行する際のコマンドがなかなか面倒で、どうしたものかと考えていると、愛用しているAtomエディタに「gulp-control」というよさそうなパッケージがあったので、使用してみることにしました。

「gulp-control」をインストールする

まずは、「ファイル」から「環境設定」を選択します。

gulp-controlパッケージ 「ファイル」から「環境設定」を選択
「ファイル」から「環境設定」を選択

「設定」から「Install」を選択します。

gulp-controlパッケージ 「Install」を選択
「Install」を選択

「パッケージ」を選択し、「gulp」と入力します。

gulp-controlパッケージ 「パッケージ」を選択し、「gulp」と入力
「パッケージ」を選択し、「gulp」と入力

一覧の検索結果に「gulp-control」と表示されるので、「Install」をクリックします。

gulp-controlパッケージ 「gulp-control」の「Install」をクリック
「gulp-control」の「Install」をクリック

インストールが終わった後、一度Atomエディタを再起動します。

使い方

エディタを再起動した後、メニューの「パッケージ」から「gulp-control」の「Open」をクリックします。

gulp-controlパッケージ 「パッケージ」から「gulp-control」の「Open」をクリック
「パッケージ」から「gulp-control」の「Open」をクリック

右側に「gulpfile.js」があるディレクトリパスが表示され、左側に「gulpfile.js」に記述しているタスクが一覧で表示されています。

gulp-controlパッケージ 「gulp」のタスクが一覧で表示される
「gulp」のタスクが一覧で表示される

タスク名をクリックすると、記述しているタスクが実行されます。

gulp-controlパッケージ タスク名をクリックすると、タスクが実行される
タスク名をクリックすると、タスクが実行される

再度クリックすると、タスクがストップします。

gulp-controlパッケージ 再度クリックすると、タスクがストップする
再度クリックすると、タスクがストップする

まとめ

  • 「gulp-control」をインストールする
  • エディタを再起動する。
  • タスク名をクリックするとタスクが実行される。
  • 再度クリックするとタスクがストップする。

「gulp-control」パッケージは「gulp」のタスクを一覧で表示し、簡単に実行することができます。コマンドを入力する必要がないので、タスクの実行がとても楽になります。

Atomエディタを使用している方で、「Gulp」のタスク実行を面倒だと思っている方は、「gulp-control」パッケージを試してみることをおすすめします。

スポンサーリンク
パソコン
スポンサーリンク
シェアする
ボヘミアンをフォローする
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
スポンサーリンク

コメント