gulp.spritesmithをレスポンシブに対応させる - Qiita
※注意 この記事で紹介しているのは gulp-spritesmith ではなくて gulp.spritesmith です。 紛らわしいので、間違えないようにご注意を。 sprite化は面倒くさい 既存のサイトでレスポンス速度向上のために、一部の画像をsprite化する運びになった。 自分で作成するのはだるいし、工数もかかるのでgulpを使って自動化できないかと思って、前に見た記憶を辿りながらたどり着いたのが gulp.spritesmith ↑これ sprite化したい画像を特定のディレクトリにポコポコ投げ入れて、taskを回すとsprite画像を作成してくれて、sassとかstylusとかlessとかに変数を吐き出してくれる。 こういう便利なものを作成してくれる人には頭が上がらない。 感謝....圧倒的感謝! 使い方 まずはinstall gulp.task('sprite', () =
gulp でJS, CSS, イメージファイルのキャッシュ問題を回避する - Qiita
キャッシュ問題について Web ページの高速化のため、キャッシュを利用して高速化等を行ったりしますが、公開した JS,CSS 等に問題があったときに、それらを修正し、 即座に反映させたいがキャッシュにより、それが反映されないといったことが度々起こります。 これは、キャッシュにより、改めてデプロイした最新の CSS,JS 等が読み込まれ無いことで起こっている現象で、 これを回避するために、Rails であれば Asset Pipeline という機能があり、具体的には読み込む JS, CSS のファイル名にハッシュ値を追加し、デプロイ時にそれを実行することで、読み込む JS, CSS を制御しています。 今回はこれを gulp の task で実現したいと思います。 使用する node_module gulp-rev 各ファイルに対して、ファイル名にハッシュ値を付与するモジュール 変換したフ
gulp-imageminのプラグインによる最適化が機能しない際の対処 - Qiita
gulp-imageminを用いて画像を圧縮させる際に、 pngquantや非可逆圧縮としてmozjpeg等を用いようと思ったが、 圧縮率に反映されない時があったのでメモ 他の記事などを参考にimageminプラグインを追加していたが 同様の質問があり下記で解決されていた https://github.com/sindresorhus/gulp-imagemin/issues/190 追記：下記記事にも既出でした Gulpでpngquantを使ってPNGの減色＆軽量化 うまく行かなかった記述 gulp.task('imagemin', function(){ return gulp.src('src/images/*') .pipe(imagemin({ interlaced: true, progressive: true, optimizationLevel: 5, use: [png
gulp-ejs 2.0.0 で .html ファイルを出力する場合拡張子の指定が必須に - Qiita
2017-09-25 追記: 困っている方が多いようなので README に加筆した Pull Request を出したところ Merge されました。 Node.js のテンプレートエンジン EJS のタスクを gulp で実行する場合 gulp-ejs を利用します。 gulp-ejs の v2.0.0 から出力ファイルのデフォルト拡張子が .html ではなくなりました。指定しない場合、入力ファイルと同じ拡張子で出力されます。 As of v2.0.0 the output file extension is no longer .html by default, you need to specify it, otherwise it will have the same extension of the input file. 指定する場合は以下のようにします。 import e
Gulpで始めるwebpack 4入門 - Qiita
webpackは複数ファイルのJavaScriptファイルやCSS、画像ファイルをモジュールとして取り扱う為の人気のツールです。2018年7月時点の最新バージョンは4.16（いちろく、ではなくじゅうろく）です。 ▲ webpackの公式サイト webpackはJavaScriptのモジュールの取り扱いに特に便利で、機能ごとに分割したJavaScriptをimport()やrequire()を使って読み込めるようになります。ビルドツールGulpと組み合わせれば、大規模なプロジェクトでも見通しのよいタスクを定義可能です。 webpack 4をGulpで使用するには一工夫が必要なので、本エントリーで紹介します。 なお、webpackについて詳しくは記事「最新版で学ぶwebpack 4.8入門 - JavaScriptのモジュールバンドラ - ICS MEDIA」を参照ください。 環境準備 Gul
gulpを使ってsassの@importを解決しつつ差分ビルドをする - Qiita
小さいアプリケーションなら、styleは変更がある度に毎回フルビルドしてしまっても1sもかからないかもしれない。 しかし大きくなって、5s以上かかると非常に苦痛だ。 というわけで差分ビルドしたい。 Sassの差分ビルドで問題になること 差分ビルド自体は簡単で、gulp-cachedとかを使えば、前回と差分があるものだけをビルドできる。 なんだけど、その場合に問題になるのがsassの依存関係(@import)の解決だ。 単純に差分のあったファイルをビルドするだけだと、@import元を辿れない。 そうすると@import元のファイルが変更についてこない。 いや、でもnode-sassのwatchオプションって@import元辿ってるよな、あれってどうなってるんだ？？ と思って実装を見てみたら、sass-graphというnpmを使って辿っていた。 お、これ使えば差分ビルド時に依存関係の解決もで
これからはじめるGulp（6）：gulp-plumberとgulp-notifyを使ったデスクトップ通知
はじめに この記事はGulp.js（全俺） Advent Calendar 2014です。 前回のこれからはじめるGulp（5）：gulp-connectモジュールを使ったLiveReloadでgulp-connectのLiveReload機能を使いファイルの変更に合わせてブラウザをリロードさせることができました。今回はgulp-plumberとgulp-notifyを使ったデスクトップ通知を試してみます。 gulp-plumberについて gulp-plumberはStream中に起こるのエラーが原因でタスクが強制停止することを防止するモジュールです。watch中にエラーが発生するとwatch自体が停止してしまうため、これを防止するために使われています。 gulp-notifyについて gulp-notifyはデスクトップ通知が行えるモジュールです。コマンドラインではエラーに気づきにくい
[SCSS][Gulp]これからはじめるGulp（14）：gulp-cachedプラグインで変更されたSCSSファイルだけを処理させる
はじめに この記事はGulp.js（全俺） Advent Calendar 2014です。 前回のこれからはじめるGulp（13）：gulp-changedプラグインで変更されたファイルだけを処理させるでgulp-changedプラグインを使った画像処理の効率化を試しました。今回はgulp-cachedプラグインを活用しSassタスクの処理を効率化してみます。 gulp-cachedについて gulp-cachedは対象となるファイルをメモリにキャッシュし、変更された分だけを処理させることができます。 gulp-cachedをSassタスクに組み込む gulp-cachedをSassタスクに組み込んでみます。 gulp-cachedのインストール sudo npm install gulp-cached --save-dev Password: gulp-cached@1.0.1 node
[Gulp]これからはじめるGulp（13）：gulp-changedプラグインで変更されたファイルだけを処理させる
はじめに この記事はGulp.js（全俺） Advent Calendar 2014です。 前回のこれからはじめるGulp（12）：gulp-imageminプラグインを使ったJPEG,PNG,GIF,SVGの最適化でgulp-imageminプラグインを試しました。今回は前回のimageminタスクにgulp-changedプラグインを使って更新されたファイルのみ処理できるよう改良してみます。 gulp-changedプラグインについて gulp-changedプラグインはsrcとdestをチェックして変更されたファイルだけをStreamに流します。gulp-changedプラグイン以外にもgulp-cached, gulp-remember, gulp-newerなどのプラグインがありそれぞれの特徴に合わせて活用することで無駄な処理を減らし待機時間を減らすことができます。 gulp-c
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
webpack-with-common-libs/gulpfile.js at master · webpack/webpack-with-common-libs
GitHub - sindresorhus/gulp-rev: Static asset revisioning by appending content hash to filenames: `unicorn.css` → `unicorn-d41d8cd98f.css`
GitHub - floatdrop/gulp-watch: Watch, that actually is an endless stream
HTMLプリプロセッサの出力をjs-beautifyで整形 - Qiita
Slow pug compiling to HTML