かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Gulp

Gulp + Rollup で webサイト用の JS をビルドしたい

10年くらい前に作った WEB サイトの改修案件が発生して、構成が古すぎて手に負えなくなっていたのでコレを気にビルド環境を見直しました。 元のものが Grunt で JS を結合したり SCSS をビルドしている構成だったので Grunt を Gulp に置き換え、SCSS のビル…

gulp-connect のリロード処理だけ別タスクにする時のTips

リロードさせる関数があるので、gulpでwatchしている時など好きなタイミングでlocalhostをリロードさせることができるgulp-connectですが、リロードさせるタスクをまとめようとした時にチョットしたハマりどころが合ったのでメモ。 公式に書かれてるやり方 ‍…

gulp サーバー(gulp-connect)で自動的にブラウザを開きたい

gulpでサイト作る時のローカルサーバーに長らくgulp-webserverを使っていたのですが、CSSの変更時にhotreloadが上手く動作せず、リロードさせる関数も無いっぽかったので、reload関数が有り任意のタイミングでリロードさせることができるgulp-connectに乗り…

gulp4 watch終了したら The following tasks did not complete ってエラーが表示される件

昔作ったgulpでpugとstylusコンパイルしてるだけのLPを更新で弄っていました。 gulpでwatchしてたプロセスを終了したら [23:55:48] The following tasks did not complete: default, watchHTML, watchCSS [23:55:48] Did you forget to signal async complet…

Gulp 4 gulp.seriesとgulp.parallel

gulp v4 で追加されたgulp.seriesとgulp.parallelを試してみた gulp.series(...tasks) ... 順番に実行する gulp.parallel(...tasks) ... 並列に実行をする GitHubのサンプル gulp.task('one', function(done) { // do stuff done(); }); gulp.task('two', fu…

Gulp v4 移行メモ

Gulp v4になってv3の書き方だとエラーになるケースがあったので移行したときのメモ gulp.series と gulp.parallel gulp v4で追加されたメソッド added gulp.series and gulp.parallel methods for composing tasks. Everything must use these now. gulp.ser…

Gulp ディレクトリ構造を保ったままリネームしたい

ニッチ過ぎて一体どこに需要があるのか謎すぎるのですが、gulpでディレクトリ構造を保ったままリネームして出力する方法を試していたのでメモです。 stylusで試してますがpugやsass、jsファイルでも同じかと思います。 renameしない場合、パスの/**/の部分の…

Gulp Stylusでautoprefixerを使うメモ

nibだけだと今は不要になってるベンダープレフィックスも出力してしまうのでautoprefixerを使って対象ブラウザをコントロールするメモ node: v9.6.1 npm: v6.1.0 gulp@3.9.1 gulp-stylus@2.7.0 gulp-autoprefixer@2.3.1 nib@1.1.2 install $ npm install --s…

Gulp4 gulpコマンドでgulpInst.start.apply(gulpInst, toRun); Cannot read property 'apply' of undefinedで動かなくなった

久々にnpm installしてgulpを動かそうとしたところ $ gulp [08:46:54] Using gulpfile ~/Documents/local/gulpfile.js /.nodebrew/node/v6.9.2/lib/node_modules/gulp/bin/gulp.js:129 gulpInst.start.apply(gulpInst, toRun); ^ TypeError: Cannot read pro…

Gulp 実行コマンドに独自のオプションを付けて便利にしてみる例

前回minimistを使ってコマンドから実行するjsに変数を渡せるようにしました。 今回は、実際にコマンドのオプションで便利にgulpを使えるようにしてみた実例のメモです。 一つのgulp下に複数のhtmlサイトをディレクトリを区切って置いているイメージで、次の…

Gulp node.js 実行時に変数を渡して処理を分岐させたい

以前 Gulpでタスクを指定して実行することで無理やり処理を分岐させる方法を書いていました。 今回同じような需要が合って調べているとgulp実行時コマンドに直接キーと引数を渡せる素晴らしい方法があったのでメモ。 minimistを使ってコマンドラインから変数…

PugでPHPタグを出力したい

pugはHTMLテンプレートエンジンなのですが gulp などで拡張子をリネームしてしまえば PHPのテンプレートファイルにする事もできます。 ex: var gulp = require("gulp"), plumber = require("gulp-plumber"), rename = require('gulp-rename'), pug = require…

Gulp gulp-uglify でmin化しようとしたらエラーになった件

gulp-uglify v3.0.0 から/*!で始まるようなライセンスのコメントを残す preserveComments オプションは使えなくなっているので、エラーになる。 代わりにoutput:{ comments: /^!/ }を使えばOK。

Gulp min化したJS・CSSに自動でコメントを入れたい

コーディングをする時、Gulpでコンパイル&min化をしています。 min化したコードにコメントでバージョン情報とか、元のライセンス情報を入れたいケースとかがあります。 javascript ライブラリなどのライセンス情報で/*!で始まるコメントの場合はgulp-uglify…

node.jsのバージョンを上げたらgulpでエラーが出るようになった時の解決方法

chaika.hatenablog.com node.jsのバージョンを上げたら、node-sassを使っていたプロジェクトでgulpコマンドを打つとで次のようなエラーが出るようになりました。 $ gulp [16:39:36] Warning: gulp version mismatch: [16:39:36] Global gulp is 3.9.1 [16:39…

Gulp コマンド一発でwebサーバーを立ち上げてwatchを開始したい

$ gulp コマンドを打てば、webserverが起動して、gulp.watchも始まるようにする方法のメモ gulpコマンドはgulp.task('default')で定義したものが実行されるので var gulp = require("gulp"), webserver = require('gulp-webserver'); gulp.task('default', f…

Gulp 特定のファイルを対象から外したい

javascriptのファイルをJSHintでチェックするけど、対象ディレクトリ内のlibディレクトリ内のライブラリファイルはJSHintの対象から外したいとか、Gulp.src()の対象から除外する方法のメモ。 !指定すれば除外できる。 対象ファイルの前に!を追加すればOK EX:…

Gulp JSHintでエラー/ワーニングが出たら それ以上タスクを実行させない。かつ gulp.watchが停止しないようにしたい。

Gulpでjavascriptのファイルを監視 JSHintでエラーなどをチェック 問題がなければconcatで1つにまとめて、min化 browser-syncでリロード という処理を行わせようと思い、Google Web Starter Kitを参考にGulpのタスクを作っていたのですが、下記の問題に当た…

Gulp jadeコンパイル時に変数をGulpから渡したい

jadeでテンプレートを作成していて、開発時用と本番環境用とでCSSやjsの読み込みを変えたいというような事があります。 jadeでconfig.jadeの様なものを作成しておいて、devModeのようなフラグを基に出し分けることも出来るのですが、都度変数を変えてコンパ…

Gulp タスクの呼び出し元によって、タスク内の処理を変えたい。

Gulpでタスクを実行していて、同じような処理だけど開発環境の時と本番リリース用でオプションを変更したいとかがあります。 開発環境用のタスクと、本番用のタスクとで別にタスクを書けば済む話なのですが、同じような記述が増えてしまうのが少しなんだかな…

jade 属性の中にコーテーションを出力したい

最近はgulpでjadeをコンパイルしています。 <ul> <li ng-class="{active: thing.score < 50}"> <a href='[permlink slug="url"]'>LINK</a> <li> <ul> HTMLの属性などの中にWordPressのショートコードや、AngularJSのng-classとかを属性の中にコーテーションを使った値を入れたいケースなどがあります。 普通に書くとエスケープされる 属性の中の<や"がエ</ul></li></li></ul>…

Gulp stylus @import nib にハマる。

最近Glupに慣れようと頑張っています。 世間一般でCSSのプリプロセッサーははSCSSやCompassがやはり多いのでしょうか? 僕は個人的にStylusが好きなので、今日は今までGruntでやっていたstylus+nibのコンパイルをGulpでしようとしてハマってしまったのメモで…

Bower で入れたBootstrapのCSSとJSをGulpで開発環境に持ってきたい。

パッケージマネージャーのBowerでBootstrapをインストールして、Gulpを使ってBootstrapのCSSとjavascriptを開発ディレクトリに持ってくる方法のメモ。 npmを使うのでnode.jsを前もってインストールしておく必要があります。 プロジェクトの準備 $ npm init n…

Gulp concatでファイルをまとめて、uglifyでmin化してファイル名を変更して出力したい。

最近gruntよりgulpの方が熱い!という噂を聴いてバリバリgrunt派だったのですがチャレンジしてみました。 インストールとかは同じnode関連なのでnpm使えば簡単にできるので、この辺りgruntと大差なく導入できるなぁ〜って印象でした。 gruntで言うところのwa…