linuxBean14.04(122)NetBeans8.1でSyntaxHighlighter v4のビルド

linuxBean14.04(120)NetBeans Connector Plugin for Chromeを参考にlinuxBean14.04(113)SyntaxHighlighter v4のビルドをNetBeans8.1でやります。

前の関連記事：linuxBean14.04(121)Yahoo!ニュースの映像ニュースの動画をFirefoxで見る方法

NetBeans8.1のHTML/JSオプションの設定

linuxBean14.04(117)NetBeans8.1でnvmのNode.jsを使うための工夫の通りにします。

NetBeans8.1はHTML5/JavaScript版をインストールしました。

次にupdate-alternativesでnpmパッケージのシンボリックリンクを作成します。

Node.jsはlinuxBean14.04(9)node.jsとBracketsのインストールのnvmでインストールしたものを使います。

stableバージョンを新たに設定してみます。

pq@pq-VirtualBox:~$ nvm install stable
Downloading https://nodejs.org/dist/v6.3.0/node-v6.3.0-linux-x86.tar.xz...
######################################################################## 100.0%
Now using node v6.3.0 (npm v3.10.3)

v6.3.0がインストールされました。

次にNetBeans8.1のHTML/JSのオプションに設定するnpmパッケージをグローバルインストールします。

npm install express-generator -g
npm install bower -g
npm install node-sass -g
npm install less -g
npm install grunt-cli -g
npm install gulp-cli -g
npm install karma -g


インストールを完了するとインストールしたパッケージのシンボリックリンクが~/.nvm/versions/node/v6.3.0/binに作成されています。

この~/.nvm/versions/node/v6.3.0/binへのシンボリックリンクをupdate-alternativesで~/.nvm/node_binに作成します。

sudo update-alternatives --install ~/.nvm/node_bin node_bin  ~/.nvm/versions/node/v6.3.0/bin 60300

優先度はnodeのバージョンに合わせて60300にしました。

pq@pq-VirtualBox:~$ sudo update-alternatives --install ~/.nvm/node_bin node_bin  ~/.nvm/versions/node/v6.3.0/bin 60300
[sudo] password for pq: 
update-alternatives: /home/pq/.nvm/node_bin (node_bin) を提供するために 自動モード で /home/pq/.nvm/versions/node/v6.3.0/bin を使います

これで~/.nvm/node_binで~/.nvm/versions/node/v6.3.0/binにあるnpmパッケージへのシンボリックリンクにアクセスできるようになります。

すでに以下の設定がしてあればこれでnode v6.3.0への切り替えは完了です。

これらのシンボリックをさらに/usr/local/binにシンボリックを作成しますがこれは1回だけでよいのですでにやったことがあれば設定不要です。

sudo update-alternatives --install /usr/local/bin/node node  ~/.nvm/node_bin/node 10 --slave /usr/local/bin/npm npm ~/.nvm/node_bin/npm --slave /usr/local/bin/express express ~/.nvm/node_bin/express --slave /usr/local/bin/bower bower ~/.nvm/node_bin/bower --slave /usr/local/bin/node-sass node-sass ~/.nvm/node_bin/node-sass --slave /usr/local/bin/lessc lessc ~/.nvm/node_bin/lessc --slave /usr/local/bin/grunt grunt ~/.nvm/node_bin/grunt --slave /usr/local/bin/gulp gulp ~/.nvm/node_bin/gulp --slave /usr/local/bin/karma karma ~/.nvm/node_bin/karma

これで例えばbowerであれば
/usr/local/bin/bower
→~/.nvm/node_bin/bower
→~/.nvm/versions/node/v6.3.0/bin/bower
→~/.nvm/versions/node/v6.3.0/lib/node_modules/bower/bin/bower
というようにリンクをたどることになります。

nodeのバージョンを切り替えたときに張り替え直さないといけないシンボリックリンクは2番目の~/.nvm/node_bin/bower→~/.nvm/versions/node/v6.3.0/bin/bowerのリンクだけでよいことになります。

つまりnodeのバージョンを切り替えるときはnode_binのシンボリックを作り直すだけで済みます。

NetBeans8.1のHTML/JSのオプションの設定もnodeのバージョンを切り替えるたびに設定し直す必要はありません。

NetBeans8.1からツール→オプション。

HTML/JSボタンをクリック。

/usr/local/binへ作成した各パッケージへのシンボリックリンクを設定します。

これも既に設定してあればnodeのバージョンを切り替えても再設定不要です。

NetBeans8.1にSyntaxHighlighter v4のGitHubリポジトリをクローンする

syntaxhighlighter/syntaxhighlighter: SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript.にあるgitリポジトリをクローンします。

NetBeans8.1のメニュー、チーム→Git→クローン。

すでにGitリポジトリのプロジェクトを開いた状態ではこのメニュー項目はでてこないのでプロジェクトを閉じるか、プロジェクトタブからファイルタブに切り替えます。

今回はプロジェクトをすべて閉じた状態で行いました。


https://github.com/syntaxhighlighter/syntaxhighlighter.git

リポジトリURLにこれを入力するとクローン先は自動的に入力されます。

「次>」「次>」「終了」をクリックしていくとクローンされます。

プロジェクトフォルダのsyntaxhighlighterを右クリック→プロパティ。


サイト・ルート・フォルダ、ソース・フォルダ、単体テスト・フォルダを設定してOK。

npmパッケージのインストール

プロジェクトを右クリック→npmインストール。

結構時間がかかります。

出力されるログはlinuxBean14.04(113)SyntaxHighlighter v４のビルドでやったときと似たようなものです。

NetBeans8.1はgulpfile.babel.jsは理解できないようなのでTerminalからGulpタスクを実行する

NewAndNoteworthyNB81 - NetBeans Wiki

プロジェクトの重要なファイルにgulpfileが入っているとプロジェクトを右クリックしたときのメニューにGulp Tasksがでてくるようですが、gulpfile.babel.jsは重要なファイルに含まれずそのタスクはメニューには出てきません。

ということでTerminalで~/NetBeansProjects/syntaxhighlighterに移動し./node_modules/.bin/gulp setup-projectを実行しました。

cd ~/NetBeansProjects/syntaxhighlighter
./node_modules/.bin/gulp setup-project

これで~/NetBeansProjects/syntaxhighlighter/reposフォルダに必要なファイルがダウンロードされます。

SyntaxHighlighter v４をビルドする

package.jsonのscriptsに"build": "gulp build --brushes all"が設定されているのですべてのブラシを含めてデフォルトテーマを使うのならsyntaxhighlgihterのプロジェクトを右クリック→npmスクリプト→buildでビルドできます、、、

ところが./src/core.jsのビルドに失敗します。

cd ~/NetBeansProjects/syntaxhighlighter
./node_modules/.bin/gulp build --brushes=all --theme=emacs

Terminalでこのようにしても同様に失敗するのでNetBeans8.1のせいではないようです、、、

と思いましたがlinuxBean14.04(113)SyntaxHighlighter v４のビルドと同様にTerminalで実行すると問題なくビルドできるのでソースの問題ではないようです。

と、Terminalログをみてみると先ほどの./node_modules/.bin/gulp setup-projectでシンボリックリンクの作成がされていませんでした。

もう一度./node_modules/.bin/gulp setup-projectを実行するとうまくいきました。

package.jsonのscriptsのbuildタスクにはテーマが設定されていないのでpackage.jsonのbuildタスクをgulp build --brushes=all --theme=emacsに書き換えました。

NetBeans ConnectorでChromiumと連動させてindex.htmlの要素をソースと対応させる

Chromiumのメニューボタンから、その他のツール→拡張機能、他の拡張機能を見る。

「NetBeans Connector」で検索してでてきたNetBeans Connectorをインストールします。


ブラウザをChromiumを選択して実行ボタンをクリックするとChromiumが起動してサイト・ルート・フォルダのindex.htmlが開きます。


New Features in NetBeans Connector Plugin for Chrome - YouTube

あとはこのビデオと同じようなことができます。


ChromiumのNetBeansのアイコンをクリックしてInspect in NetBeans ModeにチェックをつけるとChromiumとNetBeansのhtml要素が連動してハイライトされます。

NetBeansでSyntaxHighlighterをブレークする

linuxBean14.04(113)SyntaxHighlighter v４のビルドと同様にindex.htmlにブレークポイントを設定します。

<script>
 syntaxhighlighterConfig = {
   'auto-links': false
 };
</script>

index.htmlの9行目にConfigurationの設定を挿入してそこにNetBeansでブレークポイントを設定しました。


あとは実行ボタンを押すとそこでブレークされました。

gulpfile.babel.jsのデバッグはどうする？

そもそもやりたかったことはgulpfile.babel.jsのブレークなのですがそれはどうしましょう。

gulpfileを粛々とデバッグする方法 - Qiitaを参考にやってみましたがうまくいきませんでした。うまくいきました。

まずnode-inspectorをグローバルインストールします。

npm install -g node-inspector

pq@pq-VirtualBox:~$ nvm current
v6.3.0
pq@pq-VirtualBox:~$ npm install -g node-inspector

gulpfile.babel.jsがあるディレクトリに移動してnode-debugをしてみました。

cd ~/NetBeansProjects/syntaxhighlighter
node-debug gulpfile.babel.js

syntaxhighlighter.jsを圧縮する

distフォルダに出力されるsyntaxhighlighter.jsはデフォルトでは圧縮されていません。


圧縮するにはbuildフォルダ内のbundle.jsを編集します。

    plugins: [
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin({ comments: false }),
      new webpack.BannerPlugin(banner),
      new webpack.SourceMapDevToolPlugin({
        filename: 'syntaxhighlighter.js.map',
        append: '\n//# sourceMappingURL=[url]',
      }),

110行目のコメントアウトを外します。

あとはsyntaxhighlgihterのプロジェクトを右クリック→npmスクリプト→buildでビルドすれば、distフォルダ内のsyntaxhighlighter.jsが圧縮されています。

参考にしたサイト

syntaxhighlighter/syntaxhighlighter: SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript.
SyntaxHighlighter v4のGitHubリポジトリ。

NewAndNoteworthyNB81 - NetBeans Wiki
NetBeans8.1からGulpがサポートされましたがgulpfile.babel.jsは認識されませんでした。

New Features in NetBeans Connector Plugin for Chrome - YouTube
NetBeans Connectorの使い方ビデオ。

gulpfileを粛々とデバッグする方法 - Qiita
node-inspectorを使うとブラウザでデバッグできるようです。

次の関連記事:linuxBean14.04(123)SyntaxHighlighter v4のブラシを作成する