Javascript에서 독특한 빌드 영역을 담당하는 grunt를 알아보자
(혹시 java개발자라면 ant를 생각하시면 됩니다.)
GRUNTThe JavaScript Task RunnerTEST :
mulder@~/Project/mulder/tools$ mkdir grunt1
mulder@~/Project/mulder/tools$ cd grunt1
mulder@~/Project/mulder/tools/grunt1$ ls
mulder@~/Project/mulder/tools/grunt1$ npm init
mulder@~/Project/mulder/tools/grunt1$ sudo npm -g install grunt-cli
mulder@~/Project/mulder/tools/grunt1$ npm -S install grunt
mulder@~/Project/mulder/tools/grunt1$ npm install grunt-contrib-concat --save-dev
mulder@~/Project/mulder/tools/grunt1$ grunt concat
mulder@~/Project/mulder/tools/grunt1$ npm install grunt-contrib-watch --save-dev
mulder@~/Project/mulder/tools/grunt1$ grunt watch
mulder@~/Project/mulder/tools/grunt1$ npm install grunt-contrib-uglify --save-dev
mulder@~/Project/mulder/tools/grunt1$ grunt uglify
TEST Gruntfile.js
module.exports = function(grunt) {
grunt.registerTask('hi', function() {
console.log('Hi Grunt !');
});
grunt.registerTask('bye', function() {
console.log('Bye Grunt !');
});
grunt.registerTask('both', ['hi', 'bye']);
// Project configuration.
grunt.initConfig({
concat: {
options: {
separator: '\n',
},
js : {src: ['js/1.js','js/2.js','js/3.js']
, dest: 'dist/js/app.built.js'},
css : {src: ['css/1.css','css/2.css']
, dest: 'dist/css/app.built.css'}
},
watch: {
js: {
files: ['js/**/*.js'],
tasks: ['concat']
},
css: {
files: ['css/**/*.css'],
tasks: ['concat']
},
},
uglify: {
options: {
mangle: {
except: ['jQuery', 'Backbone']
}
},
my_target: {
files: {
'dist/js/app.built.min.js': ['dist/js/app.built.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['concat', 'watch']);
};