かもメモ

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

Gulp

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…