Gruntfile.coffee

Gruntfile.coffee

module.exports = (grunt) ->

    # プラグインを package.json から自動読み込み
    pkg = undefined
    taskName = undefined
    pkg = grunt.file.readJSON("package.json")

    # タスクスタート
    grunt.initConfig

## ========================================================##
#  ********************* Var ****************************
## ========================================================##
# example    <%= dir.css %>   <%= file.maincss %>

        dir :
            root : '_src'     #ルートディレクトリ
            src : '<%= dir.root %>/_cmn'  #ソースファイル
            # dist : '_build'  #build先
            dist : '_dist'  #build先
            doc : '_docs'  #ドキュメント
            js : '<%= dir.src %>/js'
            css : '<%= dir.src %>/css'
            sass :'<%= dir.src %>/sass'
            coffee : '<%= dir.js %>/coffee'
            font : '<%= dir.src %>/fonts'
            svg : '<%= dir.font %>/svg'
            img : '<%= dir.src %>/img'

        file :
            maincss : 'style.css'
            mincss : 'style.min.css'

        build :
            root : '<%= dir.dist %>'
            src : '<%= build.root %>/_cmn'  #ソースファイル
            js : '<%= build.src %>/js'
            css : '<%= build.src %>/css'
            fonts : '<%= build.src %>/fonts'
            svg : '<%= build.src %>/fonts/svg'

        #package.jsonの読み込み
        pkg : pkg

        meta:
          banner: '/*! compile at <%= grunt.template.today("yyyy-mm-dd, TT") %> */'

#  ********************* TASK START! ****************************


## ========================================================##
#  ********************* CSS ****************************
## ========================================================##

        # Compass
        compass:
            dist:
                options:
                    config: 'config.rb'

        # SASS
        sass:
            dev:
                options:
                    sourcemap: true
                    compass: true
                    style: "expanded"
                    lineNumbers: true
                    cacheLocation: "/Users/shuuheyhey/.sass-cache"
                    require : 'ceaser-easing'
                files:
                    '<%= dir.css %>/<%= file.maincss %>': '<%= dir.sass %>/style.scss'


        #CSSのベンダー接頭辞をいろいろする
        autoprefixer:
            options:
                browsers: ['ios >= 5', 'android >= 2.3','last 2 version', 'ie 8']
            dist:
                src: '<src.css %>/<%= file.maincss %>'

        # Grunt task that runs CSSCSS, a CSS redundancy analyzer.
        csscss:
            dist:
                src: ["<%= dir.css %>/<%= file.maincss %>"]

        # Sort CSS properties in specific order.
        csscomb:
            dist:
                files:
                    '<%= build.css %>/<%= file.maincss %>': ['<%= build.css %>/<%= file.maincss %>']

    #CSSの文法check
        csslint:
            dist:
                options:
                    csslintrc: '.csslintrc'
                src: ['<%= build.css %>/<%= file.maincss %>']

    # Minify CSS files with CSSO.
        csso:
            dist:
                options:
                    banner: '<%= meta.banner %>'
                files:
                    '<%= build.css %>/<%= file.maincss %>': ['<%= build.css %>/<%= file.maincss %>']

        # 散らばったメディアクエリをまとめる
         cmq:
            dev:
                files:
                    '<%= build.css %>/': ['<%= build.css %>/<%= file.maincss %>']

        # IE 9以下の1つのCSSファイル当たり4,095個までしかセレクターを認識しない問題を自動で解決
        bless:
            css:
                options:
                    cacheBuster: false
                    compress: true
                files:
                    "<%= build.css %>/<%= file.maincss %>": "<%= build.css %>/<%= file.maincss %>"

## ========================================================##
#  ********************* JS ****************************
## ========================================================##

        #ファイルの結合
        concat:
            options :#プロジェクトの名前と日時を先頭に記入
                banner: '<%= meta.banner %>'

            #headerで読み込むJavaScript
            # head :
                # src :[
                    # '<%= dir.js %>/vendor/modernizr.custom.js'
                # ]
                # dest : '<%= dir.js %>/head.js'

            foot : #footerで読み込むJavaScript
                src : [
                        '<%= dir.js %>/foot/webfont.js'
                        '<%= dir.js %>/foot/common.js'
                        '<%= dir.js %>/foot/jquery.flexslider.js'
                        '<%= dir.js %>/foot/jquery.sticky-kit.min.js'
                        '<%= dir.js %>/foot/owl.carousel.js'
                        '<%= dir.js %>/foot/jquery.easing.1.3.js'
                        '<%= dir.js %>/foot/function.js'
                        '<%= dir.js %>/foot/social.js'
                    ]
                dest : '<%= dir.js %>/foot.js'

        # jsの圧縮
        uglify:
                options : #プロジェクトの名前と日時を先頭に記入
                    banner: '<%= meta.banner %>'
                head:
                    files:
                        "<%= dir.js %>/head.min.js": ["<%= dir.js %>/head.js"]
                foot:
                    files:
                        "<%= dir.js %>/foot.min.js": ["<%= dir.js %>/foot.js"]
                gmap:
                    files:
                        "<%= dir.js %>/gmap/gmap.min.js": ["<%= dir.js %>/gmap/gmap.js"]
                modernizr:
                    files:
                        "<%= dir.js %>/head/modernizr.custom.min.js": ["<%= dir.js %>/head/modernizr.custom.46247.js"]

        #jsの文法チェック
        jshint:
                files: [
                    "Gruntfile.js"
                    "package.json"
                    ".jshintrc"
                    "<%= dir.js %>/head.min.js"
                    "<%= dir.js %>/foot.min.js"
                    ]
                options: #設定は root に置いた .jshintrc から取得
                    jshintrc: ".jshintrc"

        # coffee script コンパイル
         coffee:
              # options:
              #   sourceMap : true
              mycoffee :
                src : '<%= dir.coffee %>/*.coffee'
                dest : '<%= dir.js %>/add/coffee.js'


## ========================================================##
#  ********************* WebFont ****************************
## ========================================================##

    # SVG to webfont converter for Grunt.
        webfont:
            dist:
                src: '<%= dir.svg %>/**/*.svg'
                dest: '<%= dir.font %>'
                destCss: '<%= dir.sass %>/_fonts/'
                options:
                    font: 'original-iconfont'
                    types: ['woff', 'ttf']
                    stylesheet: 'scss'
                    htmlDemo: true
                    syntax: 'bootstrap'
                    relativeFontPath: '/_cmn/fonts/'
                    htmlDemoTemplate: 'files/template.html'


## ========================================================##
#  ********************* IMG ****************************
## ========================================================##

        # Imagemin
        imagemin:
            dev :
                optimizationLevel: 2
                # pngquant: true
                files : [
                    expand: true
                    src: '<%= dir.dist %>/**/*.{png,jpg,jpeg,JPG}'
                ]

        # ImageOptim, ImageAlpha and JPEGmini part of your automated build process
        imageoptim:
            options:
                imageAlpha: true
                jpegMini: false
                quitAfter: true
            dist:
                src: '<%= dir.dist %>/**/*.{png,jpg,jpeg,JPG}'

        # Grunt task for creating spritesheets and their coordinates
        sprite:
            dist:
                src: [
                    '<%= dir.img %>/_sprite/*.png'
                ]
                destImg: '<%= dir.img %>/_sprite/sprite/sprite.png'
                imgPath: '/_cmn/img/_sprite/sprite/sprite.png'
                destCSS: '<%= dir.sass %>/_sprite/_sprite.scss'
                algorithm: 'binary-tree'  #  binary-tree, top-down, left-right, diagonal ,alt-diagonal
                padding: 2
                cssFormat : 'scss',
                engine : 'auto',  #  auto, phantomjs, canvas, gm
                # cssTemplate: 'files/spritesmith.mustache'
                # cssOpts: { functions: false }


## ========================================================##
#  ********************* SERVER ****************************
## ========================================================##


        # サーバー立ち上げ
        connect:
            server:
                options:
                    port: 3333
                    base: '<%= dir.src %>'
                    keepalive: true
                    open: 'http://localhost:3333/'
                    # hostame: null
                    # hostname: '*'

        # Grunt plugin to run Google PageSpeed Insights as part of CI
        pagespeed:
            options:
                key: 'Your Key'
            dist:
                url: 'http://bodyshop-shinwa.co.jp/'
                paths: ['/']
                locale: 'en_US'
                strategy: 'mobile'
                threshold: 80

        browser_sync:
            files:
                src : [
                    "<%= dir.css %>/<%= file.maincss %>"
                    "<%= dir.src %>/**/*.html"
                    "<%= dir.js %>/head.min.js"
                    "<%= dir.js %>/foot.min.js"
                    "<%= dir.src %>/**/*.{png,jpg,jpeg,JPG}"
                ]
            options:
                proxy:
                    host: "shinwa.new"
                    watchTask: true
                    debugInfo: true
                    ghostMode:
                            scroll: true
                            links: true
                            forms: true


## ========================================================##
#  ********************* GUIDE ****************************
## ========================================================##

        styleguide:
            dist:
                files:
                    "<%= dir.doc %>/style": "<%= dir.css %>/<%= file.maincss %>"

        # KSS styleguide generator for grunt.
        kss:
            options:
                includeType: 'sass'
                includePath: '<%= dir.sass %>/style.scss'
                template: 'docs/template'
            dist:
                files:
                    # dest : src
                    'docs/': ['files/css/sass']


## ========================================================##
#  ********************* BUILD ****************************
## ========================================================##


        #ファイルの削除
        clean:
                js:
                    src : [
                        '<%= dir.js %>/head.js'
                        '<%= dir.js %>/foot.js'
                    ]
                build:
                    src : '<%= dir.dist %>/'
                guide:
                    src : '<%= dir.doc %>/'
                css:
                    src :'<%= dir.css %>/style.*'
                reset:
                    src :[
                        ".bower"
                        ".gem"
                        ".jam"
                        ".bundle"
                        "node_modules"
                        "<%= dir.dist %>"
                        "<%= dir.doc %>"
                        "Gemfile.lock"
                    ]

        # ファイルを移動させる
        copy:
            main :
                expand: true
                dot: true
                cwd : '<%= dir.root %>/'
                src : ['**'].concat exclude
                dest : '<%= dir.dist %>/'
                # filter: 'isFile'


        #Gzip圧縮
        compress:
            main:
                options:
                    mode: 'gzip'

                expand: true
                cwd: '<%= dir.dist %>/'
                src: ['**/*']
                dest: '<%= dir.dist %>/'


## ========================================================##
#  ********************* WATCH ****************************
## ========================================================##

        watch:
            options:
                livereload: true
            # sass:
            #     files: [
            #         "<%= dir.sass %>/*.scss"
            #         "<%= dir.sass %>/**/*scss"
            #     ]
            #     tasks: [
            #         "c"
            #     ]

            css:
                files: [
                    "<%= dir.css %>/<%= file.maincss %>"
                ]
                tasks: [
                    "c"
                ]

            js:
                files: [
                    "<%= dir.js %>/head/*js"
                    "<%= dir.js %>/foot/*js"
                    "<%= dir.js %>/gmap/gmap.js"
                ]
                tasks: [
                    "js"
                ]

            # sprite:
            #     files: ["<%= sprite.dist.src %>"]
            #     tasks: [
            #         "s"
            #     ]

            coffee:
                files: ["<%= dir.coffee %>/*.coffee"]
                tasks: [
                    "coffee"
                ]

            fonts:
                files: ["<%= dir.svg %>/**/*.svg"]
                tasks: [
                    "font"
                ]

            # styleguide:
            #     files: ["<%= dir.css %>/<%= file.maincss %>"]
            #     tasks: [
            #         "guide"
            #     ]

## ========================================================##
#  ********************* EXEC ****************************
## ========================================================##

        # 喋ってくれる
        exec:
            start:
                command: 'say grunt start!'

            build:
                command: 'say build finished!'

            js:
                command: 'say js compressed!'

            watch:
                command: 'say watch start!'

            sass:
                command: 'say sass compiled!'

            startlivereload:
                command: 'say livereload start!'

            onlivereload:
                command: 'say livereload wow!'

            server:
                command: 'say server start!'

## ========================================================##
#  ********************* Growl ****************************
## ========================================================##

        notify:
            start:
                options:
                    title: "GRUNT START!"
                    message: "grunt is running!"

            sass:
                options:
                    title: "SASS"
                    message: "SASS compile finished!"

            build:
                options:
                    title: "BUILD"
                    message: "Build finished!"

            js:
                options:
                    title: "JavaScript"
                    message: "JavaScript compressed!"

            server:
                options:
                    title: "SERVER START!"
                    message: "Server is ready!"

        # エラーが起きたらGrowlで通知
        growl:
            notify: true

    # loadNpmTasksを package.json から自動読み込み
    for taskName of pkg.devDependencies
        grunt.loadNpmTasks taskName  if taskName.substring(0, 6) is "grunt-"


## ========================================================##
#  ********************* Task Alias ****************************
## ========================================================##

    # gruntって打った時デフォルトで動くタスク
    grunt.registerTask "default", [
        "exec:start"
        "notify:start"
        "f"
        "js"
        "w"
    ]
    #監視スタート
    grunt.registerTask 'w', [
        "exec:watch"
        'watch'
    ]
    # Sass
    grunt.registerTask 'c', [
        # 'clean:css'
        # 'sass'
        'autoprefixer'
        'notify:sass'
    ]
    # jsファイルの結合、圧縮
    grunt.registerTask 'js', [
        'concat'
        'uglify'
        'clean:js'
        "notify:js"
    ]
    # buildファイルの作成
    grunt.registerTask 'b', [
        'clean:build'
        # "f"
        # "s"
        "js"
        'copy'
        "csscomb"
        "cmq"
        "bless"
        "csso"
        # "csslint"
        # 'compress'  #Gzip
        # "img"
        "exec:build"
        "notify:build"
    ]
    #スタイルガイドの作成
    grunt.registerTask 'g', [
        'clean:guide'
        'styleguide'
        ]

    #RESET
    grunt.registerTask 'reset', [
        'clean:reset'
        ]

    #画像圧縮
    grunt.registerTask 'img', [
        'imagemin'
        'imageoptim'
    ]

    # WebFonts
    grunt.registerTask 'f', [
        "webfont"
    ]
    # Sprite
    grunt.registerTask 's', [
        "sprite"
    ]

    # WebFonts
    grunt.registerTask 'speed', [
        "pagespeed"
    ]

## ========================================================##
#  ********************* EXCLUDE ****************************
## ========================================================##

  # buildしたとき除外するもの
exclude = [
  '!sass/**'  #<%= dir.dist %>みたいな書き方は出来ないので注意
  '!**/sass/**'  #いっこ下の階層の場合
  '!**/svg/**'
  '!less/**'
  '!coffee/**'
  '!**/.DS_Store'
  '!.DS_Store'
  '!**/Thumbs.db'
  '!**/*.coffee'
  '!**/*.map'
  '!**/*.scss'
  '!**/*.less'
  '!**/*.s.css'
  '!**/*.l.css'
  '!**/coffee/'
  '!**/sass/'
  '!**/coffee/**'
  '!**/less/'
  '!**/_notes/'
  '!**/.idea/'
  '!**/.gitignore'
  '!**/*.mno'
  '!**/Templates/'
  '!**/Library'
  '!**/*.dwt'
  '!**/*.lbi'
  '!**/*.fla'
]