Gruntをつかいはじめてはや4ヶ月。
新たなタスクがどんどん増えてきております。
一旦ここにまとめておきます。
ディレクトリ構成
buildが開発用ディレクトリ、distが公開用ディレクトリです。
assetsディレクトリは諸事情によりdataディレクトリとなりました。
開発時はbuildをルートとしてサーバをたてています。
また公開ファイルの中身は指定したディレクトリにコピーしてつかうことを前提としています。
package.json
{ "name": "Grunt", "version": "0.0.1", "description": "hello world.", "devDependencies": { "grunt-contrib-copy": "~0.5.0", "grunt-contrib-compass": "~0.8.0", "grunt-contrib-jshint": "~0.1.1", "grunt-contrib-concat": "~0.1.2", "grunt-contrib-uglify": "~0.1.1", "grunt-contrib-watch": "~0.2.0", "grunt-contrib-connect": "~0.8.0", "grunt-contrib-imagemin": "~0.8.0", "grunt-contrib-clean": "~0.6.0", "grunt-contrib-cssmin" : "~0.10.0", "grunt-combine-media-queries": "~1.0.19", "grunt-bower-task": "~0.3.4", "grunt-autoprefixer": "~0.7.5", "grunt-usemin": "~2.0.0", "grunt-csscomb": "~3.0.0" } }
Gruntfile.js
module.exports = function (grunt) { 'use strict'; var srcFiles = grunt.file.readJSON('scripts.json'); grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), // grunt-contrib-copy // ファイルのコピー copy: { dist: { files: [{ expand: true, cwd: 'build/', src: ['*.html', '*.mp3', '*.ogg', '*.wav', '*.mp4', '*.mov', '*.swf'], dest: 'dist/' }] }, takeout: { files: [{ expand: true, cwd: 'dist/', src: ['*.html', 'data/**/*'], dest: './' }] } }, // grunt-contrib-compass // sassファイルのコンパイル compass: { dev: { options: { config: 'build/config.rb', sassDir: 'build/sass', cssDir: 'build/data/css' } }, dist: { options: { config: 'build/config.rb', sassDir: 'build/sass', cssDir: 'dist/data/css' } } }, // grunt-contrib-concat // jsファイルの結合 concat: { dist: { src: srcFiles.app, dest: 'build/data/js/main.concat.js' } }, // grunt-contrib-uglify // jsファイルの圧縮 uglify: { options: { banner: '' }, dist: { files: { 'dist/data/js/main.min.js': ['<%= concat.dist.dest %>'] } } }, // grunt-contrib-jshint // jsファイルの構文チェック jshint: { files: ['<%= concat.dist.src %>'], options: { jquery: true, browser: true, devel: true, validthis: true } }, // grunt-contrib-watch // ファイルの監視 watch: { compass: { files: ['build/sass/**/*.scss'], tasks: ['compass:dev', 'autoprefixer:dev'] }, js: { files: ['<%= concat.dist.src %>'], tasks: ['jshint', 'concat'] } }, // grunt-contrib-connect // ローカルにサーバをたてる connect: { server: { options: { port: 9000, open: true, keepalive: false, hostname: '*', base: 'build' } } }, // grunt-contrib-imagemin // 画像を圧縮 imagemin: { dynamic: { files: [{ expand: true, cwd: 'build/data/img/', src: ['**/*.{png,jpg,gif,ico}'], dest: 'dist/data/img/' }] } }, // contrib-clean // 書き出しディレクトリを一旦削除 clean: { dist: { files: [{ dot: true, src: [ 'dist', ] }] } }, // contrib-cssmin // CSSを圧縮 cssmin: { dist: { files: { 'dist/data/css/main.css': ['dist/data/css/*.css'] } } }, // combine-cmq // メディアクエリをまとめる cmq: { options: { log: false }, dist: { files: { 'dist/data/css/main.css': ['dist/data/css/*.css'] } } }, // grunt-bower-task // ライブラリをコピー bower: { dev: { options: { targetDir: 'build/data/js/lib', layout: 'byType', install: true, verbose: false, cleanTargetDir: true, cleanBowerDir: false } }, install: { options: { targetDir: 'dist/data/js/lib', layout: 'byType', install: true, verbose: false, cleanTargetDir: true, cleanBowerDir: false } } }, // grunt-autoprefixer // プレフィックスの追加＆削除 autoprefixer: { options: { browsers: ['last 2 version', 'ie 9'] }, dev: { src: 'build/data/css/*.css' }, dist: { src: 'dist/data/css/*.css' } }, // grunt-usemin // 本番環境では圧縮したファイルを読み込むようにする usemin: { html: ['dist/*.html'], options: { root: '/', dirs: ['dist'] } }, // csscomb // CSSプロパティの並べ替え csscomb: { dev: { files: { 'build/data/css/main.css': ['build/data/css/*.css'] } }, dist: { files: { 'dist/data/css/main.css': ['dist/data/css/*.css'] } } }, }); grunt.registerTask('default', ['takeout']); // ライブラリのコピー -> Sassファイルをコンパイル -> プレフィックスの自動付加 -> CSSプロパティの並べ替え -> JS構文チェック -> JS結合 grunt.registerTask('dev', ['bower:dev', 'compass:dev', 'autoprefixer:dev', 'csscomb:dev', 'jshint', 'concat']); // ライブラリのコピー -> 開発用にSassファイルをコンパイル -> プレフィックスの自動追加 -> CSSの順序を統一 -> JS構文チェック -> JS結合 -> ローカルにサーバを立ちあげる -> ファイルの監視 // （※ CSSに変更があった場合 -> Sassファイルをコンパイル -> プレフィックスの自動付加） // （※ JSに変更があった場合 -> 構文チェック -> 結合） grunt.registerTask('server', ['dev', 'connect', 'watch']); // JS構文チェック -> 公開用ディレクトリを一旦削除 -> JSファイル結合 -> JSファイル圧縮 -> 画像圧縮 -> ライブラリをコピー -> Sassファイルをコンパイル -> プレフィックスを自動付加 -> メディアクエリをまとめる -> CSSプロパティ並べ替え -> CSS圧縮 -> 公開用ディレクトリにコピー grunt.registerTask('dist', ['jshint', 'clean:dist', 'concat', 'uglify', 'imagemin:dynamic', 'bower:install', 'compass:dist', 'autoprefixer:dist', 'cmq', 'csscomb:dist', 'cssmin', 'copy:dist', 'usemin']); // 公開用ディレクトリを別の場所にコピー grunt.registerTask('takeout', ['dist', 'copy:takeout']); grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-contrib-compass'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-connect'); grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-combine-media-queries'); grunt.loadNpmTasks('grunt-bower-task'); grunt.loadNpmTasks('grunt-autoprefixer'); grunt.loadNpmTasks('grunt-usemin'); grunt.loadNpmTasks('grunt-csscomb'); grunt.loadNpmTasks('grunt-browser-sync'); };
とても長いです。
/build で作業して /dist に書き出しています。
これ以上長くなるようであればタスクごとにファイルを分割しようと思ってます。
結構つくりこんだので公開時、納品時もばたつかなくなりました。
今回は以上です。
