フロントエンドのお仕事として、HTMLやCSS、JavaScript のコーディング回りを行っていると、以前に比べてやらなければならないことが増えてきていました。そのため、細々した作業でも、自動化して効率よく開発をすすめないと、時間がかかってしまうことが多いです。 そんなときに活用できるのが、今回使い方を紹介する gulp です。 gulp.js このエントリーでは、gulp が使えるように、gulp とはどういうものなのかの簡単な説明から、導入の基礎部分までを書いておきます。コピペでしか使ったことがない！という人や、誰かのコピペに頼って使っていたような人も、今後の活用していくための参考に利用してもらえたら嬉しいです。 gulp とは？ gulp.js は Node.js 製の毎回行うような作業を自動化してくれるツールです。よく様々なサイトでタスクランナーとして紹介されていますが、正確には
こんにちは。マークアップのMikaです。 前回、「Foundation 5 のSass版のセットアップについて」お話しましたが、Sass/Compassのバージョンを指定するためにBundlerを使いました。バージョンを指定できるので、環境構築にはとっても便利なBundlerですが、compassのコンパイルにイチイチ「bundle exec compass w」って打たなきゃいけなくて、これちょっと面倒だなぁﾊｧ━(-д-；)━ｧと。 ということで、今回は「タスクランナー」を使ってコーディング⇔ブラウザ確認のもろもろを自動化しちゃいましょう！ タスクランナーって何？ ざっくりと言うと、コーディングしてからブラウザで表示するまでにやりたいこと（タスク）をスクリプトにして書いておくと、まとめてやってくれる便利なものです。例えば、 Sass/Compassのコンパイル CSSのベンダーpref
はじめに もはやgulpのコードなんて巷にあふれているかと思いますが、 個人的によく使うものをスニペットとしてまとめてみました。 現在私は中小規模の静的サイト、いわゆる普通のコーポレートサイトや動的サイトのモックなどを制作することが多く今回はそういったシンプルな案件で、よく使っているものになります。 対象となるかもしれない方 個人的なメモではありますが、まだまだ不慣れな方にも役立つかもと思い投稿しました。 私が独学でタスクランナーの勉強を始めた時に一番困ったのが、やりたいことに対してオーバースペックな情報が多く（最低限理解して）実際に動作させるまでに、かなり時間が掛かってしまったことでした。 これらのスニペットでとりあえず動作はするかとは思いますので、__色々と試すきっかけ__にでもなれば幸いです。 gulpのインストールや基本的な使い方は、既に良い記事がたくさんありますのでここでは割愛し
オリジナルのアイコンフォントを作成する やりたいこと 自分で作ったアイコンを一つのフォント化する。 以降、アイコンを追加したい際は、ファイルを追加してビルドすればOK 使ったもの gulp gulp-iconfont 本当はgulpにも依存したくないけど… 自分のSVG作成時のルール gulp-iconfontのレポジトリに詳しく乗っているので、よく読む。 ツール Sketch3を使う Sketch3で作成する際のテンプレートがあるので活用する symbol-font-14px.sketchをベースにしました。 サイズ 500px以上の高さで作ること 基本的に幅と高さ560pxのSVGファイルを作成する テンプレートのサイズ感をそのまま継承 アイコン本体は480pxの正方形に収まるようにする カラー 黒色(#000000)のベタ塗り 試しにSketch3で作ってみた感じ 作成したsvgから
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。 この記事で学べること イマドキのGulpの導入手順 Gulp 5に対応した書き方 Sassサスの導入手順 GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では現場で使われている方法を紹介します。Gulpの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。本記事は最新版に対応させているので、安心して読み進めてください。 ※この記事では、Node.js v18〜v20で動作検証をしています。 ※Gulp
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
