webmanab.html
タスクランナーの gulp.js を利用して、画像の圧縮をコマンドひとつで自動化します。2018年版ということで、Node.js の v9.4.0 を利用する現時点の最新な環境でのはなしです。Node.js は nodebrew でバージョン管理しつつインストールしてください。 Yarn がインストールされていることも前提とします。 nodebrewでnode.jsのバージョン管理をする -『front-end』 – webmanab.html／ウェブまなぶ ファイルを用意する 以下のようなディレクトリ構造でファイルを用意します。 ├── dist ├── src ├── package.json └── gulpfile.babel.js src 以下のディレクトリに圧縮前の画像、 dist に圧縮後の画像が保存されることになります。 必要なパッケージをインストール 圧縮に必要なパッケー
npm scriptsで画像圧縮を自動化した際の課題と検討事項 - LCL Engineers' Blog
フロントエンドエンジニアの岡田です。 LCLではフロントエンドエンジニアがマークアップも担当しており、画像の圧縮もエンジニアが行っています。 画像圧縮、面倒ですよね。。 いままでいくつか自動化を試しましたが、どれも長くは続きませんでした。 【画像圧縮作業の変遷】 Webpackでimagemin導入 ↓ 突然動かなくなりTinyPNGで圧縮してしのぐ ↓ 面倒なのでMacのAutomator＆フォルダアクションで設定 （こちらの記事を参考にさせていただきました） ↓ メンバーが増えると共有できず… 結局TinyPNGを使う 画像が圧縮されているかは、GitHubのプルリクエストでは確認しにくいこともあり、どうにかして自動化したいと思っていました。 そこへ同じチームのメンバーからLIGさんの記事を教えていただき試してみまして、本格運用することになりました。 liginc.co.jp 本格運用
【デザイナー向け】どうしてもgulp、npm、sass、pugを操作しなければならない人への説明書
1.はじめに デザイナーさん、以下のような事態に困ったご経験はないでしょうか。 「画像の差し替え・削除・追加が発生して、ちょっと直したいけど、どこを編集すればいいかわからない」 「文言修正が入った。エンジニアさんに振るまでの量でもないので自分で直したいが、どこを編集すればいいかわからない」 「フォルダによくわからないファイルがたくさんある。いじるのが怖い。」 近頃のweb開発環境は複雑化し、gulpやwebpack・npmなど、デザイナーにとってはよくわからない単語が増えてきました。 このようなツールを駆使してフロントエンド環境を構築しているエンジニアにとって、作業は効率化されましたが、逆にデザイナーにとってはどんどん敷居が高くなっていると思います。 本投稿では、そんな環境下でもなんとなくイマドキの用語を軽く理解して、ちょこっとの編集作業ができるようになることを目標にします。 ゴール gu
超簡単！imageminで画像圧縮のタスクを作ってみる【拡張子全部乗せ2018】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのザワです。 この夏、いい思い出はつくれていますか？ そうでもない？ でも、嫌な思い出は全部圧縮しちゃえばいいじゃない！ ということで、今回はフロントエンドのパフォーマンスを考える上で避けては通れない、画像圧縮のタスクを作ってみたいと思います。 「作る」と言っても、公開されているnpmパッケージを組み合わせて画像圧縮タスクを作っていくかたちになります。出来合いの惣菜を組み合わせて、簡単にお弁当を作るイメージですね。記述量も短く、すぐにできてしまうためにちょっと不安になりますが（これで本当にうまく動いているのかな、ってね）、惣菜だってレンジでチンするだけで美味しく食べれるんだから、理屈としては充分でしょう。 ちなみに「画像圧縮しよう」と心に決めた場合、npm scriptsだったり、ツールを使ったり、など選択肢はたくさんあります。 我が社が誇るスーパーフル
Gulpを導入しよう - Qiita
インストール手順 1 node.jsをインストール まずはnode.jsが必要なのでインストールする。下記サイトを参考にしてインストールした。 npm(node package managerの略。nodeのパッケージ管理ツールという認識)も導入される。 http://www.hirooooo-lab.com/entry/development/install-node 2 Gulpの導入 参考サイト - https://liginc.co.jp/web/tutorial/117900 - https://h2ham.net/gulp-basic 2-1 pacakge.json生成 pacakge.jsonとはnpmのパッケージファイルを管理するjsonフォーマット。まずはこちらを生成する。 1.gulpを導入したいプロジェクトのディレクトリに移動 2.移動したらpackage.json
絶対つまずかないGulp入門。インストールからSassのコンパイルまで – ICS MEDIA
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。 この記事で学べること イマドキのGulpの導入手順 Gulp 4に対応した書き方 Sassサスの導入手順 GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では現場で使われている方法を紹介します。Gulpの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。本記事は最新版に対応させているので、安心して読み進めてください。 ※この記事では、Node.js v18とv19で動作検証をしています。 ※Sass
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://blog.mismithportfolio.com/web/20150822gulp-intro