Gruntの基本をおさえておく
仕事でGrunt使う機会があったので、きちんと基本を押さえておくことにしました。
Gruntってなに？
WEBフロント開発で使うJavaScriptとCSSの変換ツール
目的は、JSやCSSを書きやすい形で実装して、ブラウザで実行できる形に変換する環境を提供すること。
主にやることは下記。
- CoffeScript/TypeScriptのJS変換
- SCSS/LESSのCSS変換
- JavaScript/CSSの圧縮(minify)
環境構築
例えばこんな感じで。nodejsが必要なのでnvmでインストール、gruntコマンドを使うためにgrunt-cliをインストールしています。
cd ~ curl -o- https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash export NVM_DIR="/home/vagrant/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" nvm install 6.9.1 nvm alias default 6.9.1 npm update -g npm npm install -g grunt-cli
プロジェクトつくる
my-projectというディレクトリにpackage.jsonを作成します。
package.jsonはこのプロジェクトで使用したいプラグインを記述するファイルです。
mkdir my-project cd my-project/ npm init
Gruntをインストール
npm install grunt -save-dev npm install grunt-contrib -save-dev npm install grunt-contrib-concat -save-dev npm install grunt-contrib-cssmin -save-dev npm install grunt-contrib-uglify -save-dev npm install grunt-contrib-watch -save-dev npm install grunt-contrib-connect -save-dev
Gruntがインストールされます。-save-devオプションでpackage.jsonにも追記されます。
ついでにpluginもインストールしています。
※warning出まくるけど無視(していいのかわからんけど）。
Gruntfile.jsの作成
Grunt実行時の処理を記述するGruntfile.jsを作成します。
たとえばこんな感じ。
module.exports = function(grunt) { //Gruntの設定 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), // ファイル結合だけ concat: { js: { src: ['src/js/*.js'], dest: 'build/application.js' }, css: { src: ['src/css/*.css'], dest: 'build/application.css' } }, // CSSの結合＋圧縮 cssmin: { minify: { src: ['src/css/*.css'], dest: 'build/application.min.css' } }, // JSの結合＋圧縮 uglify: { build: { src: ['src/js/*.js'], dest: 'build/application.min.js' } }, // ファイル変更を感知して自動的にタスク実行する設定 // いちいちgruntコマンド叩かなくてよくなる watch: { css: { files: ['src/css/*.css'], tasks: ['concat:css', 'cssmin'] }, js: { files: ['src/js/*.js'], tasks: ['concat:js', 'uglify'] } }, // 簡易サーバ // grunt connect で起動する connect: { local: { options: { port: 9998, livereload: true, keepalive: true, } } }, }); // プラグインを読み込む // usage: http://gruntjs.com/plugins grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-connect'); // grunt 実行されるタスク grunt.registerTask('default', ['concat', 'cssmin', 'uglify']); // grunt dev で実行されるタスク grunt.registerTask('dev', ['concat', 'cssmin', 'uglify', 'watch']); };
