かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Gulp min化したJS・CSSに自動でコメントを入れたい

f:id:kikiki-kiki:20161129005159p:plain コーディングをする時、Gulpでコンパイル&min化をしています。
min化したコードにコメントでバージョン情報とか、元のライセンス情報を入れたいケースとかがあります。

javascript

ライブラリなどのライセンス情報で/*!で始まるコメントの場合はgulp-uglifyのオプションでmin化する際に残すことができるみたいです。

var gulp = require('gulp'),
    rename = require('gulp-rename'),
    // console.logを削除するパッケージ
    stripDebug = require("gulp-strip-debug"),
    // jsをmin化するパッケージ
    uglify = require("gulp-uglify");

gulp.task('js. minify', function(cb) {
  return gulp.src( FILE_PATH )
    .pipe( stripDebug() )
    .pipe( uglify({
      // このオプションを使うと/*! */のコメントは残る
      preserveComments: 'some'
    }) )
    .pipe( rename({
      extname: '.min.js'
    }) )
    .pipe( gulp.dest( DEST_DIR ) );
});
/*! License */

↑ この/*!で始まる形式でないコメントは消えてしまうので、違う形式でライセンスが書かれているファイルはライセンスのコメントを残すことができないので注意が必要。

CSS

いつもCSSのmin化につかっているgulp-clean-cssでは特定の形式のコメントを残す方法が無さそうでした…
ライセンス情報を残すオプションのある良い感じのライブラリがあれば教えてください。

ファイルの先頭にテキストを追加できるパッケージを使う


gulp-header を利用すればJS, CSSに関わらず好きなコメントをファイルの先頭に追加できるようです。
min化したファイルに最後にバージョン情報や最終更新日時を追加するのに良さそうです。

ex: min化したCSSにpackage.jsonに書かれている情報を元にコメントを追加する

var gulp = require("gulp"),
    rename = require('gulp-rename'),
    header = require('gulp-header'),
    cssminify = require('gulp-clean-css'),
    // 日付を簡単にフォーマットできるパッケージ
    moment = require('moment');

// package.jsonを読み込む
var pkg = require('./package.json');
// CSSに追加するテキスト
var banner = ['/**',
    ' * <%= pkg.name %>',
    ' * @version <%= pkg.version %>',
    ' * @author <%= pkg.author %>',
    ' * @lastmodified <%= today %>',
    ' */',
    ''].join('\n');


gulp.task('css.minify', function(cb) {
  var versionDate = moment().format('YYYY-MM-DD');

  return gulp.src( FILE_PATH )
    .pipe( cssminify() )
    .pipe( rename({
      extname: '.min.css'
    }) )
    .pipe( header(banner, {
      pkg: pkg,
       today: versionDate
     }) )
    .pipe( gulp.dest( DEST_DIR ) );
});

gulp css.minifyでタスクを実行すると、min化されたCSSファイルの先頭に下記のようなコメントが追加されます。

/**
 * PROJECT-NAME
 * @version 1.0.0
 * @author KiKiKi_KiKi
 * @lastmodified 2016-11-29
 */

 

完璧にライブラリなどに書かれたライセンス情報のコメントを自動的に残す方法は達成できませんでしたが、JSではuglifyのオプションを利用すればそれなりに上手く行きそうな気がします。
また、gulp-headerを使えばプロジェクトの情報などを動的に追加することができるので、CSSでも追加するコメントのテンプレートを予め作成しておけば、ある程度カバーできそうだなぁと思いました。


[参考]

速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター!

速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター!