タグ付けされた質問 「gruntjs」

Gruntは、JavaScriptプロジェクト用のタスクベースのコマンドラインビルドツールおよびタスクランナーです。

8
NPM対Bower対Browserify対Gulp対Grunt対Webpack
最も人気のあるJavaScriptパッケージマネージャー、バンドラー、タスクランナーに関する私の知識を要約しようとしています。私が間違っている場合は修正してください: npm&bowerはパッケージマネージャーです。依存関係をダウンロードするだけで、自分でプロジェクトを構築する方法がわかりません。彼らは何を知っていることは呼び出すことですwebpack/ gulp/ gruntすべての依存関係を取得した後。 bowerに似てnpmいますが、フラット化された依存関係ツリーを構築します(npm再帰的に行うのとは異なります)。意味npmが、(数回同じフェッチすることができる)、各依存性をフェッチに依存関係をbower手動でサブ依存性を含むことを期待。時々bower、npmフロントエンドとバックエンドでそれぞれ一緒に使用されます(フロントエンドで各メガバイトが重要になる場合があるため)。 gruntおよびgulp自動化することができる自動化、すべてのタスクランナー(すなわち、コンパイルCSS /サス、最適化画像は、バンドルを作成し、縮小化/ transpileこと)です。 grunt対gulp(maven対、gradleまたは構成対コード)。Gruntは、個別の独立したタスクの構成に基づいており、各タスクはファイルを開いたり、処理したり、閉じたりします。Gulpは必要なコード量が少なく、Nodeストリームに基づいているため、パイプチェーンを構築して(同じファイルを再度開くことなく)高速化できます。 webpack(webpack-dev-server)-私にとっては、すべてのJS / CSSウォッチャーを忘れることができる変更のホットリロードを備えたタスクランナーです。 npm/ bower+プラグインはタスクランナーを置き換える場合があります。それらの機能は交差することが多いため、gulp/ grunt以上のnpmプラグインを使用する必要がある場合は、さまざまな影響があります。しかし、タスクランナーは複雑なタスクに適しています(たとえば、「ビルドごとに、バンドルを作成し、ES6からES5にトランスパイルし、すべてのブラウザーエミュレーターで実行し、スクリーンショットを作成し、ftp経由でドロップボックスにデプロイします」)。 browserifyブラウザのノードモジュールをパッケージ化できます。browserify対nodeさんはrequire、実際にあるCommonJS対AMD。 質問: webpack&とはwebpack-dev-server?公式ドキュメントには、それがモジュールバンドラーであると記載されていますが、私にとってはそれは単なるタスクランナーです。違いは何ですか? どこで使用しbrowserifyますか?node / ES6インポートでも同じことはできませんか? するときは、使用するgulp/ grunt上npm+プラグイン? 組み合わせを使用する必要がある場合は例を提供してください
1886 gruntjs  npm  gulp  bower  webpack 

2
Grunt、NPM、Bowerの違い(package.jsonとbower.json)
私はnpmとbowerを初めて使用し、emberjsで最初のアプリを作成します:)。 Railsについては少し経験があるので、依存関係をリストするためのファイル(Bundler Gemfileなど)の考え方に精通しています。 質問:パッケージを追加したい(そして依存関係をgitにチェックインしたい)場合、それはどこに属しpackage.jsonていbower.jsonますか-どこに属しますか? 私が収集したものから、 実行bower installするとパッケージがフェッチされて/vendorディレクトリに配置され、 実行npm installするとパッケージがフェッチされて/node_modulesディレクトリに配置されます。 このSOの答えは、bowerがフロントエンド用で、npmがバックエンド用のものであることを示しています。 Ember-app-kitは一見するとこの違いに準拠しているようです...しかし、一部の機能を有効にするためのgruntfileの指示には2つの明示的なコマンドが含まれているため、ここでは完全に混乱しています。 直感的に私はそれを推測します npm install --save-dev package-nameは、package-jをpackage.jsonに追加することと同じです。 亭--saveパッケージ名はインストール私にパッケージを追加するのと同じかもしれないbower.jsonとランニング亭がインストール? その場合、依存関係を管理するファイルに追加せずに、そのようなパッケージを明示的にインストールする必要があります(コマンドラインツールをグローバルにインストールすることは別として)。


13
このエラーの原因-「致命的なエラー:ローカルのうなり声が見つかりません」
最初に古いバージョンのgruntを削除してから、新しいバージョンのgruntをインストールしたところ、次のエラーが発生しました。 D:\ www \ grunt-test \ grunt grunt-cli:gruntコマンドラインインターフェイス。(v0.1.4) 致命的なエラー:ローカルのうなり声が見つかりません。 このメッセージが表示される場合は、Gruntfileが見つからなかったか、プロジェクトにローカルにgruntがインストールされていません。gruntのインストールと設定の詳細については、スタートガイドを参照してください:http : //gruntjs.com/getting-started これは、私のシステムパスにgruntへの参照がないためですか?または、他の何か?私はすでに数回それを再インストールしようとしました。

17
NodeJをインストールできません:/ usr / bin / env:node:そのようなファイルまたはディレクトリはありません
GruntJを使用するために、Ubuntu 14.04にnodeJをインストールしようとしています。 私はUbuntuの異なる方法(問題?)について読んだので、これをインストールするために私がやったことは次のとおりです: sudo apt-get install npm sudo npm install -g grunt-cli その後に入力すると、エラーが発生します。 /usr/bin/env: node: No such file or directory だから、私は試しました: curl -sL https://deb.nodesource.com/setup | sudo bash - sudo apt-get install -y nodejs sudo apt-get update そして再試行してもエラーが発生するので、私は試してみました: sudo add-apt-repository https://launchpad.net/~chris-lea/+archive/node.js/ sudo apt-get install -y nodejs 私はこのメッセージを持っています: nodejs is already the …

6
npm install grunt --save-devでの-save-devの意味
私はGrunt.jsを使い始めたばかりです。セットアップはかなり難しく、package.jsonファイルを作成するところです。 このチュートリアルに従って、package.jsonファイルを作成するには3つの方法があると説明しています。 最初は行うことです npm install grunt --save-dev しかし、どういう--save-dev意味ですか?探してみたが無駄に終わった。
277 node.js  gruntjs  npm 

12
さまざまな設定でGruntにindex.htmlを生成させる
私は私のウェブアプリのビルドツールとしてGruntを使用しようとしています。 少なくとも2つの設定が必要です。 I.開発設定 -連結せずに、個別のファイルからスクリプトをロードします。 したがって、私のindex.htmlは次のようになります。 <!DOCTYPE html> <html> <head> <script src="js/module1.js" /> <script src="js/module2.js" /> <script src="js/module3.js" /> ... </head> <body></body> </html> II。本番環境のセットアップ -スクリプトを縮小して1つのファイルに連結し、 index.htmlに応じて: <!DOCTYPE html> <html> <head> <script src="js/MyApp-all.min.js" /> </head> <body></body> </html> 問題は、実行時に設定に応じてこれらのindex.htmlをどうすればgrunt devよいのgrunt prodでしょうか。 あるいは、間違った方向に掘っていて、常に生成する方が簡単ですMyApp-all.min.jsが、すべてのスクリプト(連結)または別のファイルからこれらのスクリプトを非同期で読み込むローダースクリプトをその中に配置する方が簡単でしょうか。 みんなどうするの?

1
srcおよびdistフォルダーの役割は何ですか?
jqueryプラグインのgitリポジトリを探しています。自分のプロジェクトで使用するためにいくつかの変更を加えたいのですが、リポジトリを開いたときに、これまでにない構造がありました。どのファイルを使用するか、自分のプロジェクトにコピーするかわかりません。 「dist」と「src」フォルダがあります。これらはどのような目的に役立ちますか?これはgruntjsまたはおそらくjqueryプラグインに固有のものですか? 私が興味を持っているgitリポジトリ:https : //github.com/ducksboard/gridster.js


6
npmパッケージがグローバルにインストールされたかローカルにインストールされたかを確認する方法
Windows 7にgrunt、node、npm、bower、grunt-cliをインストールしています。 指示では、グローバルの-gフラグを指定してインストールコマンドを実行する必要があると記載されています。 インストール時に-gフラグを使用したかどうかを確認するにはどうすればよいですか?それらをアンインストールして再インストールするには、かなりの時間がかかります。
153 node.js  gruntjs  npm 

7
npm windowsをグローバルにインストールすると、npm ERRが発生します。無関係な
私はうなり声とnpmに新しいです。だから私はサイト「http://tech.pro/tutorial/1190/package-managers-an-introductory-guide-for-the-uninitiated-front-end-developer#front_end_developers」でいくつかの「料理本の例」を試しています。あなたは今そこを見る必要はないはずですが、サイトを共有することは良いことだと思いました。これまでのところ、グローバルインストールになるまでは良好です。(わかりました、私は理解しなければならなかったいくつかのエラーですが、今私はnpmで働いています)。 何かをグローバルにインストールしようとすると、行き詰まってしまいます。 一部のパッケージをグローバルにインストールするためにこれまでにテストしたこと: 作成されたテストディレクトリ grunttest そのディレクトリ内: npm install -g jshint 私が見ることができる出力: npm http GET https://registry.npmjs.org/jshint npm http 304 https://registry.npmjs.org/jshint ... npm http 304 https://registry.npmjs.org/string_decoder C:\Program Files\nodejs\node_modules\npm\jshint -> C:\Program Files\nodejs\node_modules\npm\node_modules\jshinnt jshint@2.4.4 C:\Program Files\nodejs\node_modules\npm\node_modules\jshint ├── console-browserify@0.1.6 ├── exit@0.1.2 ├── underscore@1.4.4 ├── shelljs@0.1.4 ├── minimatch@0.2.14 (sigmund@1.0.0, lru-cache@2.5.0) ├── cli@0.4.5 (glob@3.2.9) └── htmlparser2@3.3.0 (domelementtype@1.1.1, …
121 windows  gruntjs  npm 

2
タスクランナー(Gulp、Gruntなど)およびBundlers(Webpack、Browserify)。なぜ一緒に使うの?
私はタスクランナーとバンドラーの世界では少し新しいです。 Grunt、Gulp、Webpack、Browserify 、両者に大きな違いがあるとは感じませんでした。言い換えれば、Webpackはタスクランナーが行うすべてのことを実行できると感じています。しかし、それでもgulpとwebpackが一緒に使用されている巨大な例がありました。理由が分からなかった。 これが初めてなので、間違った方向に進んでいる可能性があります。あなたが私が欠けているものを指摘することができればそれは素晴らしいでしょう。役立つリンクがあれば大歓迎です。 前もって感謝します。

7
Gruntタスクでのノードインスペクターの使用
誰かがアプリケーションのデバッグにGruntでノードインスペクターを使用しましたか?そうでない場合、Gruntベースのアプリのデバッグツールを推奨できますか? 私が働いているnodejsサーバー側のアプリのために、私は持っているの兵卒が分離されたタスクを使用する(ユーザーが個別にタスクを実行することができるからです)。

6
grunt:端末から実行するとコマンドが見つかりません
私はグラントが初めてです。Mac OSX LionでGruntを設定しようとしています。 ここの指示に従って、以下のファイルを含むプロジェクトフォルダを作成しました。端末に「grunt」と入力して実行しようとすると、が表示されますcommand not found。パスsudo nano /etc/pathsを追加するとタスクランナーが機能することを期待して、パスも変更しましたが、まだ機能しません。誰かがこれを手伝ってくれる? ---paths /usr/bin /bin /usr/sbin /sbin /usr/local/bin /usr/local/bin/grunt --- files node modules Gruntfile.js package.json
100 gruntjs 

2
「拡張」オプションはgrunt-contrib-copyで何をしますか?例はすべてそれを使用していますが、ドキュメントはそれが何をするかについて何も言っていません
READMEと例は次のとおりです:https : //github.com/gruntjs/grunt-contrib-copy/blob/master/README.md。 https://github.com/gruntjs/grunt-contrib-copy/blob/master/tasks/copy.jsからのコードの関連部分(私はどうやら理解できないようです)は次のとおりです。 module.exports = function(grunt){ '厳格な使用'; var path = require( 'path'); grunt.registerMultiTask( 'copy'、 'C​​opy files。'、function(){ var kindOf = grunt.util.kindOf; var options = this.options({ processContent:false、 processContentExclude:[] }); var copyOptions = { プロセス:options.processContent、 noProcess:options.processContentExclude }; grunt.verbose.writeflags(options、 'Options'); var dest; var isExpandedPair; var tally = { dirs:0、 ファイル:0 }; this.files.forEach(function(filePair){ isExpandedPair …

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.