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

cssフレームワークをnode_modulesから読み込む+cssの拡張

JavaScriptを1ファイルでまとめて読み込める方法が分かったので(参考リンク npmでのJSライブラリインストール)、CSSでも似たような方法があったのでメモ。 流れを言うと、下記のようになりま …

no image

Promiseを使った非同期処理

今回はPromiseを使った非同期処理について。 JavaScriptでの非同期処理ですが、処理1、処理2があった場合、よく言われるコールバック地獄になってしまいます。うまく関数化すればそうでもない気 …

no image

bowerのインストール

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

no image

jQuery子要素の取得方法など

jQueryで要素を取得する方法って$(“セレクタ”)しか知らなかったんですが、他にもいろいろあることがわかったのでちょっと紹介。 例えばtrの列の中に横1列に<inpu …

no image

JSリンク集+git ブランチ指定 clone

現状の私の課題としてUIに対する意識が甘いということが上げられます。 大昔のサイトで使っているようなわかりにくいUIをそのまま使っているんですよね。 UIといってもいろいろな要素が必要となってきますが …