Grunt 메모.

여러 CSS, JavaScript 파일을 Grunt를 사용하여 단번에 각각 하나의 파일로 minfy합니다.
절차는 크고,
① Gruntfile 작성
② package.json 쓰기
③ 필요한 패키지 설치
④ html CSS, JavaScript 지정 부분에 build 코멘트 추가
⑤ grunt 태스크 실행

최종 폴더 구성은 다음과 같습니다. src 폴더에는 작업 대상 파일군을 넣어 둡니다. 처리 후의 파일군은 dist 폴더내에 작성됩니다만, 폴더 마다 자동적으로 생성되므로, 미리 준비할 필요는 없습니다. node_module에는 grunt의 패키지류가 들어가지만, 이쪽도 순서 ③에서 자동적으로 생성됩니다.

① Gruntfile 작성

Gruntfile의 예입니다.

Gruntfile.coffee

module.exports = (grunt) ->
    require('load-grunt-tasks')(grunt)

    grunt.initConfig
        pkg : grunt.file.readJSON 'package.json'

        path :
            app  : 'src'
            dist : 'dist'
            tmp  : '.tmp'

        clean :
            dist :
                options :
                    force : true
                files : [{
                    dot : true
                    src : [
                        '<%= path.tmp %>'
                        '<%= path.dist %>'
                    ]
                }]

        useminPrepare :
            options :
                dest : '<%= path.dist %>'
                html : [ '<%= path.app %>/*.html' ]

        usemin :
            options :
                assetesDirs : '<%= path.dist %>'
            html : [ '<%= path.dist %>/*.html' ]

        copy :
            dist :
                files : [{
                    expand : true
                    dot    : true
                    cwd    : '<%= path.app %>'
                    dest   : '<%= path.dist %>'
                    src    : [
                        '*.html'
                    ]
                }, {
                    expand : true
                    dot    : true
                    cwd    : '<%= path.app %>'
                    dest   : '<%= path.tmp %>'
                    src    : [
                        'js/**/*.js'
                        'css/**/*.css'
                    ]
                }]
            dev :
                files : [{
                    expand : true
                    dot    : true
                    cwd    : '<%= path.app %>'
                    dest   : '<%= path.dist %>'
                    src    : [
                        '*.html'
                        '*.json'
                        'js/**/*.js'
                        'css/**/*.css'
                    ]
                }]

        grunt.registerTask 'default', [
            'clean'
            'copy:dev'
        ]

        grunt.registerTask 'build', [
            'clean'
            'copy:dist'
            'useminPrepare'
            'concat'
            'uglify'
            'cssmin'
            'usemin'
        ]

path에 지정되어 있는 디렉토리는, src: 입력 파일의 디렉토리, dist: 출력 파일의 디렉토리, .tmp: 작업 디렉토리입니다. minfy 하는 파일군은 한 번 .tmp 에 카피하고 나서 작업됩니다. 디버깅 중에는 minfy되어 버리면 귀찮기 때문에 grunt.registerTask 'default'에서는 입력 파일을 그대로 dist에 복사하는 것만의 작업으로하고 있습니다. minfy를 실행할 때 grunt.registerTask 'build'의 작업을 수행합니다. 두 작업 모두 먼저 clean을 실행하여 출력 및 작업 디렉토리의 내용을 삭제합니다.
minfy 처리의 동작으로서는,
1. clean으로 출력·작업 디렉토리의 내용을 삭제
2. minfy가 필요없는 파일군을 출력 디렉토리에 복사
3. 지정된 파일(CSS or JavaScript)을 결합
4. minfy 실행
같은 상태입니다.

② package.json 쓰기

(예)

package.json

{
  "name": "grunt sample",
  "version": "1.0.0",
  "private": true,
  "devDependencies": {

  }
}

"devDependencies"안에 필요한 패키지군을 써 갑니다만, 다음의 순서로 자동적으로 추기된다(편리!) 때문에 여기까지로 괜찮습니다.

③ 필요한 패키지 설치

Gruntfile에서 지정한 작업에 필요한 패키지를 npm을 사용하여 설치합니다. --save-dev 옵션을 사용하여 현재 디렉토리에 "node_module"디렉토리를 작성하여 패키지를 설치할 수 있습니다. 명령줄에서 Grundfile이 있는 디렉토리에 다음 명령을 입력합니다.

$npm install --save-dev grunt
$npm install --save-dev grunt-contrib-clean
$npm install --save-dev grunt-contrib-concat
$npm install --save-dev grunt-contrib-copy
$npm install --save-dev grunt-contrib-csmin
$npm install --save-dev grunt-contrib-uglify
$npm install --save-dev grunt-contrib-usemin
$npm install --save-dev load-grunt-tasks

그러면 자동으로 package.json 안에도 위의 패키지류의 기술이 추기되어 있습니다.

④ html CSS, JavaScript 지정 부분에 build 코멘트 추가

src 안에 있는 html의 CSS, JavaScript를 로드하는 부분에 다음과 같이 코멘트를 추가합니다. 이렇게 하면, 코멘트로 둘러싼 부분의 복수의 css, js 파일을 지정한 1 파일에 결합·minfy 해 줍니다.
쓰는 방법은

samplecode.html

<!-- build:[ファイルタイプ css or js](.tmp) [出力ファイル名] -->
css or js files...
<!-- endbuild -->

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">

        <!-- build:css(.tmp) css/main.css -->
        <link href="css/style1.css" rel="stylesheet">
        <link href="css/style2.css" rel="stylesheet">
        <!-- endbuild -->
    </head>
    <body>
        <h2>Hello, world!</h2>

        <!-- build:js(.tmp) js/main.js -->
        <script src="js/script1.js"></script>
        <script src="js/script2.js"></script>
        <!-- endbuild -->
    </body>
</html>

⑤ grunt 태스크 실행

여기까지 할 수 있으면, 나머지는 커맨드 라인으로부터,

$grunt build

그리고 src 내의 파일의 css, js 폴더 내의 css, js 파일이 minfy 되어 dist 디렉토리에 출력됩니다.