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
に記述する形で紹介するので、ファイル分割をしている場合などは該当のファイルに記述してください。
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
に記述する形で紹介するので、ファイル分割をしている場合などは該当のファイルに記述してください。
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
の内容が記述されているのを確認できます。
/*
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
の情報を使用してライセンス情報を挿入するということもできます。
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
の内容と同じなのを確認できると思います。