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

Gitの活用に関して

今回はgitの技術的なことではなく、主に運用に関して。超基礎的なことですが、チームで開発する場合にはルールを徹底してないと混乱をきたします。 Contents1 ブランチを追加機能ごとにきる2 バグに …

no image

Angularでのfilter

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

no image

JavaScriptのcookieに関して

今までCookieの管理などはPHP側でやることが多かったのですが、JavaSciprtで実行することも可能です。 設定に関してはkey=value形式で突っ込めばOKです。 [crayon-6100 …

no image

vueに関する小ネタ(computed、v-classなど)

先日は埋め込み形式で、vueを書いてましたが、その時に新たな気づいた小ネタなど。 Contents1 computed2 v-class3 ajaxのasync:false computed 主に、v …

no image

webpackについて再履修

webpackについて今まで見よう見まねでやってきましたが、おまじないのような感じでプロパティ内部までしっかり理解しているとは言い難いため、再履修です。インストールとかは省略。 今まで書いた既存のwe …