ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。 この記事で学べること イマドキのGulpの導入手順 Gulp 5に対応した書き方 Sassサスの導入手順 GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では現場で使われている方法を紹介します。Gulpの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。本記事は最新版に対応させているので、安心して読み進めてください。 ※この記事では、Node.js v18〜v20で動作検証をしています。 ※Gulp
こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ) 今回は、現行サービスのCSSをリファクタリングした話とどんな影響があったかをまとめたいと思います。 もくじ 経緯とか 実際にした5つのこと まとめ 経緯とか 開発期間約9ヶ月、リリースして1年の現行サービスのCSSが大変なことになっていたので リファクタリングすることにしました。 ちなみにリファクタリングとは、 ソフトウェア開発では、ソースコードの作成が進むにつれて、中途での設計変更やバグフィックスなどでプログラムは冗長で汚いものとなっていくことが多い。これらの問題点を解決し、将来の仕様変更に柔軟に対応できるようソースコードの手直しを行うことを「リファクタリング」という。 リファクタリングとは｜refactoring - 意味/解説/説明/定義 ： IT用語辞典 ということのようです。 問題点は大きくわけて2つ。 1. コーディン
はじめに 「今かよ」って話なんですが、急遽はじめた一人アドベントカレンダーでどの日に何を書くか構成がきまっていなかったので考えてみた。 12/01：bundler, rbenv, nodebrewでGulp環境を作ってみる 12/02：gulp-sassを使ってSCSSをコンパイルするタスクを作ってみる 12/03：watchで変更を監視する 12/04：gulp-plumberでエラー時のwatchを解除させない 12/05：gulp-connectでWebサーバーとライブリロード 12/06：gulp-load-pluginsでプラグインの一括読み込み 12/07：gulp-ruby-sassでSassオプションの指定（bourbon, neat, bittersのロード） 12/08：頻繁に使いそうなモジュールを試す：JS,CSS圧縮系 12/09：頻繁に使いそうなモジュールを試す：
![[Gulp]これからはじめるGulp（0）：アドベントカレンダースケジュール](https://cdn-ak-scissors.b.st-hatena.com/image/square/a519b05d0dd24aa4392f3feeff2ef68d0c0adcdf/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttp%2Fwhiskers.nukos.kitchen%2Fassets%2Fimages%2Fogp.png)
こんにちは！スタッフのめぐみです。 今回は私が Web 制作の際に使用している gulp というビルドシステムの紹介をしたいと思います。 タイトルの通り gulp を試してみよう！ということで、用意したサンプルを使って実際に手を動かしながら記事を読み進めてみてください。 ※ この記事では sass (ver 3.1 以上)がすでにインストールされているものとして話を進めますので、ご留意下さい。 gulp とは gulp は Node.js をベースにした、 Sass のコンパイルや js ファイルの結合・圧縮などを自動化してくれるビルドシステム(ツール)です。同じようなものに Grunt があり、タスクの記述の仕方が違いますができることはほとんど同じです。gulp の場合、必要なタスクはgulpfile.jsに記述します。 ちなみに、 Node.js についての説明は割愛します。以下の記事
マーズナレッジ主催、OSSカフェマスターの河村さんによるgulpの勉強会、「Gulp.jsで飼いならす、最新フロントエンドツールの使い方」に参加してきました！ 現在、Webの制作界隈にはエンジニア方面からデザイナー方面に向かって猛スピードでやってくる自動化の波。 GruntだったりYOMANだったり、タスクランナーとプラグインによって、自動化できるものを自動化することでワークフローも改善できるよね。 といったところで、河村さんの制作環境を中心に、gulpを紹介していただきました。 gulpを全力で使うと、後ろから見ている人には魔法に見える 本当にすごい。使っている他のアプリケーションによる効果も大きいのですが、エディタでいじっていると保存するそばからブラウザでの表示が変わっていく。デザインに使っているグラフィックソフトでファイルを保存するとスライスも切り直さずに表示が変わっている・・・。
詳しくは上記連載を見てもらえば分かりますが、GruntとはJavaScriptを使用してWeb開発に伴うさまざまな作業を自動化して効率良く行うためのビルドツールです。 このツールでは「タスク」と呼ばれる一連の処理を設定ファイルに記述していきます。Gruntの設定ファイル（Gruntfile.js）は、タスクに対してJSON形式でパラメーターを指定していくのですが、ここで少々問題があります。 シンプルなタスクであれば分かりやすいのですが、多くの拡張機能（プラグイン）を使用したり、タスクの制御を細かく行う必要が生じたたりした場合、Gruntfileの記述量が増えて冗長になり、タスク同士の関連やタスク実行結果も分かりにくくなってしまいます。 そんなGruntの問題点を解消することを目的として開発されたのが、今回紹介する「gulp.js」（以下、gulp）です。 gulpはGruntを継承しつつ、
2014/9/12に行われた週末ランサーズでのGulpハンズオンで使用したスライドです。 LIGブログでこの内容をさらにまとめています。 http://liginc.co.jp/web/tutorial/117900
Deciding on a technology is always hard. You don’t want to make commitments you won’t be able to back out of, but eventually you’ll have to make a choice and go for something that does what you need it to do. Committing to a build technology is no different in this regard: it’s an important choice and you should treat it as such. Let’s take Grunt for example. Grunt has a healthy community around i
最近、Gruntからgulpに切り替え始めている人が増えている気がします。この数ヶ月でいろんなブログなんかでも導入記事が増えてるようですが、ひとつ言っておきますと「数ヶ月前の記事は鵜呑みにしてはいけない（というか、そのままだと動かないこともありうる）」かな〜、なんて。 あれがどうしたこうしたと質問を受けたりするんですが、いろんな人がはまってる原因はそこら辺にある気がしてならないのですよね。そんなわけで、ちょっとその辺の話をまとめておこうかと立ち上がった次第です。 ※この記事は2014年7月30日時点のものですので、数ヶ月後にコレを読んでる方はご注意を。 アップデートの頻度が高いので… こういったツールのアップデート頻度は高いものですが、gulpのバージョンアップ頻度もまぁまぁで現在の最新版は「v3.8.6」になっています。プラグインを使えばあらゆる機能を追加することができますが、そういった
タスクランナーgulp入門 gulpはGruntと同じように様々なタスクを自動化してくれるツール(タスクランナー)です。 node.jsで開発されており、Sass/CompassやLess、StylusなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。 Gruntとできることはほとんど同じですが、Gruntよりタスクの流れがわかりやすく、JavaScript(node.js)で独自のタスクも簡単に記述することができます。 後発ということもありGruntよりプラグイン数は少ないですが、マニアックなタスク以外はそろっているので通常のWeb制作などでは問題なく利用できるでしょう。 node.jsのインストール node.jsが必要ですのでインストールしていない方はインストールしましょう。 公式サイトでインスト
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
