gulpで処理したファイルの先頭に任意の文字列などを挿入することができるプラグイン「gulp-header」を利用して、CSSの先頭にcharsetを記述したり、JavaScriptの先頭にライセンス情報を記述したりする方法を紹介します。

CSSの先頭に@charset "UTF-8";を記述する

gulpでSassを使用するために「gulp-sass」というプラグインを利用している人も多いと思うのですが、その際にSCSSファイルなどで先頭に@charset "UTF-8";と記述していても、コンパイルするとcharsetが消えてしまうという現象があります。

ただ、この現象は必ず起きるということでもないようで、調べてみるとファイル内にマルチバイト文字がある場合はそのままコンパイル後のファイルにもcharsetが記述されたままになっており、逆にファイル内にマルチバイト文字がない場合はたとえSCSSファイルでcharsetを記述していたとしてもコンパイル後に削除されてしまいます。
また、むしろcharsetを記述しなかった場合、ファイル内にマルチバイト文字がない場合はそのままcharsetがないものが出力されますが、ファイル内にマルチバイト文字があると自動でコンパイル後ファイルの先頭に@charset "UTF-8";が記述されるという動きになります。
（gulp-sass Ver 3.0.0で検証）

普段font-familyでヒラギノやメイリオのように日本語表記で指定していたり、頻繁にCSS内で日本語を用いてコメントを残している場合は恐らくcharsetが記述された状態で出力されると思いますが、そうではない場合で例えば「CSSの先頭に必ずcharsetを記述すること」みたいなレギュレーションがあるなど、このcharsetが消えてしまう現象が困るというときは、以下のように「gulp-header」を利用することでひとまず解決できます。

プラグインのインストール

「gulp」や「gulp-sass」は既にインストール済みという想定で、まずは下記をコマンドに入力して「gulp-header」プラグインをインストールします。

$ npm i -D gulp-header

タスクの記述

次にタスクに記述していきます。
ここではgulpfile.jsに記述する形で紹介するので、ファイル分割をしている場合などは該当のファイルに記述してください。

gulpfile.js
var gulp = require( 'gulp' ),
    sass = require( 'gulp-sass' ),    header = require( 'gulp-header' );

gulp.task('css', function() {
  return gulp.src('./src/scss/**/*.scss')
    .pipe(sass())
    .pipe(header('@charset "UTF-8";\n\n'))    .pipe(gulp.dest('./public/css/'));
});

上記コードはもともと/src/scss内にあるSCSSファイルをコンパイルして/public/cssに出力するというタスクですが、そこへハイライト表示しているgulp-headerに関する記述を追記します。
今回は@charset "UTF-8";という文字列を改行付きで挿入したいのでheader('@charset "UTF-8";\n\n')とし、それをgulp.dest()前に記述します。

上記記述後、このサンプルタスクの場合は$ gulp cssを実行すれば、もしSCSSファイルにマルチバイト文字がなかったとしても出力されたCSSファイルの先頭に@charset "UTF-8";が記述されているのを確認できます。

1点注意点としては、これは先述したようにあくまでマルチバイト文字がない場合の対策となるので、もしその後日本語のコメントを入れたりとかしてそのままこのタスクを利用すると@charset "UTF-8";が二重で出力されてしまいます。
なので、その場合はここで追加したgulp-headerに関する記述を削除するかコメントアウトするなどしましょう。

JavaScriptファイルの先頭にライセンス情報を記述する

プラグインページのUsageにもサンプルコードが紹介されていますが、「gulp-header」を利用してJavaScriptファイルの先頭にライブラリ名・バージョン・ライセンスといった情報を記述する方法です。

プラグインのインストール

「gulp」は既にインストール済みという想定で、まずは下記をコマンドに入力して「gulp-header」プラグインをインストールします。

$ npm i -D gulp-header

タスクの記述

次にタスクに記述していきます。
ここではgulpfile.jsに記述する形で紹介するので、ファイル分割をしている場合などは該当のファイルに記述してください。

gulpfile.js
var gulp = require( 'gulp' ),
    header = require( 'gulp-header' );
var banner = [  '/*',  ' Library Name',  ' Library Description',  '',  ' Version: 1.0.0',  '  Author: xxx',  ' License: MIT',  ' Website: http://example.github.io/example',  '  Issues: http://example.github.io/example/issues',  '*/',  ''].join('\n');
gulp.task('js', function() {
  return gulp.src('./src/js/**/*.js')
    .pipe(header(banner))    .pipe(gulp.dest('./public/js/'));
});

上記コードはもともと/src/js/内にあるJSファイルを/public/jsに出力するというタスクですが、そこへハイライト表示しているgulp-headerに関する記述を追記します。
予めbannerに挿入したい内容を記述しておき、それをgulp.dest()前にheader(banner)として記述することでbannerの内容を挿入後にファイルを出力してくれます。

上記記述後にサンプルとして/src/js/に適当なJSファイルを作成しておき、その後このサンプルタスクの場合は$ gulp jsを実行して/public/js内の該当ファイルを確認すると、下記のような感じでbannerの内容が記述されているのを確認できます。

example.js
/*
 Library Name
 Library Description

 Version: 1.0.0
  Author: xxx
 License: MIT
 Website: http://example.github.io/example
  Issues: http://example.github.io/example/issues
*/

package.jsonの情報を使用する

上で紹介した方法だとbannerの内容は自分で記述していくものでしたが、以下のようにpackage.jsonの情報を使用してライセンス情報を挿入するということもできます。

gulpfile.js
var gulp = require( 'gulp' ),
    header = require( 'gulp-header' );
var pkg = require( './package.json' );var banner = [  '/*',  ' * <%= pkg.name %> - <%= pkg.description %>',  ' * @version v<%= pkg.version %>',  ' * @link <%= pkg.homepage %>',  ' * @license <%= pkg.license %>',  ' */',  ''].join('\n');
gulp.task('js', function() {
  return gulp.src('./src/js/**/*.js')
    .pipe(header(banner, { pkg : pkg } ))    .pipe(gulp.dest('./public/js/'));
});

上記記述後、先ほどと同じようにサンプルとして/src/jsに適当なJSファイルを作成しておき、その後$ gulp jsを実行して/public/js内の該当ファイルを確認するとbannerの内容が記述されているのを確認でき、その際出力されている内容がpackage.jsonに書かれているnameやdescriptionの内容と同じなのを確認できると思います。