Grunt (自動タスクランナー) の入門_JavaScript スキル

JavaScript の開発プロセスでは、ファイルのマージ、コードの圧縮、文法エラーのチェック、Sass コードから CSS コードへの変換など、繰り返しのタスクに遭遇することがよくあります。通常、さまざまなタスクを完了するにはさまざまなツールを使用する必要がありますが、これは繰り返し作業であり、非常に時間がかかります。 Grunt はこの問題を解決するために発明されたツールで、さまざまなタスクを自動的に管理および実行するのに役立ちます。

簡単に言うと、Grunt は、事前に設定された順序で一連のタスクを自動的に実行する自動タスク ランナーです。これにより、ワークフローが合理化され、反復的なタスクの負担が軽減されます。

## インストール

Grunt は Node.js に基づいています。インストールする前に、まず Node.js をインストールしてから、次のコマンドを実行する必要があります。

sudo npm install grunt-cli -g

grunt-cli は grunt コマンド ライン インターフェイスがインストールされていることを示し、パラメータ g はグローバル インストールを示します。

Grunt はモジュール構造を使用します。コマンド ライン インターフェイスのインストールに加えて、必要に応じて対応するモジュールもインストールする必要があります。プロジェクトごとに同じモジュールの異なるバージョンが必要になる場合があるため、これらのモジュールはローカルにインストールする必要があります。

まず、プロジェクトのルート ディレクトリにテキスト ファイル package.json を作成し、現在のプロジェクトに必要なモジュールを指定します。ここに例を示します。

{ “name”: “my-project-name”, “version”: “0.1.0”, “author”: “Your Name”, “devDependencies”: { “grunt”: “0.x.x”, “grunt-contrib-jshint”: “<em>“, “grunt-contrib-concat”: “~0.1.1”, “grunt-contrib-uglify”: “~0.1.0”, “grunt-contrib-watch”: “~0.1.4” } }</em>

上記の package.json ファイルでは、プロジェクトの名前とバージョンを示すことに加えて、プロジェクトが依存する grunt モジュールとバージョンも devDependency 属性で指定されています。grunt コア モジュールは最新バージョン 0.x.x であり、 jshint プラグインは最新バージョンであり、concat プラグインはバージョン 0.1.1 以降、uglify プラグインはバージョン 0.1.0 以降、watch プラグインはバージョン 0.1 以降です。 .4。

次に、プロジェクトのルート ディレクトリで次のコマンドを実行すると、これらのプラグインが node_modules サブディレクトリに自動的にインストールされます。

npm install

上記の方法は、package.json が既に存在する場合の方法です。 package.json ファイルを自動的に生成する場合は、npm init コマンドを使用し、画面上のプロンプトに従って必要なモジュールの名前とバージョンを入力します。

npm init

既存の package.json ファイルに Grunt モジュールが含まれていない場合は、Grunt モジュールを直接インストールするときに --save-dev パラメータを追加すると、モジュールが package.json ファイルに自動的に追加されます。

npm install <module> —save-dev

たとえば、上記の package.json ファイルで指定されたモジュールに対応して、次の npm コマンドを実行する必要があります。

npm install grunt —save-dev npm install grunt-contrib-jshint —save-dev npm install grunt-contrib-concat —save-dev npm install grunt-contrib-uglify —save-dev npm install grunt-contrib-watch —save-dev

## コマンド スクリプト ファイル Gruntfile.js

モジュールがインストールされたら、次のステップは、プロジェクトのルート ディレクトリに新しいスクリプト ファイル Gruntfile.js を作成することです。 package.json が npm の設定ファイルであるのと同様に、これは grunt の設定ファイルです。 Gruntfile.js は、一般的な Node.js モジュールを記述する方法です。

module.exports = function(grunt) { // 配置Grunt各种模块的参数 grunt.initConfig({ jshint: { / jshint的参数 <em>/ }, concat: { /</em> concat的参数 <em>/ }, uglify: { /</em> uglify的参数 <em>/ }, watch: { /</em> watch的参数 <em>/ } }); // 从node_modules目录加载模块文件 grunt.loadNpmTasks(‘grunt-contrib-jshint'); grunt.loadNpmTasks(‘grunt-contrib-concat'); grunt.loadNpmTasks(‘grunt-contrib-uglify'); grunt.loadNpmTasks(‘grunt-contrib-watch'); // 每行registerTask定义一个任务 grunt.registerTask(‘default', [‘jshint', ‘concat', ‘uglify']); grunt.registerTask(‘check', [‘jshint']); };</em>

上記のコードは grunt コードの 3 つのメソッドを使用しています: grunt.initConfig: さまざまなモジュールのパラメーターを定義し、各メンバー項目は同じ名前のモジュールに対応します。
grunt.loadNpmTasks: タスクを完了するために必要なモジュールをロードします。 grunt.registerTask: 特定のタスクを定義します。最初のパラメータはタスク名で、2 番目のパラメータはタスクが順番に使用する必要があるモジュールを示す配列です。デフォルトのタスク名は、grunt コマンドがパラメータなしで直接入力された場合に呼び出されるモジュール (この例では jshint、concat、uglify) を示します。この例のチェック タスクは、jshint プラグインを使用して構文チェックを実行することを示します。コード。
上記のコードは、jshint (構文エラーのチェック)、concat (ファイルのマージ)、uglify (コードの圧縮)、および watch (自動実行) の合計 4 つのモジュールを読み込みます。次に、使い方は2通りあります。

(1)
などのコマンドラインから特定のモジュールを実行します。

grunt jshint

上記のコードは、jshint モジュールの実行を示しています。

(2) コマンドラインは特定のタスクを実行します。たとえば

grunt check

上記のコードは、チェック タスクの実行を示しています。操作が成功すると、「エラーなしで完了しました。」と表示されます。

タスク名が指定されていない場合は、grunt と入力するだけでデフォルトのタスクが実行されます。

## Gruntfile.js の例: grunt-contrib-cssmin モジュール

以下では、cssmin モジュールを使用して、Gruntfile.js ファイルを作成する方法を示します。 cssmin モジュールは、CSS ファイルを最小化するために使用されます。

まず、プロジェクトのルート ディレクトリにモジュールをインストールします。

npm install grunt-contrib-cssmin —save-dev

次に、新しいファイル Gruntfile.js を作成します。

module.exports = function(grunt) { grunt.initConfig({ cssmin: { minify: { expand: true, cwd: ‘css/‘, src: [‘<em>.css', ‘!</em>.min.css'], dest: ‘css/‘, ext: ‘.min.css' }, combine: { files: { ‘css/out.min.css': [‘css/part1.min.css', ‘css/part2.min.css'] } } } }); grunt.loadNpmTasks(‘grunt-contrib-cssmin'); grunt.registerTask(‘default', [‘cssmin:minify','cssmin:combine']); };

上記のコード内の 3 つのメソッドについては、以下で詳しく説明し、1 つずつ見ていきます。

(1)grunt.initConfig

grunt.initConfig メソッドはモジュールの設定に使用され、オブジェクトをパラメータとして受け取ります。このオブジェクトのメンバーは、使用されている同じ名前のモジュールに対応します。 cssmin モジュールを構成しているため、その中に cssmin メンバー (プロパティ) があります。

cssmin (プロパティ) は、複数のメンバーを含むオブジェクトを指します。一部のシステム セット メンバー (オプションなど) に加えて、その他のカスタマイズされたメンバーもターゲットと呼ばれます。モジュールには複数のターゲットを含めることができます。1 つは CSS ファイルを圧縮するために使用される「minify」で、もう 1 つは複数の CSS ファイルを 1 つにマージするために使用されます。 。 書類。

各ターゲットの具体的な設定については、テンプレートのドキュメントを参照する必要があります。 cssmin に関する限り、minify ターゲットのパラメータの具体的な意味は次のとおりです:

expand: true に設定すると、次のファイル名のプレースホルダー (つまり、 番号) を特定のファイル名に展開する必要があることを意味します。
cwd: 処理されるファイル (入力) が配置されているディレクトリ。 src: 処理する必要があるファイルを示します。配列形式の場合、配列内の各項目はファイル名となり、ワイルドカードを使用できます。
dest: 処理されたファイル名またはディレクトリを示します。 ext: 処理されたファイルの接尾辞名を表します。
上記のパラメータに加えて、すべての grunt モジュールに共通のパラメータもいくつかあります。

filter: ファイル名をフィルタリングするためのブール値を返す関数。戻り値が true のファイルのみが grunt によって処理されます。 ドット: ピリオド (.) で始まるシステム ファイルと一致するかどうか。
makeBase: true に設定すると、ファイル パスの最後の部分のみが照合されます。たとえば、a?b は /xyz/123/acb に一致しますが、/xyz/acb/123 には一致しません。
ワイルドカードの意味は次のとおりです。 : / を除く任意の数の文字と一致します。 ?: / を除く単一の文字と一致します。
**: / を含む任意の数の文字と一致します。 {}: 「または」(または) 関係を示すカンマ区切りのリストが許可されます。
!: パターンの先頭で使用され、一致しないケースのみが返されることを示します。
たとえば、 foo/.js は、名前が .js で終わる foo ディレクトリの下のファイルと一致し、 foo//.js は、名前が .js で終わる foo ディレクトリとそのすべてのサブディレクトリの下のファイルと一致します。 js。!.css で終わるファイルは、「.css」以外の接尾辞を持つすべてのファイルと一致することを意味します。

ワイルドカードを使用して src 属性を設定するその他の例:
(2)grunt.loadNpmTasks

grunt.loadNpmTasks メソッドはモジュール ファイルをロードします。 (3)grunt.registerTask

grunt.registerTask メソッドは、特定のタスクを呼び出す方法を定義します。 「デフォルト」タスクは、パラメーターが指定されておらず、grunt コマンドが直接入力された場合、最初に「cssmin:minify」が実行され、次に「cssmin:combine」が実行されることを意味します。つまり、最初に圧縮が実行され、次に「cssmin:combine」が実行されます。その後合併しました。圧縮のみ、またはマージのみを行う場合は、gruntコマンドの後に「モジュール名:ターゲット名」を指定する必要があります。
grunt-contrib-clean: ファイルを削除します。
* grunt-contrib-compass: コンパスを使用して Sass ファイルをコンパイルします。
* grunt-contrib-concat: ファイルを統合します。
* grunt-contrib-copy: ファイルをコピーします。
* grunt-contrib-cssmin: CSS ファイルを圧縮してマージします。
* grunt-contrib-imagemin: 画像圧縮モジュール。
* grunt-contrib-jshint: JavaScript 構文をチェックします。
* grunt-contrib-uglify: JavaScript ファイルを圧縮してマージします。
* grunt-contrib-watch: ファイルの変更を監視し、対応するアクションを実行します。
モジュールのプレフィックスが grunt-contrib の場合は、そのモジュールが grunt 開発チームによって保守されていることを意味し、プレフィックスが grunt (grunt-pakmanager など) の場合は、そのモジュールがサードパーティによって保守されていることを意味します。開発者。

以下のいくつかのモジュールを選択して、その構成パラメーターがどのように記述されているか、つまり grunt.initConfig メソッドで各モジュールを構成する方法を確認してください。

### grunt-contrib-jshint

jshint は、セミコロンの使用が正しいかどうか、括弧の書き忘れがないかなど、構文エラーをチェックするために使用されます。 grunt.initConfig メソッドの設定コードは次のとおりです。
/.js'] },

上記のコードは、最初に jshint の チェック項目 を指定します。 eqeqeq は等価演算子を厳密な等価演算子に置き換える必要があることを意味し、末尾は行末に余分なスペースを含めないことを意味します。次に、files 属性を指定して、チェック対象が lib ディレクトリのすべてのサブディレクトリにある Gruntfile.js ファイルと JavaScript ファイルであることを示します。

### grunt-contrib-concat

concat は、類似したファイルをマージするために使用されます。JavaScript ファイルだけでなく、CSS ファイルもマージできます。
.js', dest : ‘js/‘ } },

上面代码中的options属性指定压缩后文件的文件头，以及sourceMap设置；target目标指定输入和输出文件。

### grunt-contrib-copy

copy模块用于复制文件与目录。

copy: { main: { src: ‘src/<em>‘, dest: ‘dest/‘, }, },</em>

上面代码将src子目录（只包含它下面的第一层文件和子目录），拷贝到dest子目录下面（即dest/src目录）。如果要更准确控制拷贝行为，比如只拷贝文件、不拷贝目录、不保持目录结构，可以写成下面这样：

copy: { main: { expand: true, cwd: ‘src/‘, src: ‘*‘, dest: ‘dest/‘, flatten: true, filter: ‘isFile', }, },

grunt-contrib-watch

watch模块用来在后台运行，监听指定事件，然后自动运行指定的任务。

watch: { scripts: { files: ‘<strong>/*.js', tasks: ‘jshint', options: { livereload: true, }, }, css: { files: ‘</strong>/<em>.sass', tasks: [‘sass'], options: { livereload: true, }, }, },</em>

设置好上面的代码，打开另一个进程，运行grunt watch。此后，任何的js代码变动，文件保存后就会自动运行jshint任务；任何sass文件变动，文件保存后就会自动运行sass任务。

需要注意的是，这两个任务的options参数之中，都设置了livereload，表示任务运行结束后，自动在浏览器中重载（reload）。这需要在浏览器中安装livereload插件。安装后，livereload的默认端口为localhost:35729，但是也可以用livereload: 1337的形式重设端口（localhost:1337）。

### 其他模块

下面是另外一些有用的模块。

（1）grunt-contrib-clean

该模块用于删除文件或目录。

clean: { build: { src: [“path/to/dir/one”, “path/to/dir/two”] } }

（2）grunt-autoprefixer

该模块用于为CSS语句加上浏览器前缀。

autoprefixer: { build: { expand: true, cwd: ‘build', src: [ ‘**/.css' ], dest: ‘build' } },

（3）grunt-contrib-connect

该模块用于在本机运行一个Web Server。

connect: { server: { options: { port: 4000, base: ‘build', hostname: ‘<em>‘ } } }</em>

connect模块会随着grunt运行结束而结束，为了使它一直处于运行状态，可以把它放在watch模块之前运行。因为watch模块需要手动中止，所以connect模块也就会一直运行。

（4）grunt-htmlhint

该模块用于检查HTML语法。

htmlhint: { build: { options: { ‘tag-pair': true, ‘tagname-lowercase': true, ‘attr-lowercase': true, ‘attr-value-double-quotes': true, ‘spec-char-escape': true, ‘id-unique': true, ‘head-script-disabled': true, }, src: [‘index.html'] } }

上面代码用于检查index.html文件：HTML标记是否配对、标记名和属性名是否小写、属性值是否包括在双引号之中、特殊字符是否转义、HTML元素的id属性是否为唯一值、head部分是否没有script标记。

（5）grunt-contrib-sass模块

该模块用于将SASS文件转为CSS文件。

sass: { build: { options: { style: ‘compressed' }, files: { ‘build/css/master.css': ‘assets/sass/master.scss' } } }

上面代码指定输出文件为build/css/master.css，输入文件为assets/sass/master.scss。

（6）grunt-markdown

该模块用于将markdown文档转为HTML文档。

markdown: { all: { files: [ { expand: true, src: ‘.md', dest: ‘docs/html/‘, ext: ‘.html' } ], options: { template: ‘templates/index.html', } } },

上面代码指定将md后缀名的文件，转为docs/html/目录下的html文件。template属性指定转换时采用的模板，模板样式如下。

<!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> <div id=”main” class=”container”> <%=content%> </div> </body> </html>

{src: ‘foo/th<em>.js'}grunt-contrib-uglify {src: ‘foo/{a,b}</em>.js'} {src: [‘foo/a<em>.js', ‘foo/b</em>.js']}

至于combine目标，就只有一个files参数，表示输出文件是css子目录下的out.min.css，输入文件则是css子目录下的part1.min.css和part2.min.css。

files参数的格式可以是一个对象，也可以是一个数组。

files: { ‘dest/b.js': [‘src/bb.js', ‘src/bbb.js'], ‘dest/b1.js': [‘src/bb1.js', ‘src/bbb1.js'], }, // or files: [ {src: [‘src/aa.js', ‘src/aaa.js'], dest: ‘dest/a.js'}, {src: [‘src/aa1.js', ‘src/aaa1.js'], dest: ‘dest/a1.js'}, ],

如果minify目标和combine目标的属性设置有重合的部分，可以另行定义一个与minify和combine平行的options属性。

 grunt.initConfig({ cssmin: { options: { /<em> … </em>/ }, minify: { /<em> … </em>/ }, combine: { /<em> … </em>/ } } });

grunt # 默认情况下，先压缩后合并 grunt cssmin:minify # 只压缩不合并 grunt css:combine # 只合并不压缩

如果不指明目标，只是指明模块，就表示将所有目标依次运行一遍。

grunt cssmin

## 常用模块设置

grunt的模块已经超过了2000个，且还在快速增加。下面是一些常用的模块（按字母排序）。

*

jshint: { options: { eqeqeq: true, trailing: true }, files: [‘Gruntfile.js', ‘lib/

## 参考链接

• Frederic Hemberger、 フロントエンド プロジェクト用のビルド ツール
• Mária Jurčovičová、 Grunt.js を使用した JavaScript ライブラリの構築
• Ben Briggs、Grunt で Web 開発ワークフローをスピードアップ
• Grunt を使用した画像の最適化
• Swapnil Mishra、 Grunt で家事を簡素化する
• AJ ONEal、 GruntJS への移行
• Grunt ドキュメント、 タスクの設定
• Landon Schropp、 Grunt で素晴らしいビルド スクリプトを書く
• マイク・カンソロ、 グラントと一緒に立ち上がって走りましょう
• Matt Bailey, A Beginner's Guide to Using Grunt With Magento
  转自：http://javascript.ruanyifeng.com/tool/grunt.html

同时推荐：http://www.w3cplus.com/tools/writing-awesome-build-script-grunt.html

concat: { js: { src: [‘lib/module1.js', ‘lib/module2.js', ‘lib/plugin.js'], dest: ‘dist/script.js' } css: { src: [‘style/normalize.css', ‘style/base.css', ‘style/theme.css'], dest: ‘dist/screen.css' } },

js目标用于合并JavaScript文件，css目标用语合并CSS文件。两者的src属性指定需要合并的文件（input），dest属性指定输出的目标文件（output）。

### grunt-contrib-uglify

uglify模块用来压缩代码，减小文件体积。

uglify: { options: { banner: bannerContent, sourceMapRoot: ‘../‘, sourceMap: ‘distrib/‘+name+'.min.js.map', sourceMapUrl: name+'.min.js.map' }, target : { expand: true, cwd: ‘js/origin', src : ‘