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

JavaScriptのexport

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

no image

Gitデタッチ、インデックス、プッシュなど

まとまってませんが、Gitであったトラブルについてのメモです。 Contents1 デタッチ状態2 インデックス一覧&削除2.1 インデックスの一覧2.2 インデックスから取り除くとき3 git pu …

no image

非同期通信のまとめ($.ajax,fetch,axiosなど)

非同期通信処理に関して、年明けに少し調べたのでメモします。 非同期通信に関しては長い間、$.ajaxを使っておりました。 フロント側でそれほど複雑な処理をやらなかった、昔覚えたのでそのまま・・ってパタ …

no image

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

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

no image

Angularでのfilter

今回はAnuglarでよく使うfilterという機能です。 使いどころとしては入力フォームに対応させて表示項目を絞る、みたいな使い方が一般的かと思います。 一番簡単なものとしては配列があり、入力値にあ …

アーカイブ