12
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

下準備

インストール

npm install -g grunt-cli

プロジェクトの作成

npm init

package.jsonの作成。対話式で色々と入れていく。最初の所でgruntって名前にしちゃうとおかしくなるっぽい。

sudo npm install grunt grunt-contrib --save-dev

node_modulesディレクトリの作成。依存関係プラグインとかがごそっと入る。

gruntにはおすすめプラグイン集みたいなのがあってgrunt-contribでそれらが全部ごそっと入る。超便利。

あ、あと何故かsudoでないとだめっぽい。謎。

ここまでで、node_modules package.jsonが出来てるはず。

Gruntfile.coffeeの作成

まずは、Gruntfile.coffeeを作る。

touch Gruntfile.coffee 

んでもってひな形の挿入。Gruntfile.coffeeに以下を書き込みます。

module.exports = (grunt) ->

すべての設定はこのmodule.exportsの中に書き込んで行く、みたいな感じです。

ではgrunt -hを実行してみましょう。grunt -hではGruntfileを解析して利用可能なタスクを確認することが出来ます。

Available tasks
(no tasks found)

この時点ではまだ何も登録されていないはず。

次にプラグインの読み込みを行います。

module.exports = (grunt) ->
  pkg = grunt.file.readJSON 'package.json'
  for taskName of pkg.devDependencies when taskName.substring(0, 6) is 'grunt-'
    grunt.loadNpmTasks taskName

pkg行はパッケージファイルの読み込みを、その下のforブロックではパッケージの依存関係からgrunt-系のプラグインをタスクとして読み込んでいます。

grunt.loadNpmTasks "pluginname" でプラグインの読み込み、というわけです。
ここは多分grunt.loadNpmTasks "grunt-contrib"でもOKなはず。

Gruntfile.coffeeを上記のように書き換えたら再度grunt -h で登録されたタスクを確認。一気にタスクが追加されているはずです。

Available tasks
        concat  Concatenate files. *                                           
          copy  Copy files. *                                                  
          sass  Compile Sass to CSS *                                          
       compass  Compile Sass to CSS using Compass *                            
       csslint  Lint CSS files with csslint *                                  
        coffee  Compile CoffeeScript files into JavaScript *                   
       htmlmin  Minify HTML *                                                  
        cssmin  Minify CSS files *                                             
           jst  Compile underscore templates to JST file *                     
         clean  Clean files and folders. *                                     
      compress  Compress files. *                                              
         watch  Run predefined tasks whenever watched files change.            
     requirejs  Build a RequireJS project. *                                   
        uglify  Minify files with UglifyJS. *                                  
       connect  Start a connect web server. *                                  
    handlebars  Compile handlebars templates and partials. *                   
        jshint  Validate files with JSHint. *                                  
        stylus  Compile Stylus files into CSS *                                
          jade  Compile jade templates. *                                      
       jasmine  Run jasmine specs headlessly through PhantomJS. *              
         qunit  Run QUnit unit tests in a headless PhantomJS instance. *       
      imagemin  Minify PNG and JPEG images *                                   
          less  Compile LESS files to CSS *                                    
      nodeunit  Run Nodeunit unit tests. *                                     
        yuidoc  Create YUIDocs *                

ただこのままではほとんど使い物にもならないので、各タスクごとの設定をしていかないと行けません…

grunt task -h とかでタスクごとのヘルプが見れれば楽なのに…

taskファイルの設定方法(共通編)

 ほとんどのタスクが「ファイル」に対する操作となっているため,ファイルに関する設定の書き方には共通の記法が用意されています。

Compact Format

 src-destの形式で記述する方法。

grunt.initConfig
  concat:
    src: ['src/bb.js', 'src/bbb.js']
    dest:  'dest/b.js'

Files Object Format

 ハッシュのkey=>value でdist=>sourceを指定する方法。

grunt.initConfig
  concat:
    files:
      'dest/a.js': ['src/aa.js', 'src/aaa.js'],
      'dest/a1.js': ['src/aa1.js', 'src/aaa1.js'],

Files Array Format

 配列で指定する方法。

grunt.initConfig
  concat:
    files: 
      {src: ['src/aa.js', 'src/aaa.js'], dest: 'dest/a.js'},
      {src: ['src/aa1.js', 'src/aaa1.js'], dest: 'dest/a1.js'},

各タスクプラグインごとの細かい設定のあれこれについては、各タスクプラグインのgithubリポジトリとかを参照するといいかも。

12
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?