Gruntを導入した

Gruntを導入した

· by · in

友人超推しの自動化環境Gruntを導入してみた。

http://kojika17.com/2013/03/grunt.js-memo.html
こちらでGruntインストールと自動実行などの基礎。

http://www.monster-dive.com/blog/web_creative/20131124_001092.php
こちらでSass(Compass)コンパイル対応。

丸々素直に従っただけなので手順まで書きませんが、基礎は分かったのであとは色々試してみようという感じ。

ひとまず汎用的なベースに使えそうだなって感じに作った package.json と Gruntfile.js の中身はこんな感じ。

{
  "name": "test",
  "version": "0.0.0",
  "description": "test",
  "main": "Gruntfile.js",
  "dependencies": {
    "grunt": "~0.4.2"
  },
  "devDependencies": {
    "grunt-contrib-copy": "~0.4.1",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-csslint": "~0.1.2",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-contrib-jst": "~0.5.1",
    "grunt-contrib-compass": "~0.6.0",
    "grunt-contrib-sass": "~0.5.1",
    "grunt-contrib-requirejs": "~0.4.1",
    "grunt-contrib-htmlmin": "~0.1.3",
    "grunt-contrib-coffee": "~0.7.0",
    "grunt-contrib-cssmin": "~0.6.2",
    "grunt-contrib-jshint": "~0.6.5",
    "grunt-contrib-compress": "~0.5.3",
    "grunt-contrib-uglify": "~0.2.7",
    "grunt-contrib-handlebars": "~0.5.12",
    "grunt-contrib-watch": "~0.5.3",
    "grunt-contrib-connect": "~0.5.0",
    "grunt-contrib-stylus": "~0.8.0",
    "grunt-contrib-jade": "~0.8.0",
    "grunt-contrib-qunit": "~0.3.0",
    "grunt-contrib-less": "~0.7.0",
    "grunt-contrib-jasmine": "~0.5.2",
    "grunt-contrib-nodeunit": "~0.2.2",
    "grunt-contrib-imagemin": "~0.3.0",
    "grunt-contrib-yuidoc": "~0.5.0",
    "grunt-contrib": "~0.8.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "BSD-2-Clause"
}

 

module.exports = function(grunt) {
  var pkg, taskName;
  pkg = grunt.file.readJSON('package.json');
  grunt.initConfig({
    //Sass & Compass
    compass: {
      dist: {
        options: {
          config: 'config.rb'
        }
      }
    },
    watch: {
      sass: {
        files: ['sass/*.scss'],
        tasks: ['compass']
      }
    }

  });
  //Plugin load
  for(taskName in pkg.devDependencies) {
      if(taskName.substring(0, 6) == 'grunt-') {
          grunt.loadNpmTasks(taskName);
      }
  }
  grunt.registerTask('default', ['compass','watch']);
};

過去に Prepros や koala を紹介してきましたが、それらとも卒業です。

筆者について

KaBuKi
ゲームとジョジョを愛するファミッ子世代。好きな言葉は「機能美」。
公私ともにWebサービスを作る系男子。
Tags: ,