gruntによるSASSコンパイル自動化

はじめに

本記事はgruntを利用してSASSの自動コンパイルを実現することを目的とする。

SASSコマンドのみでも、watchコマンドを利用することで同一内容の実現が可能だが、ファイル指定や、フォルダ指定、watchコマンドの指定方法をSASSコマンドにて
実施する必要があり忘れてしまうと再度調べる必要があり効率が悪い。
gruntを導入することで、gruntコマンドのみでコンパイル可能となるため、
SCSSの自動コンパイルを可能にし作業効率向上を図る。

github

今回作成したSASSの変換ツールgithubに公開しておりますので、
興味のある方はご利用ください。
https://github.com/sakamotoyuya/SASSEDIT

使い方

npm install
grunt

※npm install後に、
node_modules\grunt\binに実行ファイルができるため、
ここにパスを通すかそれを実行するのでもよい。
node_modules\grunt\bin\grunt

構築方法は以下に示す。

npm導入

PS C:\Users\yuya\Documents\develop\SASSEDIT> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (sassedit) sass-editor
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository: (https://github.com/sakamotoyuya/SASSEDIT.git)
keywords:
author:
license: (ISC)
About to write to C:\Users\yuya\Documents\develop\SASSEDIT\package.json:

{
  "name": "sass-editor",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/sakamotoyuya/SASSEDIT.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/sakamotoyuya/SASSEDIT/issues"
  },
  "homepage": "https://github.com/sakamotoyuya/SASSEDIT#readme"
}


Is this OK? (yes) y

rubyとsassをインストールする

以下を参考に、rubyとsassをインストールする。
https://bsj-k.com/sass-installation-windows/

gruntの導入

grunt本家サイト

npm install grunt --save-dev

ここからはcontrib系の物を導入していく。
contrib系がgruntが公式で展開しているプラグイン。

監視コマンドの導入

grunt-contrib-watch

npm install grunt-contrib-watch --save-dev

SASSコマンドの導入

grunt-contrib-sass

npm install grunt-contrib-sass --save-dev

gruntを準備する

以下のGruntfile.jsを用意する。

Gruntfile.js

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    /*
    task:{
      ターゲット名1:{
        設定
      },
      ターゲット名2:{
        設定
      }
    }

    ターゲット名を指定することで、
    どちらかを実行することが可能となる。
    ターゲット名は自分で好きな文字の
    設定としてよい。
    */

    watch: {
        target:{
          files: ['src/**/*'],
          tasks: ['sass']
        },
      },
    sass: {
      dist: {
        // files: {
        //   'css/main.css': 'src/style1.scss'
        // }
       files: [{
        //ファイル名と同等の物を拡張子を変えて出力する。  
          expand: true,
          cwd: 'sass',//SRCに対する相対パスを指定する
          src: ['*.scss'],//コンパイルするソースコードを指定する。cwdで指定した物により、「src/*.scss」が指定元となる。
          dest: 'css/',//出力先フォルダを指定する
          ext: '.css'//拡張子を指定する。
        }]
      },
      options:{
        sourcemap:"none",//コードにsourcemapを出力しない
        noCache:true,//cacheを作らない
        style:"expanded"//nested, compact, compressed, expanded.
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-watch');//watchコマンドで変更を検知するのに使用
  grunt.loadNpmTasks('grunt-contrib-sass');

  grunt.registerTask('default', ['sass','watch']);//タスクの登録

};

sassフォルダとcssフォルダを作成する

sassフォルダ

style1.scss

@import "style2";

.body{
  color:red;
}

style2.scss

.sakamoto{
  color:pink;
}

cssフォルダを作っておく。

実行

gruntで実行してあげれば変換されます。