Gruntも少しやってみました

Gruntも少しやってみましたタスク自動化ツールのGruntを試してみました。以前から興味があったので。今回もドットインストールです。

インストール

$ npm install grunt

利用の準備

$ mkdir mysite
$ cd mysite
$ npm init                          # package.jsonを作成する
$ npm install grunt --save-dev      # gruntを導入する
$ tree -L 3
.
├── node_modules
│   └── grunt
│       ├── LICENSE-MIT
│       ├── README.md
│       ├── internal-tasks
│       ├── lib
│       ├── node_modules
│       └── package.json
└── package.json

タスク自動化ファイルの作成

Gruntfile.jsを作成して中に下記のように記述する。

module.exports = function(grunt) {

    // config
    grunt.initConfig({
        
    })

    // plugin


    // tasks

}

プラグインは下記ページで検索可能。

使いたいmoduleが見つかったら、npm installして、Gruntfile.jsに追記する。gruntjs/grunt-contrib-lessの例だと、下記のようになる。

module.exports = function(grunt) {

    // config
    grunt.initConfig({
        less: {                                 # task
            build: {                            # target1
                src: 'src/style1.less',         # 設定
                dest: 'build/styles.css'
            }
        }
    })

    // plugin
    grunt.loadNpmTasks('grunt-contrib-less');

    // tasks
    grunt.registerTask('default', 'less');
}

targetを複数使った例。

module.exports = function(grunt) {

    // config
    grunt.initConfig({
        less: {
            build1: {
                src: 'src/style1.less',
                dest: 'build/styles1.css'
            },
            build2: {
                src: 'src/style2.less',
                dest: 'build/styles2.css'
            }
        }
    })

    // plugin
    grunt.loadNpmTasks('grunt-contrib-less');

    // tasks
    grunt.registerTask('default', 'less');
    grunt.registerTask('task1', 'less:build1');
    grunt.registerTask('task2', 'less:build2');
}

感想

なんかいろいろできそう。いろいろできるけど、既存ツールとのちがい(cssの自動コンパイルと変更監視は他のやり方あるし。。)がちょっとわからず、まだ一歩踏み出せない。ただ、そのあたりを全部まとめて管理できるってのが良いのかな。

参考

Pocket
LINEで送る

You may also like...