9.task 실행.

마지막 단계로 디버깅하기 쉽고, 관리하기 쉽게 task(작업)별로 나누어서 task를 실행하고 관리하는 예제 및 방법입니다.

html task

html 을 만드는 작업은 htmlhint 와 includes 모듈이 합니다. 이렇게 작업을 묶습니다.

Gruntfile.js 에서 사용하는 예제는 아래와 같습니다.

// html task
grunt.registerTask('html', [
        'htmlhint',
        'includes'
    ]
);

css task

마찬가지로 css 를 만드는 작업은 less,csslint,autoprefixer,csscomb,cssmin 모듈이 사용되므로 이렇게 작업을 묶습니다.

Gruntfile.js 에서 사용하는 예제는 아래와 같습니다.

// css task
grunt.registerTask('css', [
        'less',
        'csslint',
        'autoprefixer',
        'csscomb',
        'cssmin'
    ]
);

javascript task

javascript 를 만드는 작업 또한jshint,concat,uglify` 모듈을 사용하므로 이렇게 묶습니다.

Gruntfile.js 에서 사용하는 예제는 아래와 같습니다.

// javascript task
grunt.registerTask('js', [
        'newer:jshint',
        'concat',
        'uglify'
    ]
);

watch task

실시간으로 동기화를 시켜주는 watch 도 작업을 묶습니다.

Gruntfile.js 에서 사용하는 예제는 아래와 같습니다.

grunt.registerTask('serve', function (target) {
    if (target === 'dist') {
        return grunt.task.run(['connect', 'watch']);
    }

    grunt.task.run([
        'default', 
        'connect', 
        'watch'
    ]);
});

default task

또, 그런트는 기본작업 명령을 default 로 합니다. default 명령은 생략이 가능합니다. 이 작업도 묶습니다.

Gruntfile.js 에서 사용하는 예제는 아래와 같습니다.

grunt.registerTask('default', [
        'clean:dist',
        'concurrent',
        'copy:basic'
    ]
);

build task

개발자들과 용이하게 협업하기 위해 따로 작업을 하나 만듭니다. 작업 명령어는 build 입니다.

html 을 만들때 인클루드 파일이 포함되도록 만드는 작업인데 이것도 묶습니다.

Gruntfile.js 에서 사용하는 예제는 아래와 같습니다.

grunt.registerTask('build', [
        'clean:dev',
        'concurrent',
        'copy'
    ]
);