ホームページ > 記事 > ウェブフロントエンド > grunt を使用して JavaScript および CSS プログラムをパッケージ化する方法を学ぶチュートリアル

grunt を使用して JavaScript および CSS プログラムをパッケージ化する方法を学ぶチュートリアル

PHPzオリジナル: 2016-05-16 15:22:031618ブラウズ

Grunt.js は、Node.js に基づいた自動タスクランナーです。 Grunt.js と NPM のパッケージ依存関係管理を組み合わせると、Maven に完全に匹敵します。 Grunt.js は当然、フロントエンドアプリケーションの構築に適しています。JavaScript プロジェクトに限定されず、他の言語でアプリケーションを構築するためにも使用できます。すでに Grunt を使用している JavaScript プロジェクトの数は増えており、有名な jQuery プロジェクトなど最大のユーザーがいます。

Grunt のエコシステムは急速に成長しており、現在 NPM で公開されている数百のプラグインから選択できます。同時に、誰でも簡単に自分のプラグインを NPM に公開して、他の人が使用できるようにすることができます。

Grunt は Maven のようにビルドライフサイクルを重視しておらず、さまざまなタスクの実行順序を自由に設定できます。 Grunt 自体は単なる実行プログラムであり、NPM によって管理されるプラグインには多数の機能が存在します。特に、grunt-contrib- で始まるコアプラグインは、ハンドルバー、jade、less、compass、jshint、jasmine、clean、concat、minify、copy、uglify、watch、minify、uglify など、ほとんどのコア機能をカバーします。、など。

コード仕様チェック (Lint)、マージ、圧縮、テスト、バージョン管理などのタスクに共通のインターフェイスを提供することで、Grunt は参入障壁を大幅に下げます。

1.nodejs、grunt、および grunt プラグインをインストールします

1.nodejs をインストールします

ダウンロードアドレス: https://nodejs.org/download/

2. grunt とプラグインをインストールします

npm install grunt -g  //安装grunt,-g全局变量 
npm install grunt-cli -g //安装grunt命令行 
npm install grunt --save-dev  //安装grunt,--save-dev保存到安装目录 
npm install grunt-cli --save-dev //安装grunt命令行 
npm install grunt-contrib-jshint --save-dev //js语法检测插件 
npm install grunt-contrib-concat --save-dev //js合并插件 
npm install grunt-contrib-uglify --save-dev //js压缩插件 
npm install grunt-contrib-cssmin --save-dev //CSS压缩插件

grunt と grunt-cli、-g および --save-dev をインストールして、エラーを回避することをお勧めします。

3. 作業ディレクトリを作成します

上記のインストールが完了すると、node_modules に上記でインストールされたプラグインが含まれます。ディレクトリ内のnode_modulesを新しいディレクトリに移動し、Gruntfile.jsとpackage.jsonを作成します。
ここで注意すべき点は、Gruntfile.jsとpackage.jsonがnode_modulesと同じディレクトリに存在する必要があることです。そうでない場合は、呼び出し時にgrunt プラグインを使用すると、次のようなエラーが報告されます。

>> Local Npm module "grunt-contrib-uglify" not found. Is it installed?
Warning: Task "uglify" not found. Use --force to continue.

grunt-contrib-uglify プラグインをインストールしない場合、これはエラーも報告されます。

2. Gruntfile.js と package.json を作成します

1、package.json

{ 
 "name": "jstest", 
 "file": "function", 
 "version": "0.1.0", 
 "devDependencies": { 
 "grunt": "~0.4.5", 
 "grunt-contrib-jshint": "~0.11.3", //后面的数字是版本号，从各个插件目录下的package.json能找到 
 "grunt-contrib-concat": "~0.5.1", 
 "grunt-contrib-uglify": "~0.9.2", 
 "grunt-contrib-cssmin": "~0.14.0" 
 } 
}

2、Gruntfile.js

module.exports = function (grunt) { 
 // grunt配置 
 grunt.initConfig({ 
 pkg: grunt.file.readJSON(&#39;package.json&#39;), 
 concat: { 
  options: { 
  separator: &#39;;&#39; 
  }, 
  dist: { 
  src: [&#39;js_s/function.js&#39;, &#39;js_s/jquery.validate.js&#39;], 
  dest: &#39;js_d/main.js&#39; //合并不压缩 
  } 
 }, 
 uglify: { 
  options: { 
  banner: &#39;/*!   */\n&#39; //文件顶部的注释，可自定义 
  }, 
  build: { //将package.json中的file对应的文件，进行压缩并重命名 
  src: &#39;js_s/.js&#39;,  //注意空格，官方配置例子是pkg.name 
  dest: &#39;js_d/.min.js&#39; //注意空格，官方配置例子是pkg.name 
  }, 
  buildall: {//将js_s文件夹下的所有js文件，压缩后，放到js_d文件夹中，文件名不变 
  files: [{ 
  expand:true, 
  cwd:&#39;js_s&#39;,//js目录下 
  src:&#39;**/*.js&#39;,//所有js文件 
  dest: &#39;js_d&#39;//输出到此目录下 
  }] 
  }, 
  hebin: {//将function.js和jquery.validate.js，合并,并压缩成main.min.js 
  files: { 
   &#39;js_d/main.min.js&#39;: [&#39;js_s/function.js&#39;, &#39;js_s/jquery.validate.js&#39;] 
  } 
  }, 
  ymain: {//将main.js压缩成main1.min.js 
  src: &#39;js_d/main.js&#39;, 
  dest: &#39;js_d/main1.min.js&#39; 
  } 
 }, 
 jshint: { //检查，function.js是不是有语法错误 
  all: [&#39;js_s/function.js&#39;] 
 }, 
 cssmin: { 
  combine: { 
    files: { //将css_s文件夹下的css文件合成一个 
     &#39;css_d/main.css&#39;: [&#39;css_s/*.css&#39;] 
    } 
   }, 
  minify: { 
    options: { 
     keepSpecialComments: 0, /* 删除所有注释 */ 
     banner: &#39;/* minified css file */&#39; 
    }, 
    files: { //单个CSS文件压缩 
     &#39;css_d/index.min.css&#39;: [&#39;css_s/index.css&#39;] 
    } 
   }, 
  test: {//按文件夹下的所有CSS文件，压缩后，放到新的文件夹中，文件名不变 
    files: [{ 
   expand:true, 
   cwd:&#39;css_s&#39;,//css目录下 
   src:&#39;**/*.css&#39;,//所有css文件 
   dest: &#39;css_d&#39;//输出到此目录下 
   }] 
   } 
  } 
 }); 
 // 加载插件 
 grunt.loadNpmTasks(&#39;grunt-contrib-uglify&#39;); 
 grunt.loadNpmTasks(&#39;grunt-contrib-concat&#39;); 
 grunt.loadNpmTasks(&#39;grunt-contrib-jshint&#39;); 
 grunt.loadNpmTasks(&#39;grunt-contrib-cssmin&#39;); 
 
 // 是否调用插件功能 
 //grunt.registerTask(&#39;default&#39;, [&#39;concat&#39;,&#39;uglify&#39;,&#39;jshint&#39;,&#39;cssmin&#39;]); 
 // grunt.registerTask(&#39;default&#39;, [&#39;uglify&#39;]); 
 // grunt.registerTask(&#39;default&#39;, [&#39;concat&#39;]); 
 //grunt.registerTask(&#39;default&#39;, [&#39;jshint&#39;]); 
 grunt.registerTask(&#39;default&#39;, [&#39;cssmin&#39;]); //CSSMIN插件的功能能用，其他功能都不起作用 
}

設定ファイルの準備ができたら、コマンドラインで, grunt と入力してマージして圧縮します。上記のテストファイルは基本的にマージと圧縮を中心に展開します。Web フロントエンドを行う人にとって、これは非常に重要です。
圧縮効果に関しては、JS の圧縮効果は理想的で、CSS の圧縮効果は平均的です。もちろん、記述されたコードによって異なります。

[関連チュートリアルの推奨事項]

1. JavaScript ビデオチュートリアル
2. JavaScript オンラインマニュアル
3. ブートストラップチュートリアル

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：AngularJS フレームワークの Scope オブジェクトをさらに詳しく説明するスーパーチュートリアル_AngularJS次の記事：AngularJS フレームワークの Scope オブジェクトをさらに詳しく説明するスーパーチュートリアル_AngularJS

続きを見る

grunt を使用して JavaScript および CSS プログラムをパッケージ化する方法を学ぶチュートリアル

関連記事