gulpで何かしらのタスクを実行後などにgulp.dest()する際、ディレクトリ・ファイル構成をそのまま維持して出力させる指定方法の備忘録です。 サンプルのディレクトリ・ファイル構成と実装したい動きについて ここで紹介しているものは下記のようなファイル構成のものを使用していると想定します。 また、動きとしてはgulp.dest()使用時にこの構成のまま/distに出力する（/srcが/distになる感じ）というものになります。 └─ /src ├─ index.html ├─ /css │ └─ style.css ├─ /js │ └─ script.js └─ /images ├─ img_01.jpg ├─ img_02.jpg └─ img_03.jpg /**/*で指定 手っ取り早くディレクトリ・ファイル構成を維持しつつすべてをgulp.dest()したいときは、下記のようにg

フロントエンド開発において、もはや必須となってしまった開発環境Gulp。 今更ながらGulpの魅力について書き留めておきます。 Gulpでできること プラグインを追加し、タスクを登録していくことで、様々な処理を同時並行で自動化することができます。 僕がコーディングの際によく使うのは主に4つ 1. Sassのコンパイル 2. CSS3ベンダープレフィックスの自動挿入 3. 画像の圧縮 4. BrowserSyncによるライブリロード 中でも4のライブリロードは重宝してます。 その他、HTML、CSS、JSの圧縮など何でもできちゃいます。 ではまずGulpを動かすための環境構築から解説していきます。 Gulp環境構築 GulpはNode.jsのインストールが前提となるので、公式サイトからインストールしましょう。 インストールが完了したらターミナル（コマンドプロンプト）でバージョン確認。 nod

Sassのコンパイルや画像の最適化、ブラウザーのリロードなど、面倒な作業を自動化できるタスクランナー。WordPressテーマの開発でも威力を発揮しそうです。設定が面倒でしょ？ と思っていた人も、これをきっかけにはじめてみたら？ Webサイトのコードは複雑化する一途で、繰り返しの作業が生じるのがごく当たり前になっています。しかし、世の中にはより優れた、効果的な開発プロセスがあるはずです。 このチュートリアルでは、Gulpを使ってWordPressのテーマ作成を自動化する方法と、ワークフローの自動化でテーマ作成のプロセスを改善する方法を紹介します。 なぜワークフローの自動化が必要なのか ワークフローを最適化することは、開発プロセスにおいて非常に有益で、取り組む価値があります。その理由をいくつか挙げます。 カスタムツールで、繰り返しの多い、つまらないタスクをすべて省ける ほかの重要なコアとなる

はじめに 前回のこれからはじめるGulp：bundler, rbenv, nodebrewでGulp環境を作ってみる #1でGulp自体を動かすことができたので今回はgulp-sassを使ってSCSSファイルをCSSにコンパイルするタスクを作ってみます。 gulp-sassについて gulp-sassはSassのGulpプラグインです。gulp-sassはnode-sassを使っています。代わりにgulp-ruby-sassを使うことRuby版のSassを使うことができます。 ディレクトリとサンプルSCSS 先に必要なディレクトリとサンプル用のSCSSファイルを作っておきます。 src, destディレクトリを作る ソースとなるSCSSファイルはsrcディレクトリに、コンパイル後のCSSはprod(dist)ディレクトリとします。これは一例なのでディレクトリ名は好みに合わせて作ってください

こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ) 去年の11月辺りから、メインマシンがWinからMacに変わりました。 Winちゃんもサブマシンとして頑張ってくれています。主に検証に使用していますが、、、 メインマシンの交代を機にgulpを導入したので、方法やら所感やらをちょこちょことまとめていきます。 今回は、簡単なタスクを登録して動かすところまで。 その２で、ファイルの監視や同期処理などを覗いていきたいと思います。 もくじ タスクランナーってなに？ Gruntとgulp 必要なものを準備する タスクを書いて、実行しよう まとめ タスクランナーってなに？ メインマシンがOSごと変わったので、自分の開発環境を整理・再整備する際に （´-）.｡oO（いっちょ最近流行りのタスクランナーでも入れてみようかね…） と思い立った次第です。 大学時代のトラウマから黒い画面はあまり好きではない

BrowserSyncって何？ テキストエディターでHTML,CSS,JavaScriptのコードを編集して、結果を確認するのにWebブラウザーにフォーカスを移してF5で更新して…… というWeb開発のワークフローを簡素化するプログラムです。 BrowserSyncはファイルの変更を監視して、変更を即座にブラウザーに反映させることができます。 しかもCSSファイルの編集はページの再読み込みをすることなく反映されます。 複数ブラウザーを立ち上げていてもOK！モバイルブラウザーも自動で同期します！ テキストエディター上での作業に集中することができるので、作業効率が劇的に向上します。これを使わない理由はありません！！ インストール方法 Node.jsをインストール BrowserSyncはNode.jsで動くので、まずNode.jsをインストールします。 Node.jsのサイトからインストーラー

minimatch っていうのは Grunt や gulp.js その他あちこちで（npm もらしい）使われてるグロブマッチライブラリです。最近よく gulp を使ってるんだけど、毎回 gulp.src() の書き方で迷ってしまう。調べた結果 minimatch に行き当たったんだけど各種 glob 実装のドキュメント読んで把握しろ、という感じでよく分からなかったので早見表を作った次第です。 https://github.com/motemen/minimatch-cheat-sheet 確認用にテストを書いていて、そのテストケースからドキュメントを生成してるので間違いはないはずです。説明が間違ってる、この例も乗せた方が見やすいだろ、とかあればプルリクください。 折角なので日本語版を書いておきますね。 基本 * はパスセパレータを含まない任意の文字列にマッチ ** はパスセパレータを含む任

設計・実装を高速化！フロントエンド開発を自動化する「gulp.js」 CSS2014年11月15日 フロントエンド開発の際に今となっては不可欠である、ビルドツール「gulp.js」の導入手順についてご紹介いたします。 gulp.jsとは？ 「Node.js」というjavascriptを利用して実装されたビルドシステムです。 ビルドツールを導入することで、フロントエンド設計時に行う様々なタスクを自動化・高速化することができます。 今後、フロントエンドエンジニアとして生き残るにはビルドツールの習得が不可欠となりますので、今のうちに身に付けておくことをお勧めします。 ※既に募集要項に必須スキルとして掲載している制作会社もあります gulp.jsを導入することで便利になること gulp.jsを導入することで、以下のような設計／実装時に発生する様々なタスクを自動化することが可能になります。 Sass

はじめに この記事は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はデスクトップ通知が行えるモジュールです。コマンドラインではエラーに気づきにくい

gulp-sassで自動でSass/SCSSからcssファイルを生成する - 人生リアルタイムアタック の続き。完全上位互換のつもり。 前回は gulp-sass の導入だけだったので、この記事では gulp / Sass (SCSS) 周り全般について述べたい。 構成 以下のディレクトリ構成を例にする。 ./test ├── css │   └── // cssファイルの生成先 └── assets │ └── sass │ └── **/*.scss └── index.html Node.jsは LTSのv4.4.5 がインストール済みで、$ npmコマンドが利用可能になっている前提。 package.jsonをつくる 最初に、Node.jsのパッケージ管理ファイルであるpackage.jsonを生成する。 package.jsonはコマンドで生成できる。 $ npm init -y

フロントエンドのお仕事として、HTMLやCSS、JavaScript のコーディング回りを行っていると、以前に比べてやらなければならないことが増えてきていました。そのため、細々した作業でも、自動化して効率よく開発をすすめないと、時間がかかってしまうことが多いです。 そんなときに活用できるのが、今回使い方を紹介する gulp です。 gulp.js このエントリーでは、gulp が使えるように、gulp とはどういうものなのかの簡単な説明から、導入の基礎部分までを書いておきます。コピペでしか使ったことがない！という人や、誰かのコピペに頼って使っていたような人も、今後の活用していくための参考に利用してもらえたら嬉しいです。 gulp とは？ gulp.js は Node.js 製の毎回行うような作業を自動化してくれるツールです。よく様々なサイトでタスクランナーとして紹介されていますが、正確には

gulpから黒画面のコマンドを叩いて実行 gruntでlivereloadxを実行ってのはあったけど、gulpはなかったので載せてみた。 var gulp = require('gulp'), exec = require('child_process').exec; gulp.task('livereloadx', function(){ exec('livereloadx -s -p 8000'); }); gulp.task('livereloadx', ['livereloadx']); 最低限必要な記述。 node.js,livereloadx,gulpは別途コマンドラインでインストールしておいてください。 child_processを使うことで、gulpから黒画面のコマンドを叩いて実行させることが出来ます。 gulpfile.jsが存在するディレクトリでlivereloadxコ

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

今までSassやEJS、watchを試してきましたが、今回はそれ以外の便利そうなプラグインを色々インストールして試してみます。 今までのまとめ 今までやったことを簡単にまとめてみます。 作業ディレクトリに移動。 cd 作業ディレクトリ名 プロジェクトファイルの作成。 npm init Gulp.jsをローカルにインストール。 npm install gulp@3.8.11 --save-dev Sassのインストール。 npm install gulp-sass --save-dev EJSのインストール。 npm install gulp-ejs --save-dev gulp-plumberのインストール。 npm install gulp-plumber --save-dev gulpfile.jsファイルを作成し、以下のように記述。 var gulp = require('gulp

HTML・CSS・JS 周りを含むプロジェクトを進める際に、これまでなら MAMP などのローカルでのサーバー環境を用意して進めていたのですが、 grunt や gulp などが出てきてからは、それらをベースに BrowserSync などを利用して開発を進めるようになりました。 毎回準備する手間が省けるのと、デプロイ場所をいろいろと変更してもひとまとめで扱うことができるため、今では無くてはならないツールになっています。 BrowserSync 導入gulp を使うことを前提に導入の方法をざっくり。 Node と gulp はすでに導入済みとして進めます。 最低限ブラウザに表示させることを前提に、以下の package 構成にします。 package.json gulp は npm のグローバルでインストールされているなら、必ず必要というわけではないですが、一応入れておきます。 尚、 br

gulp-watch + gulp-notify + browser-sync で開発効率アップを図る - Gulp で作る Web フロントエンド開発環境 #2 wakamsha 前回の記事では Gulp を使って SCSS (Sass) をコンパイルしたり Bourbon フレームワークを使えるようにするタスクを作成しました。今回はそれを元に以下のパッケージを導入して開発効率のアップを図りたいと思います。 gulp-watch gulp-plumber gulp-notify browser-sync サンプルコードはこちらからどうぞ。 wakamsha/try_gulp gulp.watch でファイルの更新を監視してタスクを実行 SCSS ファイルを編集して保存したタイミングでコンパイルタスクを実行するようにします。といっても Grunt と違って Gulp にはgulp.watc

2015年2月5日 Web業界なんでも勉強会（第2回）にてプレゼンさせていただいた、「Webデザイナーが使うバージョン管理ツール」セッションの内容です。