Grunt.js_Basics を使用してプロジェクトを管理するためのアプリケーション手順
Grunt.js とは何ですか?
Grunt.js は、NodeJS に基づいた Javascript Task Runner (JavaScript タスク ランナー) であり、構築、テスト、およびドキュメント生成のプロジェクト管理ツールを自動化するために使用できます。
Grunt.js は単なるビルド ツールではなく、各サブタスクの自動実行を管理する単なるタスク ランナーでもあります。
なぜ Grunt.js を使用するのですか?
簡単に言えば、自動化のためです。
フロントエンド プロジェクトの場合、例:
•モジュール間の役割分担を明確にするために、JavaScript コードを非常に小さな js ファイルに分割することがありますが、最後のページでは、js ファイルが多すぎると生成される Http リクエストが多すぎることがわかります。ページの最適化に役立ちます。したがって、これらの js ファイルをマージできるツールが必要になるかもしれません。
•クライアントが要求するファイルをできるだけ小さくするために、HTML、JavaScript、その他のファイルを圧縮できることを希望します。
•ソースコードに対して単体テストと回帰テストを行う必要がある場合があります。
•マニュアルでドキュメントを書く必要をなくすために、ソースコードのコメントを通じてドキュメントを自動的に生成できるツールが欲しいかもしれません。
•......
もちろん、これらすべてを行うのに役立つさまざまなガジェットがありますが、コマンドを入力するか、プログラムを開くか、毎回ファイルを保存するのが最善であると考えています。が変更されます。その後、これをすべて自動的に実行します。
以前は NodeJS を使用して自分でビルド プログラムを作成していたかも知れませんが、今では Grunt.js が必要なものをすべて提供できるようになりました。
Grunt.js をインストールする
Grunt.js 0.4 以降は、Grunt.js 全体をグローバルにインストールするのではなく、Grunt.js クライアントをグローバルにインストールしてから、現在のプロジェクト Grunt にインストールします。異なるバージョンの Grunt 上の異なるプロジェクト間の将来の依存関係を回避するため。
以前のバージョンがインストールされている場合は、npm コマンドを使用して元の Grunt.js を削除できます。
npm uninstall -g grunt
次に、Grunt.js クライアントをインストールします。
npm install -g grunt-cli
package.json
package.json は、プロジェクトの依存関係情報、作成者、バージョン、その他の情報が含まれるプロジェクト構成ファイルです。まずは簡単な package.json を書いてみましょう。
{
"name": " my-project ",
"version": "0.1.0",
"devDependency": {
"grunt": "~0.4.1"
}
}
name 属性。アイテムの名前を示します。
version 属性はプロジェクトのバージョン番号です。
devDependency 属性にはプロジェクトの依存関係が含まれています。現在、依存関係は grunt のみであり、バージョンは 0.4.1 です。
package.json が含まれている可能性があるターミナル ディレクトリで、次のコマンドを入力します。
npm install
ディレクトリ内に追加の node_modules フォルダーがあり、その中に grunt フォルダーがあることがわかります。これがプロジェクトにインストールした Grunt.js です。
Grunt.js を使用して js コードを圧縮する
grunt-contrib-uglify は Grunt.js のタスク モジュールで、js 圧縮タスクを実行するための有名な js 圧縮ツール uglify に基づいています。
まず、プロジェクトの依存関係に grunt-contrib-uglify を追加します。package.json は次のとおりです。
{
"name": "my-project",
"version": "0.1.0",
"devDependency": {
"grunt" : "~0.4.1",
"grunt-contrib-uglify": "~0.2.0"
}
}
再利用:
npm install
grunt-contrib-uglify をインストールしました。
Gruntfile.js を作成します
module.exports = function(grunt) {
// Add some settings to grunt
grunt.initConfig({
uglify: {
options: {
) 🎜>}, Build: {
src: 'src/core.js', // The source file to be compressed, we can also use*to represent the pass, such as 'src/*. Js'
// Load "uglify" plug-in tasks
grunt.loadNpmTasks('grunt-contrib-uglify');
// Define the tasks that need to be executed by default
grunt.registerTask('default', ['uglify']);
grunt

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック

JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します:内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換()メソッドを使用することです。 str = str.replace( "find"、 "置換"); この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace(/fi

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか? Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

10の楽しいjQueryゲームプラグインして、あなたのウェブサイトをより魅力的にし、ユーザーの粘着性を高めます! Flashは依然としてカジュアルなWebゲームを開発するのに最適なソフトウェアですが、jQueryは驚くべき効果を生み出すこともできます。また、純粋なアクションフラッシュゲームに匹敵するものではありませんが、場合によってはブラウザで予期せぬ楽しみもできます。 jquery tic toeゲーム ゲームプログラミングの「Hello World」には、JQueryバージョンがあります。 ソースコード jQueryクレイジーワードコンポジションゲーム これは空白のゲームであり、単語の文脈を知らないために奇妙な結果を生み出すことができます。 ソースコード jquery鉱山の掃引ゲーム

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

このチュートリアルでは、jQueryを使用して魅惑的な視差の背景効果を作成する方法を示しています。 見事な視覚的な深さを作成するレイヤー画像を備えたヘッダーバナーを構築します。 更新されたプラグインは、jQuery 1.6.4以降で動作します。 ダウンロードしてください

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

Matter.jsは、JavaScriptで書かれた2D Rigid Body Physics Engineです。このライブラリは、ブラウザで2D物理学を簡単にシミュレートするのに役立ちます。剛体を作成し、質量、面積、密度などの物理的特性を割り当てる機能など、多くの機能を提供します。また、重力摩擦など、さまざまな種類の衝突や力をシミュレートすることもできます。 Matter.jsは、すべての主流ブラウザをサポートしています。さらに、タッチを検出し、応答性が高いため、モバイルデバイスに適しています。これらの機能はすべて、物理ベースの2Dゲームまたはシミュレーションを簡単に作成できるため、エンジンの使用方法を学ぶために時間をかける価値があります。このチュートリアルでは、このライブラリのインストールや使用法を含むこのライブラリの基本を取り上げ、

この記事では、JQueryとAjaxを使用して5秒ごとにDivのコンテンツを自動的に更新する方法を示しています。 この例は、RSSフィードからの最新のブログ投稿と、最後の更新タイムスタンプを取得して表示します。 読み込み画像はオプションです
