イナヅマTVログ

Gulp 始めてみましたのメモ – 3 – JavaScriptをconcat, minify, source mapとYUIDoc

| 0件のコメント

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' ) );
} );
  1. sourcemaps.init()
  2. example1.js ~ example5.js を結合し CONCAT_DIR へ example.concat.js と保存します。
  3. 一部コメントを残し minify します。
  4. ‘PROJECT_DIR/js’ へ example.min.js と example.min.js.map を保存します。

gulp-uglify

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

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 でつなげられて便利かも。
今度使ってみよう…

コメントを残す

必須欄は * がついています