Gulpでタスクの対象外にしたいファイルやディレクトリを指定する

Web制作の決まりきったものを自動化するのにとても便利なGulpですが、ときにはあるディレクトリの中のディレクトリやファイルを対象外としてタスクを処理したいといったことがあります。

  • Sprite用の画像置き場として作っていた「_sprite/」ディレクトリを除外して納品用のファイルを作りたい
  • Jadeでインクルード用のために作っていたディレクトリを除外してコンパイルしたい

上のような例でJadeで「_inc」ディレクトリを除外する場合には、次のようにタスクに書きます。

JavaScriptの場合

var gulp = require('gulp');
var jade = require('gulp-jade');

gulp.task('jade', function() {
	gulp.src(['_jade/**/*.jade', '!_jade/_inc/*.jade'])
	.pipe(jade({
		pretty: true
	}))
	.pipe(gulp.dest('./dest/'));
});

CoffeeScriptの場合

gulp = require 'gulp';
jade = require 'gulp-jade';

gulp.task 'jade', ->
    gulp.src ['_jade/**/*.jade','!_jade/_inc/*.jade']
    .pipe jade
        pretty: true
    .pipe gulp.dest('./dest/')
    return

具体的にはsrcでソースファイルを指定する箇所に、除外したいディレクトリを指定する前に「!」のエクスクラメーションマークを置くだけです。

gulp-ignoreというパッケージもあるようですが、省きたいのはごく一部といったときは、こちらのほうが簡単で楽です。

Webフォントで文字化けしたときのよくある原因と対処法

ずいぶんと久しぶりの投稿です。最近仕事でFont AwesomeGLYPHICONなどでアイコンなどでWebフォントを使う機会が増えてきました。

ですが、いざ人に確認してもらうと、Webフォントが文字化けして豆腐文字になってしまっていたり、謎の文字が出てきてしまったりと色んなケースで失敗してます。

今日は実際にやってみて文字化けした例を紹介します。

ロゴデザインを学ぼうと思って読んだ本に「プロとしての生き方」を教わった話

_DSC4543.jpg

Webデザインは他の媒体デザインからも学べることが多々ありますね。今回は僕が実際に「ロゴデザイン・ラブ」という本を読んで、これだけは押さえておきたいなと感じたポイントを紹介します。

AcrobatやAdobe Readerで自動繰り返し再生するスライドを作る

先日はPowerPointKeynoteで自動再生するスライドショーをの作り方を紹介しましたが、投影するPCによってはPowerPointが入っていなかったり、Windowsマシンを使わざるを得ない場合があります。

そんなときに便利なのがどちらのOSもサポートしていてインストールされている可能性が非常に高いPDFで自動再生する方法がおすすめです。

| 1/144ページ | >>