ラック
Home > ブログ > 記事 > 2017年6月 > gulpとnpm周りで色々楽をしたい

gulpとnpm周りで色々楽をしたい

カテゴリ: ホームページ,開発環境,テンプレートエンジン

経緯

新しくプロジェクトを開始するときのオレオレフレームワーク(HTMLのベースだったり、Scssのベースだったり、JSのベースだったり…)は、現状基本的にGithubにおいてあります。

しかし、一部「公開したくないソース」が存在する場合があります。いわゆる秘伝のタレ的な。こうしたものは今まで手元に置いておいて、プロジェクト開始時の呪文(git cloneおよびnpm install)とは別に手作業で設置していたのですが、これが面倒だったりしました。かといって、Githubを有料版にしてPrivateリポジトリ作るのもコストがかかりますし…。これをどうにかできないか、というのが課題でした。

最近はWebpackとかもあり、CDN使わなくなっているのですね…ということで、「ライブラリ系も全部まるごと含めて1つのファイルにしてminifyすれば良いのでは?」という考えもありました。それならば、ついでにBootstrapなどのサードパーティ製のフレームワークやライブラリもまるっと一発で持ってこれると楽ですよね、と思って一気に両方やりたくなりました。

そこでいろいろ調べていると

npmはgitなどのリポジトリやローカルパスも指定できるという情報を発見しました。

ということは、先述の秘伝のタレがあっても、どこかローカルや自前Gitサーバなどに置いておいて、package.jsonにそこへのパスを指定してあげれば良いのではないかと。

これで諸々を一括で千知できれば、後はそれをコンパイル時に読み込みに行くようにgulpやScssのパスを指定してあげれば良いのでは…という算段が立ちました。

下調べ

2017/6/9現在、最新バージョンは3.2.1のようです。ところで、Bootstrapは2系でないと動かない…とかバージョン縛りがあったような気がしたのですが

バージョン3.3.7はjQuery3をサポートしたとのことなので、ここについては大丈夫そうです。

npmでの最新も3.3.7ですね。…しかし、

できればHonokaシリーズを使いたいところ。とすると、Bootstrapはnpmのリポジトリではなく、先述のGithubリポジトリを指定するパターンで行けそうです。

easingも1.3がnpmにありますね。

クロスプラットフォームでの游ゴシックのウェイト問題の指定もある(これは最終的に使わなかったですが)。

改造手順

npm周り

サードパーティ製フレームワーク・ライブラリ

まず、サードパーティ製フレームワーク・ライブラリをどうにかします。プロジェクトのpackage.jsonに

  • jQuery本体
  • Honoka(Githubから)
  • jQuery.easing(一度package.jsonで1.3とバージョン指定してnpm install走らせたら0.0.1しかないよ、と怒られたので0.0.1に修正)
  • cross-platform-yu-gothic(一度package.jsonで1.0とバージョン指定してnpm install走らせたら0.1.0か0.1.1しかないよ、と怒られたので0.1.1に修正) → cssなのでScssでインポートできないことが判明。gulp-sassならcssをscssに変換して…というのもできますが、ruby-sass使いで切り替えるのが面倒なのでcssをscssにしたものを秘伝のタレと一緒に読み込ませる方式に変更

を追記。


"devDependencies": {
      "jquery": "^3.2.1",
      "jquery-easing": "^0.0.1",
      "honoka" : "git+https://github.com/windyakin/Honoka#master"
  }

非公開ソース

次に秘伝のタレ。今回は例として「D:\xampp\htdocs\test\_lib」に「own-lib」というディレクトリを作り、その中に必要なソースを突っ込みます。そして、同じ階層にnpmでパッケージとして認識させて読み込めるようにpackage.jsonを作成。なお、package.jsonの書き方は次の2箇所を参考に。

そしてできたのが次のpackage.json


{
  "name": "own-lib",
  "version": "0.0.1",
  "description": "The non-public Library to me.",
  "main": "_file1.scss",
  "scripts": {
    "test": ""
  },
  "repository": {
    "type": "file",
    "url": "file:D:\\xampp\\htdocs\\test\\_lib\\"
  },
  "files": [
    "_file1.scss",
    "_file2.scss"
  ],
  "author": "TestUser",
  "license": "",
  "bugs": {
    "url": ""
  },
  "homepage": ""
}

適当に作った割にはこれで通ったので良しとします。filesには必要なファイルを列挙すること。

あとはこれを読み込むようにプロジェクトのpackage.jsonに追記。


  "devDependencies": {
    "own-lib": "file:///D:\\xampp\\htdocs\\test\\_lib\\own-lib"
  }

ちなみに、ディレクトリはtarとかに固めなくても読み込めました。

一旦これでnpm install --save-devしてERRが出ないことを確認。

これでOKかと思ったのですが、一つ課題が。というのは、HonokaにはBootstrap本体も必要ですがGithubからダウンロードすると同梱されていません(当然ですが)。それだけであればpackage.jsonに追加するだけで済むのですが、Scssコンパイルする際はhonokaディレクトリの下にBootstrap本体がいなければいけません。ついでに、必要・不要に応じて_honoka.scssをいじることもあります。
そのため、npm install直後にHonokaとBootstrapは./src/scss/ディレクトリの中に移動orコピーさせたいわけです。ついでにBracketsからは「brackets-file-tree-exclude」プラグインでnode_modules配下は無視するように設定しているのでnode_modules配下ですと編集できません(3,000個以上のファイルがある場合に警告を発するのを避けるため)。

ということで、Bootstrap3.3.7をpackage.jsonに追加。 → npmの「bootstrap」はlessなので、sass版である「bootstrap-sass」に切り替え。

さらに、ファイル移動とフォルダ作成(/src/scss/assets/bootstrap/honoka/と/src/scss/assets/bootstrap/honoka/bootstrap/を作る)のためにmkdirp, cpxを追加。それらを一括で走らせるnpm-run-allも追加します。 → cpxが動かないのでcopyfilesで代用することにしました。

ディレクトリ階層をきれいにコピペできないので、隙を生じさせない2段構えに…ぐぬぬ…。


  "scripts": {
    "proinit:mkdir": "mkdirp dist src/scss/asset src/scss/asset/honoka src/scss/asset/honoka/honoka src/scss/asset/honoka/honoka/bootstrap src/scss/asset/honoka/honoka/bootstrap/mixins",
    "proinit:honoka1": "copyfiles -f \"./node_modules/Honoka/scss/*.scss\" \"./src/scss/asset/honoka\"",
    "proinit:honoka2": "copyfiles -f \"./node_modules/Honoka/scss/honoka/*.scss\" \"./src/scss/asset/honoka/honoka\"",
    "proinit:bootstrap1": "copyfiles -f \"./node_modules/bootstrap-sass/assets/stylesheets/bootstrap/*.scss\" \"./src/scss/asset/honoka/honoka/bootstrap\"",
    "proinit:bootstrap2": "copyfiles -f \"./node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/*.scss\" \"./src/scss/asset/honoka/honoka/bootstrap/mixins\"",
    "proinit": "npm-run-all -s proinit:mkdir proinit:honoka1 proinit:honoka2 proinit:bootstrap1 proinit:bootstrap2"
  },
  "devDependencies": {
    "copyfiles": "^1.2.0",
    "mkdirp": "^0.5.1",
    "npm-run-all": "^4.0.2"
  }

ここで、Honokaのbootstrap.scssファイルは先頭に「_」が付いていないので、Scssコンパイル時にcssとして生成されてしまうことが判明。これを防ぐためにリネームしたい。


  "scripts": {
    "proinit:mkdir": "mkdirp dist dist/img dist/js dist/css src/scss/assets src/scss/assets/bootstrap src/scss/assets/bootstrap/honoka src/scss/assets/bootstrap/honoka/bootstrap src/scss/assets/bootstrap/honoka/bootstrap/mixins",
    "proinit:honoka1": "copyfiles -f \"./node_modules/Honoka/scss/*.scss\" \"./src/scss/assets/bootstrap\"",
    "proinit:honoka2": "copyfiles -f \"./node_modules/Honoka/scss/honoka/*.scss\" \"./src/scss/assets/bootstrap/honoka\"",
    "proinit:honoka3": "rename-files bootstrap.scss _bootstrap.scss --PATH=./src/scss/assets/bootstrap/",
    "proinit:bootstrap1": "copyfiles -f \"./node_modules/bootstrap-sass/assets/stylesheets/bootstrap/*.scss\" \"./src/scss/assets/bootstrap/honoka/bootstrap\"",
    "proinit:bootstrap2": "copyfiles -f \"./node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/*.scss\" \"./src/scss/assets/bootstrap/honoka/bootstrap/mixins\"",
    "proinit": "npm-run-all -s proinit:mkdir proinit:honoka1 proinit:honoka2 proinit:honoka3 proinit:bootstrap1 proinit:bootstrap2"
  },
  "devDependencies": {
    "rename-files-cli": "^1.0.1"
  }

rename, mvなど、ありそうな名前のパッケージはCLI用ではないので動かせず、探しに探しまくって紆余曲折の果てに「rename-files-cli」というパッケージで実現させました。

これでpackage.jsonにscriptsを追加して、npm scriptを動かすように。これでnpm関連の初めの呪文が一つ増えました。


$ npm install --save-dev
## 必要なパッケージをまるっとインストール
$ npm run proinit
## proinitの名前で定義したスクリプトを実行

proinitの中身ですが、今回は

  • distディレクトリの作成
  • scss下のassetsおよびHonoka・Bootstrap用のディレクトリの作成(mkdirp使用)
  • Honoka・Bootstrapのファイル一式のコピー(copyfiles使用)

をnpm-run-allで実行します。なお、オプションの-sはシーケンスorシリアル、要は書かれた順番に実行する、というもの。宛先ディレクトリ作ってからでないとファイルコピーできないので。

ちなみにディレクトリ作成やファイルコピーのnpm script周りは次のリンク集を参考に。

以上で、npmでまるっと一括ダウンロード・設置が一通りできました!

gulp、Scss

npm周りは完了したものの、jQueryや秘伝のタレのscssなどはnode_modulesの下に移動しました。これに合わせてgulpやscssを変えてあげる必要があります。

Scssはライブラリを読み込んでいる部分のパスの指定を変更してあげるだけです。

次はgulp、つまりgulpfile.js。

ここで、今まではサードパーティ製プラグインと自分の書いたjsを一括で圧縮していましたが、今回からはサードパーティ製プラグインはlib.min.js、自分の書いたコードはapp.min.jsと分ける変更も一緒に加えます。


//パス指定にnode_mocules配下用のassetsを追加
var dir = {
  assets: {
    jquery   : './node_modules/jquery/dist',
    easing   : './node_modules/jquery-easing/dist',
    bootstrap: './node_modules/Honoka/dist/js'
  },
  src: {
    ejs  : './src/ejs',
    scss : './src/scss',
    js   : './src/js',
    img  : './src/img'
  },
  dist: {
    html : './dist',
    css  : './dist/css',
    js   : './dist/js',
    img  : './dist/img'
  }
};

//js圧縮&結合&リネーム
gulp.task("js.concat", function() {
	return gulp.src([dir.assets.jquery + "/jquery.min.js", dir.assets.bootstrap + "/bootstrap.min.js", dir.assets.easing + "/jquery.easing.1.3.umd.min.js"])
		.pipe(plumber())
		.pipe(concat("lib.js"))
		.pipe(gulp.dest(dir.src.js + "/concat/")); //srcとdistを別ディレクトリにしないと、自動でタスクが走る度にconcatしたものも雪だるま式に追加されていく
});
gulp.task("js.uglify", ["js.concat"], function() { //第2引数に先に実行して欲しい js.concat を指定する
	return gulp.src(dir.src.js + "/concat/lib.js")
		.pipe(plumber())
		.pipe(uglify({
			preserveComments: "some" // ! から始まるコメントを残すオプションを追加
		}))
		.pipe(rename(dir.dist.js + "/lib.min.js"))  // 出力するファイル名を変更
		.pipe(gulp.dest("./"));
});
gulp.task("js.uglify.app", function() {
	return gulp.src(dir.src.js + "/index.js")
		.pipe(plumber())
		.pipe(uglify({
			preserveComments: "some"
		}))
		.pipe(rename(dir.dist.js + "/app.min.js"))
		.pipe(gulp.dest("./"));
});
//上記をまとめておく
gulp.task("js", ["js.concat", "js.uglify", "js.uglify.app"]);

こんな感じの変更を加えました。

テスト・コミット・プッシュ

あとはこれで一通り最初からやって動くか確認し、OKだったのでgitでコミット。最後にリモートリポジトリにpushして今回の作業は一段落しました。ふいー、やったぜ。

タグ: css,javascript,bootstrap,Sass(Scss),Brackets,gulp,ejs,Github,Node.js

 



関連する記事一覧