Entries

    Gruntにcoffeeとuglifyを足した版(2014/02改訂版)

    昨日、Gruntで自動化しているレシピとしてCompass, csslint, cssmin, watch, connectをあげましたが、肝心のCoffeeScriptを入れ忘れていました

    というかふだんCoffeeScriptはあまり使わないので(嫌いなわけではない)、入れておく必要がないかなー、と思っていたのですが、GruntfileをJSで書いていて、ダサいな―、Coffeeで書きたいな―、と思い直しました。

    ついでにjsファイルの圧縮もuglifyを使ってやっておきます。


    今日のフローチャート(昨日の続き)
    1. grunt-contrib-coffeeをインストール(npm install grunt-contrib-coffee --save-dev)
    2. Gruntfile.coffeeにcoffeeの挙動を書き込む
    3. watchもcoffeeを監視するように変更=>動くようなら次へ
    4. grunt-contrib-uglifyをインストール(npm install grunt-contrib-uglify --save-dev)
    5. Gruntfile.coffeeにuglifyの挙動を書き込む
    6. watchも圧縮前のjsを監視するように変更

    方針としては、'coffee'ディレクトリが更新されたら'devjs'に出力、'devjs'が更新されたら'js'に圧縮。

    CSSも同様に、'scss'ディレクトリが更新されたら'devcss'に出力、'devcss'が更新されたら'css'に圧縮。



    coffee

    プラグインのロード:

    
         #plugin
         grunt.loadNpmTasks 'grunt-contrib-coffee'
    
    

    coffee形式でGruntfileを書くときは、コメントが//でなく#になる。

    coffeeの挙動部分は次の通り:

    
              coffee:
                   compile:
                        expand: true
                        flatten: true
                        cwd: './'
                        src: './coffee/*.coffee'
                        dest: './devjs/'
                        ext: '.js'
    
    

    coffeeディレクトリにある、拡張子が.coffeeのソースをコンパイルして、devjsディレクトリに、拡張子を.jsにして保存している。


    uglify

    プラグインのロード:

    
         #plugin
         grunt.loadNpmTasks 'grunt-contrib-uglify'
    
    

    uglifyの挙動部分:

    
              uglify:
                   options:
                        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */'
                   minimize:
                        expand: true
                        flatten: true
                        cwd: './'
                        src: './devjs/*.js'
                        dest: './js'
                        ext: '.min.js'
    
    

    devjsに出力されたjsファイルを圧縮し、jsディレクトリにバナー付きで出力。


    結局、Gruntfile.coffeeはどうなったのか

    Compassやcssminも含めて記述を直した:

    
    module.exports = (grunt) ->
         #config
         grunt.initConfig
              pkg: grunt.file.readJSON 'package.json'
              compass:
                   dev:
                        options:
                             sassDir: './scss'
                             cssDir: './devcss'
                             imagesDir: './img'
              cssmin:
                   options:
                        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */'
                   minimize:
                        expand: true
                        flatten: true
                        cwd: './'
                        src: './devcss/*.css'
                        dest: './css/'
                        ext: '.min.css'
              csslint:
                   check:
                        src: './css/*.css'
              coffee:
                   compile:
                        expand: true
                        flatten: true
                        cwd: './'
                        src: './coffee/*.coffee'
                        dest: './devjs/'
                        ext: '.js'
              uglify:
                   options:
                        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */'
                   minimize:
                        expand: true
                        flatten: true
                        cwd: './'
                        src: './devjs/*.js'
                        dest: './js'
                        ext: '.min.js'
              watch:
                   options:
                        livereload:
                             port: 35729
                   files: ['scss/*.scss', 'devcss/*.css', 'coffee/*.coffee', 'devjs/*.js']
                   tasks: ['compass', 'cssmin', 'csslint', 'coffee', 'uglify']
              connect:
                   server:
                        options:
                             port: 8080
                             hostname: '192.168.1.4'
         #plugin
         grunt.loadNpmTasks 'grunt-contrib-compass'
         grunt.loadNpmTasks 'grunt-contrib-cssmin'
         grunt.loadNpmTasks 'grunt-contrib-csslint'
         grunt.loadNpmTasks 'grunt-contrib-connect'
         grunt.loadNpmTasks 'grunt-contrib-coffee'
         grunt.loadNpmTasks 'grunt-contrib-uglify'
         grunt.loadNpmTasks 'grunt-contrib-watch'
         #tasks
         grunt.registerTask 'default', ['compass', 'cssmin', 'csslint', 'coffee', 'uglify', 'connect', 'watch']
    
    

    ダイエット

    (2月27日分)

    407日目。

    体重64.8kg(17.7kg減)。体脂肪率18.2%(9.4%減)。



    ぼくのダイエット法はコチラ(ケトジェニックダイエットを認知行動療法でサポートしたもの)



    ダイエット指南のメルマガ発行してますダイエットの教科書@まぐまぐ



    認知行動療法ダイエットプログラム主催しています


    関連記事
    スポンサーサイト
    この記事にトラックバックする(FC2ブログユーザー)
    http://orangeprose.blog.fc2.com/tb.php/979-4021b48f

    トラックバック

    コメント

    コメントの投稿

    コメントの投稿
    管理者にだけ表示を許可する

    Appendix

    counter

    FC2ブログ

    ブログ

    リコメンド




    ノートンインターネットセキュリティ


    ブログランキング

    QRコード

    QR

    メールで更新を受け取る



    提供:PINGOO!

    ブロとも申請フォーム

    この人とブロともになる