jade, scssのコンパイル、jsとcssのmin化とgzip化な感じで使っています。
// Gruntfile.js module.exports = function(grunt) { var pkg = grunt.file.readJSON('package.json'); grunt.initConfig({ jade: { compile: { expand: true, cwd: 'dev/jade/public/', src: '**/*.jade', dest: 'public/', ext: '.html', options: { // min化しない pretty: true } } }, // Compass compass: { dev: { options: { sassDir: 'dev/scss', cssDir: 'public/assets/css', force: true } } }, // CSS min化 cssmin: { compress: { files: { 'public/assets/css/style.min.css': 'public/assets/css/style.css' } } }, // JS 構文チェック jshint: { options: { globals: { jQuery: true, console: true, module: true }, unused: true, // 宣言したきり使っていない変数を検出 // グローバル変数へのアクセスの管理 browser: true, // ブラウザ用のやつは許可 devel: true, // consoleやalertを許可 expr: true // x || (x = 1); とかができるようにする }, files: 'dev/js/*.js' }, // JS 結合 concat: { options: { // 連結される各ファイル内の間に配置出力する文字列を定義 separator: ';\n' }, compile: { files: { 'public/assets/js/lib.js': ['dev/js/lib/*.js'], 'public/assets/js/main.js': ['dev/js/*.js'] } }, compileDev: { files: { 'public/assets/js/main.js': ['public/assets/js/lib.js', 'public/assets/js/main.js'] } }, compaileAll: { files: { 'public/assets/js/main.min.js': ['public/assets/js/lib.js', 'public/assets/js/main.min.js'] } } }, // JS min化 uglify: { options: { banner: '/*!\n * compile at <%= grunt.template.today("dd-mm-yyyy") %>\n */\n' }, dist: { files: { 'public/assets/js/main.min.js': 'public/assets/js/main.js' } } }, // minファイルをgzip化 compress: { css: { options: { mode: 'gzip' }, files: [ { expand: true, src: 'public/assets/css/*.min.css', ext: '.min.css.gz' } ] }, js: { options: { mode: 'gzip' }, files: [ { expand: true, src: 'public/assets/js/*.min.js', ext: '.min.js.gz' } ] } }, // 不要なファイルを消す clean: { js: ['public/assets/js/lib.js'] }, watch: { // jade jade: { files: ['dev/jade/public/**/*.jade', 'dev/jade/**/*.jade'], tasks: 'jade:compile', options: { nospawn: true } }, // CSS css: { files: 'dev/scss/*.scss', tasks: 'css', options: { nospawn: true } }, // JS js: { files: ['dev/js/*.js', 'dev/js/**/*.js'], tasks: 'js', options: { nospawn: true } } } }); // loadNpmTasksを変更 for(var taskName in pkg.devDependencies) { if(taskName.substring(0, 6) == 'grunt-') { grunt.loadNpmTasks(taskName); } } // javascriptのタスク grunt.registerTask('js', ['jshint', 'concat:compile', 'uglify:dist', 'concat:compileDev', 'concat:compaileAll', 'compress:js', 'clean:js']); // cssのタスク grunt.registerTask('css', ['compass:dev', 'cssmin:compress', 'compress:css']); grunt.registerTask('default', ['watch']); }
scssがstyle.scssで固定なのは、
style.scssファイル内で@importで他のscssを読み込む様にしているからです。
gruntの実行
下記コマンドでgrunt watchが走るのでファイルの変更を監視してそれぞれのタスクを実行します
grunt
jsの処理だけ実行
grunt js
cssの処理だけ実行
grunt css