タグ

npmに関するsimamikiiiのブックマーク (7)

  • npm5から導入された package-lock.jsonについて - kakts-log

    先日npm5がリリースされました。同時期にリリースされたNode.js v8.0.0にもバンドルされており、 複数ある新機能のうち、package-lock.jsonについて気になったので家のドキュメントの内容を読んでまとめました。 docs.npmjs.com package-lock.jsonについて package-lock.json はnode_modules配下やpackage.jsonに変更があった際に自動で作成・変更されるファイルです。 具体的には、 npm install npm update npm uninstallなど、パッケージに変更が加えられるタイミングで作成・変更されます。 このファイルはpackage.jsonなどのように、リポジトリのソースの一部として組み込まれるように設計され、様々な目的のために利用されます。 package-lock.jsonを導入する

    npm5から導入された package-lock.jsonについて - kakts-log
  • webpackやGulpを使う時に覚えて幸せになったnpmの便利な使い方 - Qiita

    昨今のweb開発で必要なwebpackGulpといった技術は、Node.jsのパッケージ管理ツール「npm」を通して使われます。npmの機能は豊富で、覚えておくと便利な使い方がいくつもあります。とくにオススメのものをピックアップしました。 npm initには-yをつけると質問が表示されない npmのモジュールを用いたプロジェクトを作成する際、最初に使用するコマンドはnpm initです。実行すると、プロジェクト名や著作権の設定の質問が表示され、必要な項目を入力したり、Yes([Enter]キー)を入力する必要があります。 とくに設定が不要な場合、-yオプションを指定することで、質問を表示することなく初期化できます。 次に示すのは、npm initとnpm init -y実行後のコマンドラインの差です。npm initはnameやversionといった設定を対話形式で尋ねられますが、np

    webpackやGulpを使う時に覚えて幸せになったnpmの便利な使い方 - Qiita
  • 2016年、僕のおすすめgulpプラグイン | gulp | Horic Design

    公開アップルップル社内勉強会 Vol.20 公開アップルップル社内勉強会 2016-01-18(月)19:30 - 21:00 社内の勉強会を一般の皆さんに公開しています。 毎月第3月曜日に開催して、今回で20回目になります。 発表は質疑応答を含め20-30分程度ですが、実際の発表... gulpはみなさんご存知ですよね?ファイルを圧縮したり結合したりするときに便利なやつです。今回は2016年にどんなプラグインを使っていこうか考え、整理してみました。 今回は、以下の4つの項目に分けて、自分のおすすめのプラグインを紹介します。 ユーティリティ CSS JavaScript HTML ユーティリティ browser-sync ファイル等の保存時に、ブラウザーをリロードする際に利用します。例えばCSSを変更した際にわざわざブラウザをリロードする手間を省きます 使用例)CSSファイルを保存した際に

    2016年、僕のおすすめgulpプラグイン | gulp | Horic Design
  • CSS最適化から圧縮までできる「gulp-pleeease」 | ブログ - Blog | 佐藤純平 - Jumpei Sato

    はじめに CSSのベンダープレフィックスの付与はいちいちやると面倒ですよね。必要ないのも書いてしまっていたり。。 今回はそんな問題を解決してくれる、「gulp-pleeease」の紹介です。 gulp-pleeeaseとは タスクランナーGulpのプラグインのひとつです。 Sassの使用から、CSSのベンダープレフィックスの付与、圧縮、メディアクエリを一つにまとめる等、使えるオプションが豊富なのが魅力です。 まずインストール 「Node.js」、「Sass」はインストール済みの想定で進めます。 ディレクトリで下記のコマンドを入力します。 なお、下記のコマンドはMac用です。 「package.json」の作成 npm initgulp」のインストール sudo npm install --save-dev gulpgulp-pleeease」のインストール sudo npm ins

    CSS最適化から圧縮までできる「gulp-pleeease」 | ブログ - Blog | 佐藤純平 - Jumpei Sato
  • 古くなったgulpのdevDependenciesを一気に更新する方法

    1年前に作ったgulpのタスクを久々に触ったら、package.jsonにあるdevDependenciesがかなり古くなっていました。そこで、これらを一気にアップデートする方法を探していたら、やっぱりありました。 npm-check-updates というツールが。 このツールを使うと、package.jsonにあるdevDependenciesのバージョンと最新のものを比較して見せてくれます。そして、コマンドを叩くだけで、古くなったすべてのdevDependenciesをアップデートしてくれます。 やり方は簡単で、まずはnpm-check-updatesをインストール: % npm install npm-check-updates -g npm-check-updatesを走らせる: % ncu すると以下のように古くなっているものを教えてくれます: % ncu gulp-newer

    古くなったgulpのdevDependenciesを一気に更新する方法
  • npm とか bower とか一体何なんだよ!Javascript 界隈の文脈を理解しよう - Qiita

    背景 Javascript で Web アプリを作ろうとすると、よくわからないことだらけで超混乱します。 npm と bower の違いは? npm はサーバーサイド用、bower はクライアントサイド用らしいよ えっ、でもなんで bower のインストールに npm が必要なの? サーバーサイドは Rails で書きたいから npm 要らないと思うんだけど・・・ ていうかサーバーサイドJSとか node.js って何? よく見る browserify って何? こういった疑問が沸き上がるのは、各ツールが生まれた文脈がよくわかっていないからです。いろいろ調べてやっとちょっとわかってきたのでメモします。間違いがあったらご指摘ください。 「CommonJS」誕生 - Javascript は汎用プログラミング言語へ その昔、Javascript 大好きおじさんは言いました。 Javascrip

    npm とか bower とか一体何なんだよ!Javascript 界隈の文脈を理解しよう - Qiita
  • Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。 Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。 Gruntとの比較 Gruntと比較してのメリット・デメリットは以下のようになります。 メリット Gruntより設定ファイルが記述しやすい StreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコ デメリット 記述がよりNodeに近くなるため、複雑なことは敷居がやや高め プラグイン開発のためのドキュメントが少ない 今日のゴール Gulp.jsを使ってコーディング作業を10倍速くする! そんな環境を作りたいと思います。 1. Node.jsをインストール まずはNode.jsをインストールしましょう。 Node.js http://nodejs

    Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 1