Gulp 始めてみましたのメモ – 1 – 導入からCompass
Gulp 始めてみましたのメモ – 2 – CSSをminify
の続き。
JavaScriptをconcat, minify, sourcemap
複数のファイルを結合し minify します。
gulp-uglify を使う
"use strict"; var gulp = require( 'gulp' ); var plumber = require( 'gulp-plumber' ); var size = require('gulp-size'); var sourcemaps = require('gulp-sourcemaps'); var uglify = require( 'gulp-uglify' ); var rename = require( 'gulp-rename' ); gulp.task( 'script-uglify', function () { return gulp.src( [ 'SORUCE_DIR/example1.js', 'SORUCE_DIR/example2.js', 'SORUCE_DIR/example3.js', 'SORUCE_DIR/example4.js', 'SORUCE_DIR/example5.js' ], { base: 'SORUCE_DIR' } ) .pipe( sourcemaps.init() ) .pipe( concat('example.concat.js') ) .pipe( gulp.dest( 'CONCAT_DIR' ) ) .pipe( uglify( { preserveComments: 'some' } ) ) .pipe( rename( 'example.min.js' ) ) .pipe( sourcemaps.write( './', { sourceRoot: 'SORUCE_DIR' } ) ) .pipe( gulp.dest( 'PROJECT_DIR/js' ) ); } ); |
sourcemaps.init()- example1.js ~ example5.js を結合し CONCAT_DIR へ
example.concat.jsと保存します。 - 一部コメントを残し minify します。
- ‘PROJECT_DIR/js’ へ
example.min.jsと example.min.js.map を保存します。
gulp-uglify
option へ preserveComments: ‘some’ とすることで一部のコメントを残すことができます。
Preserve comments that start with a bang (!) or include a Closure Compiler directive (@preserve, @license, @cc_on)
/*! で始まるコメント。
Google Closure Compiler が残すコメント、
コメント内に @preserve, @license, @cc_on が入っている場合。
gulp-sourcemaps
gulp-sourcemaps
sourcemaps.init() ~ sourcemaps.write() の間に対象のプラグインを pipe します。
gulp-sourcemaps が対応しているプラグインは wiki で確認できます。
gulp-uglifyjs
gulp-uglifyjs
concat, rename, uglify, source map が一度にできる優れものです。
"use strict"; var gulp = require( 'gulp' ); var uglifyjs = require( 'gulp-uglifyjs' ); gulp.task( 'script-uglifyjs', function () { return gulp.src( [ 'SORUCE_DIR/example1.js', 'SORUCE_DIR/example2.js', 'SORUCE_DIR/example3.js', 'SORUCE_DIR/example4.js', 'SORUCE_DIR/example5.js' ], { base: 'SORUCE_DIR' } ) .pipe( uglifyjs( 'example.min.js', { outSourceMap: false } ) ) .pipe( gulp.dest( 'PROJECT_DIR/js' ) ); } ); |
＊source mapを正しく出力させることができませんでした。
sourceRoot の設定が悪いと思うのですが、解決できませんでした。
source mapが必要ないリリース用をビルドする時に使用しました。
gulp-uglify の preserveComments: ‘some’ に該当する option プロパティを見つけられずコメントは全て削除されました。
LICENCE.txt を作成し minify 済み JS ファイルと concat しました。
YUIDoc
JavaScript Document 作成はもともと YUIDoc を使っています。
Document も YUIDoc 形式にしているのでそのまま使おうと考えました。
YUIDoc 自体も npm プラグインとして配布されています。
shell が走れば良いかなとかんがえました。
"use strict"; var gulp = require( 'gulp' ); var shell = require( 'gulp-shell' ); gulp.task( 'script-docs', function () { return gulp.src( 'JS_SOURCE_DIR' ) .pipe( shell( [ 'yuidoc ' + 'JS_SOURCE_DIR' ], { cwd: 'JS_SOURCE_DIR' } ) ); } ); |
JS_SOURCE_DIR へ yuidoc.json を配置しています。
gulp-shell
A handy command line interface for gulp
gulp から shell command をたたたけて便利。
【追記】
gulp-shell は blacklist に入ってました。
https://github.com/gulpjs/plugins/blob/master/src/blackList.json
promotes anti-patterns, use gulp-exec or child_process
なので使わないのが幸せそうでした。
gulp-yuidoc
gulp-yuidoc
gulp プラグインにも yuidoc がありました。
こちらだと .pipe でつなげられて便利かも。
今度使ってみよう…