skillup

技術ブログ

Git JavaScript

gulpに関して

投稿日:2018年7月8日 更新日:

gulpに関しての復習と色々と間違っていたところもあるのでまとめ。

ちなみに以前書いた記事は下記

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

インストール

これは上記の記事間違っていないのですが、下記コマンドでそのままOK

タスクの実行

今まで下記のようなコマンドでやっておりました。

上記のリンクでも書いておりますが、あくまでpackage.jsonのscriptに記述があった場合です。

そうでない場合は下記のように単独で打ち、実行します。

npxコマンドについて

基本的にローカルのnpmパッケージを実行するには、

./node_modules/bin/〜などを実行する必要がありますが、

npxコマンドを実行することでより簡便な方法で実行することができます。

例えばsassがnpmでインストールされているとして、

./node_modules/node-sass/bin/node-sass ./sass/sample.scss ./sass/sample.cssで実行することもできますが、

npx node-sass ./sass/sample.scss ./sass/sample.css

の方が簡便です。

参考URL npm 5.2.0の新機能! 「npx」でローカルパッケージを手軽に実行しよう

gulpの各命令について

ちなみにgitのソースは下記

https://github.com/umanari145/gulp_sample

今までは単発でsassのコンパイルなどをしていたんですが、タスクランナーなのでビルドコマンドなどでリリースまでに関わる処理を一括で行うことができます。

以前やったjenkinsのCIに近い感じですね。

gulp コマンド確認

src ・・対象ファイルの取得(/**/*とやると全階層取得)

pipe ・・対象ファイルをストリーム化。基本はsrcで取得したものをこれで処理する

dest ・・ 対象ファイルの出力先(ディレクトリがなければ自動的に作成する)

必須っぽいライブラリ

del ・・削除を行う。初期化などに使えそう。

runSequense・・一連の流れをここでタスク化。基本的にはここに全ての処理を集めた方が良さそう。

Gulp でタスクを並列/直列処理する

gulp:ディレクトリ・ファイル構成を維持してdestする

htaccessが絡んだファイルでコピーがうまくできなくてイラついていたところ、Linuxコマンドが使えるライブラリがあったんでメモ。

これ便利!gulpfile.js でLinuxコマンドを記述して実行できるプラグインgulp-exec と child_processを使ってみた

-Git, JavaScript
-,

執筆者:


comment

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

関連記事

no image

vue-routerについて

vueでのルーティングに関して。 Vueの場合、いわゆるSPA(シングルページアプリケーション)という用途で使われることがあると思います。 ただその場合でも擬似的なルーティング(URLの切り替えなどに …

no image

jquery multipleについて(基本編)

selectで複数選択をするときには通常のプルダウンでも可能ですが、プラグインを使うともっとスマートに対応できます。 今回私が実装したかったのがCSVアップロードorダウンロードで項目を自由に変更した …

no image

font-awesomeのインストール(タスクランナー経由)

fontawesomeをタスクランナー経由でインストールすることについて。 CDNでインストールするだけならURL張り付けるだけですが。 インストール まずnpmで下記コマンドでインストールをします。 …

no image

bowerのインストール

業務でAngularJSをいじっていますが、そこでbowerというソフトウェアの存在を知りました。 Contents1 bowerとは?2 インストール方法 bowerとは? フロントエンドのパッケー …

no image

ajaxがらみのイベントの発動とwhenに関して

実務で住所のプルダウンを実装する機会がありました。 [東京都][中央区][明石町] みたいにカテゴリーが2〜3あって連動するプルダウンのパターンです。 これを実装するときのポイントですが、新規保存より …