Gruntの使い方:Sassをコンパイルする

goto_jp 1,193views 更新:2013年12月16日

下記のフォルダ構成を前提とします。

project
├css
├sass
├package.json
└Gruntfile.js

Gruntプラグインは grunt-contrib をインストールしてあることを前提とします。
https://npmjs.org/package/grunt-contrib

Gruntfile.js の記述は下記になります。

module.exports = function(grunt) {
  var pkg = grunt.file.readJSON('package.json');
  grunt.initConfig({
    sass: {
      compile: {
        expand: true,
        flatten: true,
        src: ['sass/*.scss'],
        dest: 'css',
        ext: '.css'
      }
    },
    watch: {
      sass: {
        files: ['sass/*.scss'],
        tasks: ['sass']
      }
    }
  });

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

「sass」タスク内で出力CSSの圧縮形式や入出力パスを指定できます。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません