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

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

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

昔作った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 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になって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でディレクトリ構造を保ったままリネームして出力する方法を試していたのでメモです。 stylusで試してますがpugやsass、jsファイルでも同じかと思います。 renameしない場合、パスの/**/の部分の…

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

久々に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…

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

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

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

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

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

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

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

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

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

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

最近は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>…

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

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

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