今回はGrunt.jsを使って実際、sassのコンパイルを行なってみたいと思います。
Grunt.jsの概要だったり、インストールが知りたい方は過去記事参考にしてください。
Grunt.jsの始め方 -Grunt.jsの概要編-
Grunt.jsの始め方 -インストール編-
gruntfile.jsの書き方
Gruntのタスクはgruntfileというjavascriptファイルに記述します。
まずそのgruntfileの書き方です。
grunt.loadNpmTasks(‘プラグイン名’);
grunt.initConfig({
タスク
});
grunt.registerTask(‘default’, [ ‘使用したプラグイン’]);
}
[/c]
1行目はgruntを使うおまじないみたいなものなので、こう書くものだと思って下さい。
2行目で、このプロジェクトで使用するプラグインの名称を書きます。
3行目の「grunt.initConfig」でタスクを登録します。
最後の「grunt.registerTask」でタスクを実行していきます。
gruntのプラグインをインストールしてみる。
package.jsonを使って、gruntをインストールしましたが、プラグインも同様にインストールします。
どのようなプラグインがあるかは、サイトで確認してみましょう。
サイトを見てみもらえると分かる通り、非常に沢山のプラグインがあります。
これらの中からどのように選べばよいでしょうか？
プラグインの選び方
- gruntチームが作っているプラグインは頭文字に「contrib-」と入ってる
- それでも何を入れて良いか迷ったら、全部入りのプラグイン「contrib」
「contrib-」と入っているものであれば、まず間違いありません。
今回は全部入りの、「contrib」を使ってみようと思います。
package.jsonを下記のように書きます。
[c] {"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib":"~0.6.1"
}
}
[/c]
最後の行に「grunt-contrib」のVer0.6.1をインストールするように書きました。
下記コマンドを打って、インストールしてみてください。
[/c]
そうすると「node-modules」の下に「grunt-contrib」というファイルが出来上がったと思います。
これでインストールが完了しました。
Grunt.jsを使ってsassを使ってみる
それでは実際にsassをコンパイルしてみます。
[c] module.exports = function (grunt) {//最初に書くgrunt.loadNpmTasks(‘grunt-contrib’);//プラグインの読み込み
grunt.initConfig({//タスク登録
sass: {//プラグイン名
compile:{//タスク名
files:{
‘style/css/main.css’:’style/sass/main.scss’
},
},
},
});
grunt.registerTask(‘default’, [ ‘sass’]);
};
[/c]
まず最初に使用するプラグインについて書きます。
使用するプラグイン名称にタスク名とどのファイルをコンパイルするかを書きます。
今回はタスク名をcompileと名づけました。
ファイルの指定のしかたは、「cssファイル：sassファイル」で指定出来ます。
今回はstyleという配下にsassとcssというフォルダを作り、その下のファイルをコンパイルしようと思います。
最後に、どのタスクを実行するか書きます。
コンパイルしてみましょう。
[c] grunt[/c]
これで、cssファイルが出来たと思います。
次回はもう少しプラグインの紹介を出来たらと思います。
ではでは
