コーディングをする時、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でも追加するコメントのテンプレートを予め作成しておけば、ある程度カバーできそうだなぁと思いました。
[参考]
- gulp-clean-css
- gulp-uglify
- gulp-uglifyで特定のコメントを残したままJavaScriptをminifyする - Qiita
- gulp-header
- Moment.js | Home
速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター！
- 作者: 山田祥寛
- 出版社/メーカー: WINGSプロジェクト
- 発売日: 2015/08/28
- メディア: Kindle版
- この商品を含むブログを見る
