毎回プロジェクト作るたびに同じことやってるので、備忘録的に書いとく。

とりあえず、scssやjs圧縮のために導入することがほとんどなので、そこだけにしか言及しないZE。

Gulp - 公式ヘルプ | PhpStorm

プロジェクトにnode.js導入

Alt+f12でコンソールを出し、「npm init」で設定ファイルをつくっておく。npmコマンドのたびにワーニングが入るので、避けられる。

エンター連打！

npm init

Gulp導入

引き続きコマンド。

npm install gulp --save-dev

プロジェクトに導入するのでsave-dev。

必要なのを導入。

私用テンプレ。

npm install gulp-sass gulp-minify-css gulp-rename gulp-sourcemaps gulp-watch gulp-plumber babel/core@^7.0.0  gulp-uglify gulp-concat --save-dev

sass, minify, rename, sourcemaps, watch,plumber, babel, uglify, concat を入れてる。

gulpfile.jsをつくって記述していく。

あとはもうgulpfile.jsをつくって記述していく。

これまた私用テンプレ。

var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var sourcemaps = require("gulp-sourcemaps");
var watch = require('gulp-watch');
var plumber = require('gulp-plumber');

var base_path = "publics/hogehoge/";

gulp.task("sass", done => {
    gulp.src(base_path + "scss/*.scss")
        .pipe(plumber())
        .pipe(sourcemaps.init()) //sassの前に.init()する
        .pipe(sass())
        .pipe(gulp.dest(base_path))
        .pipe(rename({extname: '.min.css'})) // ファイル名を変える
        .pipe(minifyCss({advanced: false})) // minifyする
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(base_path));
    done()
});

var babel = require('gulp-babel'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat');
var js_files = ['base'];

gulp.task('js', function (done) {
    js_files.forEach(function (js_file) {
        gulp.src(base_path + "concat_js/" + js_file + '/*.js')
            .pipe(plumber())
            .pipe(sourcemaps.init()) //sassの前に.init()する
            .pipe(concat(js_file + '.js'))
            .pipe(babel())
            .pipe(gulp.dest(base_path + 'js/'))
            .pipe(uglify())
            .pipe(rename({extname: '.min.js'}))
            .pipe(sourcemaps.write('./'))
            .pipe(gulp.dest(base_path + 'js/'));
    });
    done();
});


gulp.task('watch', function () {
    gulp.watch(base_path + "scss/*.scss", gulp.parallel('sass'));
    gulp.watch(base_path + "concat_js/*/*.js", gulp.parallel('js'));
});

base_path で設定したディレクトリのscssを生成、jsはディレクトリごとに小分けして、それを結合する。復数のjsに分けて生成したい場合にディレクトリ指定で同じことをforEachで回していくスタイル。

みなさん、MetaMaskはお使いでしょうか？
すごい便利なのですがニーモニックでのインポートが出来ないんですよね。
とある Ethereum のアカウントを移行しようと思ったときに少し困ったのでメモです。

実装

早速ですが以下のライブラリを使用しました。
https://github.com/justinchou/ethereum-mnemonic-privatekey-utils

まずはクローンしてきて、必要なライブラリをインストールしていきます。

$ git clone https://github.com/justinchou/ethereum-mnemonic-privatekey-utils.git
$ cd /ethereum-mnemonic-privatekey-utils
$ npm install

続いてコードを書いていきます。
と言いたいところですが、すでにサンプルがあるのでそれを利用しましょう。
サンプルファイルの名前は demo.js になります。

demo.js

const pkutils = require('./index');

pkutils.debug = false;

const mnemonic = 'this is your mnemonic words do not show this words other people';
const password = 'this is a totally long password';

console.log('mnemonic               : %s', mnemonic);
console.log('password               : %s', password);

const privateKeyGen = pkutils.getPrivateKeyFromMnemonic(mnemonic);
console.log('pkey from mnemonic     : 0x%s', privateKeyGen);

const keystore = pkutils.getKeystoreFromPrivateKey(privateKeyGen, password);
console.log('\nkey store              : %j\n', keystore);

const privateKeyParsed = pkutils.getPrivateKeyFromKeystore(keystore, password);
console.log('pkey from keystore     : 0x%s', privateKeyParsed);

const account = keystore.address;
console.log('account address        : 0x%s', account);

mnemonicにはご自分のニーモニックを入力してください。
試しにこのスクリプトを実行すると以下のような出力になると思います。

$ node demo.js
mnemonic               : this is your mnemonic words do not show this words other people
password               : this is a totally long password
pkey from mnemonic     : 0x1a50c342ee19eeed0d29dad2f9d37ff06690b7e6fd764e23de94296ec02074fc

key store              : {"address":"d0c53d7d802fbcf5a8162b0ebf1e6aca66202e33","crypto":{"cipher":"aes-128-ctr","ciphertext":"ece9cb20184c907916e61c66b8070569bec61f0c92ed9f33eda9303066906b52","cipherparams":{"iv":"fe93ca7db03671a77849fb5926727bed"},"mac":"be432d8e2b21ce619b97dee0073281c8ffd1e451e661b4e3f61fbad1f3316a3d","kdf":"pbkdf2","kdfparams":{"c":262144,"dklen":32,"prf":"hmac-sha256","salt":"65b7e9eabeb6db63ed4193b4e863d2ce1e826f66ac8394c198f570a5c26be9af"}},"id":"38812fce-3ff8-4a84-b135-fe2b120785ef","version":3}

pkey from keystore     : 0x1a50c342ee19eeed0d29dad2f9d37ff06690b7e6fd764e23de94296ec02074fc
account address        : 0xd0c53d7d802fbcf5a8162b0ebf1e6aca66202e33

この中の pkey from mnemonic が秘密鍵となりますので、後はMetaMaskに突っ込むだけですね！