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

jquery multipleについて(基本編)

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

no image

HTML&JSなど画面まわり&サーブレット小ネタ

サーブレットでアプリ作ってますが、画面まわりに関していろいろいじっているのでそこら辺のネタなんかを。 Contents1 テーブルの結合2 JSPでの動的HTML→POSTで認識できない3 動的プルダ …

no image

オートコンプリートのプラグイン

最近だとフォームの入力画面で最初の数文字を入力すると候補を予測して表示してくれる機能(=オートコンプリート)があることが一般的ですね。 いろいろなプラグインがありますが、今回お勧めしたいのはBoots …

no image

Angularモジュール間の読み込み

Angularで以前こちらで、複数のコントロールに分ける方法を書きましたが、コントローラーだけでなく、Factory,ServiceなどいろいろなタイプのサービスがAngularにはあります。 プログ …

no image

モジュールバンドラparcelについて

現在のフロントエンドだと、es6以降の書き方が主流になっていることもあり、一度慣れてしまうとなかなか戻れない便利さがあります。 私の場合、設定が面倒だったり、Chromeではトランスパイルしなくても動 …