angular2 の css, js, html を grunt で minifyする

この記事は、newsdict.hatenablog.jp から移設しました。

デプロイ時にminifyすることを考えてディレクトリ構成とともに [ $ grunt minify ] でcss, javascript, htmlをminifyするようにする

ディレクトリ構造

├── app (angular quickstart 標準ディレクトリ)
│   └── ****
├── assets (新たに追加)
│   ├── js     サンプルで使った css ディレクトリ
│   └── css   サンプルで使った js ディレクトリ
├── grunt (新たに追加)
│   └── minify.js minifyタスクをまとめた
├── lib (新たに追加)
│   ├── scripts.js (jsのリスト)
│   ├── csses.js (cssのリスト)
│   └── system.js (angular2 読み出し)
├── releases (新たに追加)
│   ├── minify.js (出力された minify済みjs)
│   ├── minify.js (出力された minify済みcss)
│   └── index.html (出力された minify済みindex.html)
├── tmp (新たに追加)
│   └── cache minify ファイル作成時の作業ディレクトリ
├── Gruntfile.js
├── index.html
├── src_index.html
└── package.json

lib/system.js

System.config({
  packages: {        
    app: {
      format: 'register',
      defaultExtension: 'js'
    }
  }
});
System.import('app/app.component')
      .then(null, console.error.bind(console));

lib/scripts.js

module.exports = [
  "node_modules/es6-shim/es6-shim.min.js",
  "node_modules/systemjs/dist/system-polyfills.js",
  "node_modules/angular2/es6/dev/src/testing/shims_for_IE.js",   
  "node_modules/angular2/bundles/angular2-polyfills.js",
  "node_modules/systemjs/dist/system.src.js",
  "node_modules/rxjs/bundles/Rx.js",
  "node_modules/angular2/bundles/angular2.min.js",
  "node_modules/angular2/bundles/http.dev.js",
  "assets/plugins/jquery/jquery.js",
  "assets/plugins/jquery/jquery-migrate.js",
  "assets/plugins/bootstrap/js/bootstrap.js",
  "lib/system.js"
];

lib/csses.js

module.exports = [
    "assets/css/style.css",
    "assets/self/css/newsdict.css"
];

Gruntfile.js

module.exports = function (grunt) {
    var pkg = grunt.file.readJSON('package.json');
    grunt.initConfig({});
    var config = {
        minify: require('./grunt/minify.js')(grunt)
    };
    grunt.config.merge(config.minify);
};

package.json ( 必要なmoduleのみ記述)

  "devDependencies": {
    "grunt-contrib-concat": "^1.0.0",
    "grunt-contrib-uglify": "^1.0.1",
    "grunt-contrib-cssmin": "^1.0.1",
    "grunt-css-url-replace": "^0.2.7",
    "grunt-minify-html": "^2.1.0",
}

grunt/minify.js

module.exports = function (grunt) {
    var scripts = require('../lib/scripts.js');
    var csses = require('../lib/csses.js');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-minify-html');
    grunt.loadNpmTasks('grunt-css-url-replace');
    grunt.registerTask('minify', ['concat', 'uglify', 'css_url_replace', 'cssmin', 'minifyHtml']);
    return {
        minifyHtml: {
            options: {
                cdata: true
            },
            dist: {
                files: {
                    'releases/index.html': 'src_index.html'
                }
            }
        },
        cssmin: {
            options: {
                shorthandCompacting: false,
                roundingPrecision: -1,
                keepSpecialComments: 0,
                processImport: true,
                root: './assets/css/'
            },
            target: {
                files: {
                'tmp/cache/cssmin.css': csses
                }
            }
        },
        css_url_replace: {
            options: {
                staticRoot: 'tmp/cache/'
            },
            replace: {
                files: {
                    'releases/minify.css': 'tmp/cache/cssmin.css'
                }
            }
        },
        concat: {
            files: {
                // 元ファイルの指定
                src : scripts,
                // 出力ファイルの指定
                dest: 'tmp/cache/concat.js'
            }
        },
        uglify: {
            dist: {
                files: {
                    // 出力ファイル: 元ファイル
                    'releases/minify.js': 'tmp/cache/concat.js'
                }
            }
        }
    };
};

src_index.html

<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
    <title>newsdict</title>

    <!-- Meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Favicon -->
    <link rel="shortcut icon" href="favicon.ico">

    <!-- Web Fonts -->
    <link rel='stylesheet' type='text/css' href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600&amp;subset=cyrillic,latin'>

    <link rel="stylesheet" href="minify.css">
    <!--[if lt IE 9]>
    <script src="/assets/plugins/respond.js"></script>
    <script src="/assets/plugins/html5shiv.js"></script>
    <script src="/assets/plugins/placeholder-IE-fixes.js"></script>
    <![endif]-->
    <script src="/minify.js"></script>
</script>
</head>

<body>
    <newsdict-web>Loading...</newsdict-web>
  </body>
</html>

実行コマンド

$ grunt minify

ToDo

  • minify用index(src_index.html)とdev用index(index.html)が分かれているので何とかする

コメントを残す

メールアドレスが公開されることはありません。