読者です 読者をやめる 読者になる 読者になる

Corredor

ウェブ、プログラミングの勉強メモ。

Npm-Run-All で複数の npm-scripts を実行・OS 環境に関わらず rm -rf する

前回の記事で、npm-scripts を使った CSS の圧縮処理を紹介した。 neos21.hatenablog.com 今回は、この npm-scripts をさらに便利なものにするパッケージを2つ紹介する。 複数のタスクを一括実行したい そもそもぼくが今回 npm-scripts で CSS を圧縮したい…

Gulp を使わずに npm-scripts を使う・npm-scripts から Clean-CSS-CLI を呼んで CSS を圧縮する

前回の記事で、clean-css-cli というコマンドラインツールを使って CSS を圧縮するコマンドを書いた。 neos21.hatenablog.com 今回は、npm run で任意のワンライナーを実行できる、いわゆる npm-scripts を使って、Clean-CSS-CLI を呼び出して CSS を圧縮さ…

CSS を Minify (圧縮) する npm パッケージの Clean-CSS をコマンドラインで利用する「Clean-CSS-CLI」

CSS を圧縮する npm パッケージには色々あり、Gulp プラグインも色々ある。 いくつか比較して、今回は clean-css というパッケージを使おうと思ったが、どうやら最近コマンドラインツール部分と API 部分が分離されたらしく、まともな日本語文献がなかったの…

Babel を試す環境に Gulp-Plumber を入れて自動ビルドに備える

前回の記事で、Babel を使って ES2015 の記法で書いたファイルを ES5 の記法に直す環境ができた。 neos21.hatenablog.com 今回はこのトランスパイルを、ファイルが更新されたときに自動的に行うようにしたい。 Browserify とか Watchify とか これらはある一…

Babel にリベンジ!ES2015 ってやつを勉強する環境を作るぜ!

ここんとこ職場では Windows バッチと VBScript をいじる生活で npm とか gulp とか言わせたいんじゃ~というフラストレーションが溜まっていたので、npm とか gulp とかする。 前にいじりかけていたけど放置していた Babel に手を出して、ES2015 とやらを試…

Gulp で Browser-Sync を動かしてブラウザにリアルタイムに変更を反映させる

前回の記事はコレ。 neos21.hatenablog.com 前回の記事で、Browserify を使って JavaScript ファイルをガッチャンコする Gulp タスクを作った。動作確認には Http-Server というパッケージを使っていたが、JavaScript のビルドは毎度 gulp build-js (自作タ…

npm list って見づらくね?依存パッケージを表示させずにインストールしたライブラリ一覧を見る方法

インストールしたライブラリを一覧表示する npm list、エイリアスで書くと npm ls だが、そのライブラリが依存しているパッケージが階層表示されるので、見づらい。それを解消する方法。 npm ls --depth=0 コレでドウゾ。 --depth= で表示する深さを指定でき…

Bower を試してみる

Bower は、フロントエンドライブラリのパッケージ管理ツール。簡単に言えば、ブラウザ上で使うライブラリを手軽にインストールできるシロモノ。 「インストール」というと、ぼくはなんだかどうしても、Windows ソフトのインストーラのようなレジストリを書き…

npm でパッケージ管理しながら Gulp で Browserify を実行させて http-server で動作確認を行う

JavaScript ライブラリを色々使ってみようぜってことで、Node.js がお送りする npm でパッケージを管理しながら、Gulp を使って Browserify を試してみようという。そんで動作確認には http-server というお手軽なウェブサーバーを使う。 一連の作業は Mac O…