Grunt 빌드 오류 문제 처리

1. grunt build ng-annotate couldn't process source due to parse error

Running "ngAnnotate:dist" (ngAnnotate) task Generating 

".tmp/concat/scripts/scripts.js" from: ".tmp/concat/scripts/scripts.js"...ERROR 

>> error: couldn't process source due to parse error 

>> Deleting local variable in strict mode (747:22816) 

Warning: Task "ngAnnotate:dist" failed. Used --force, continuing.

index.html 안에 포함된 자바스크립트 파일 중에 "strict mode"를 지원하지 못하는 파일 때문에 발생한 문제였다. 그래서 다음과 같이 build 태그 사이에서 제거하고 별도로 빼니 에러가 발생하지 않는다.

<!-- build:js({.tmp,app}) scripts/scripts.js -->

:

: 

<!-- endbuild -->

<script src="scripts/raphael.min.js"></script>

대신 다음과 같이 gruntfile.js에 해당 js 파일만 직접 복사하도록 만들어 주어야 한다.

copy: {

      dist: {

        files: [{

          expand: true,

          dot: true,

          cwd: '<%= yeoman.app %>',

          dest: '<%= yeoman.dist %>',

          src: [

            '*.{ico,png,txt}',

            '*.html',

            'scripts/raphael.min.js',

            'views/**/{,*/}*.html',

            'images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',

            'styles/fonts/{,*/}*.*'

          ]

2. font-awesome을 사용함으로써 발생하는 문제

bootstrap과 달리 font-awesome을 사용할 경우, 다음과 같이 font-awesome의 fonts, css 폴더를 dist 폴더에 직접 복사하도록 해주어야 한다.

copy: {

      dist: {

        files: [{

          ...

          ]

        }, {

          expand: true,

          cwd: '.tmp/images',

          dest: '<%= yeoman.dist %>/images',

          src: ['generated/*']

        }, {

          expand: true,

          cwd: 'bower_components/bootstrap/dist',

          src: 'fonts/*',

          dest: '<%= yeoman.dist %>'

        }, {

          expand: true,

          dot: true,

          cwd: 'bower_components/font-awesome/fonts/',

          src: ['*.*'],

          dest: '<%= yeoman.dist %>/bower_components/font-awesome/fonts'

        }, {

          expand: true,

          cwd: 'bower_components/font-awesome/css/',

          src: ['*.*'],

          dest: '<%= yeoman.dist %>/bower_components/font-awesome/css'

        }]

      },

      styles: {

        expand: true,

        cwd: '<%= yeoman.app %>/styles',

        dest: '.tmp/styles/',

        src: '{,*/}*.css'

      }

    },

역시 index.html에서도 다음과 같이 build 태그 바깥쪽에 위치시켜야 한다. bower:css 태그 안쪽에 넣으면 grunt build 시에 무조건 삭제가 된다.

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

    <!-- build:css(.) styles/vendor.css -->

    <!-- bower:css -->

    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />

    <!-- endbower -->

    <!-- endbuild -->

    <!-- build:css(.tmp) styles/main.css -->

    <link rel="stylesheet" href="styles/main.css">

    <!-- endbuild -->

    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css"/>