Grunt設定
2082 ワード
GruntはLESSのリアルタイムコンパイルを完了した.
インストール
gruntをインストールするには、
その後、npmを用いて
これでgruntのインストールが完了しました.
プロジェクトでの使用
まず、gruntがnode環境で実行されるため、npmを使用して管理する必要があるプロジェクトディレクトリを作成します.だからプロジェクトには
これにより、プロジェクトパスの下で、cmdで
インストール
gruntをインストールするには、
node.js
をインストールする必要があります.その後、npmを用いて
grunt-cli,
をcmdにnpm install -g grunt-cli
取り付ける必要がある.(grunt --version
grunt-cliバージョンが正しく表示されているかどうかをテストします)これでgruntのインストールが完了しました.
プロジェクトでの使用
まず、gruntがnode環境で実行されるため、npmを使用して管理する必要があるプロジェクトディレクトリを作成します.だからプロジェクトには
package.json
の書類が必要です.その中で最も重要なのはdevDependencies
の依存関係をはっきり書くことです.ここでは、lessをコンパイルするために使用できる例があります.{
"name": "ProjectName",
"version": "0.1.0",
"devDependencies": {
"grunt": "*",
"grunt-contrib-less": "*",
"grunt-contrib-watch": "*"
}
}
package.json
ファイルがあれば、npm install
を使用してプロジェクトを構築することができます.ただし、この場合gruntコマンドは使用できません.Gruntfile.js
またはGruntfile.coffee
のファイルが1つ足りないためです.このファイルの役割はgruntがどのように働いているかです.その例(コンパイルless)に続くGruntfile.js
は以下の通りである.module.exports = function (grunt) {
grunt.initConfig({
less: {
compile: {
files: {
'css/test.css': 'css/test.less'
}
},
yuicompress: {
files: {
'css/test-min.css': 'css/test.css'
},
options: {
yuicompress: true
}
}
},
watch: {
scripts: {
files: ['css/*.less'],
tasks: ['less']
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['less', 'watch']);
};
これにより、プロジェクトパスの下で、cmdで
grunt
を実行し、cssパスの下でlessファイルのリアルタイムコンパイルを完了する.