hahahaha

2. •를사용한로만들어진
•계열에서는대부분의개발자들이구사하는로되어있어서분야에서강력한기능을가지고있다

3. •
•로된패키지들을관리해주는툴
•리눅스세상의파이썬세상의자바세상의같은것
•현재디렉터리에있는파일에서의존성을확인한다

4. •
•새프로젝트를만든다
•
•지정된모듈을설치한다
•로실행해야설치할수있다
•에해당디펜던시를저장한다
•
•모듈을삭제한다
{
"name": "testproject",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"request": "^2.42.0"
}
} 중가장최신버전는가능은불가중가장최신버전은가능은불가정확히
문제가발생할경우만빼고다시설치해봅니다

5. •커피스크립트를사용하는경우로프로젝트디렉터리의메인에위치한다
•빌드에관한모든사항을정하는일종의배치파일이라고생각하면된다

6. •를적용한예제
module.exports= function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
}; 설정각각의플러그인이참조요구하는정보를여기에넣어준다플러그인을사용한다는것을알려준다로설치되어있어야하며에의존성선언이되어있어야한다설정

7. •태스크는원하는만큼선언이가능
•
•를선언한이름
•주로타겟이름으로많이사용
•와같이다른작업을하는동일태스크들을묶어서선언하는용도로가장많이사용된다

8. •커스텀태스크만들기
•별도의플러그인을만들기엔너무작은작업이지만빌드과정에서자동으로수행되었으면하는작업이있는경우에함수를줘서간단히선언할수있다
•와동일하게수행된다
grunt.registerTask('default', 'Hello world!', function() {
grunt.log.write('Hi, there!').ok();
});

10. •단순히파일을복사하는데사용
•서브디렉터리펴기필터적용등으로다양하게응용할수있음
copy: {
main: {
files: [
// includes files within path
{expand: true, src: ['path/*'], dest: 'dest/', filter: 'isFile'},
// includes files within path and its sub-directories
{expand: true, src: ['path/**'], dest: 'dest/'},
// makes all srcrelative to cwd
{expand: true, cwd: 'path/', src: ['**'], dest: 'dest/'},
// flattens results to a single level
{expand: true, flatten: true, src: ['path/**'], dest: 'dest/', filter: 'isFile'}
]
}
}

11. •여러파일을하나로합치는데사용
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/**/*.js'],
dest: 'dist/<%= pkg.name %>.js'
}
}

12. •최종출력후파일을난독화하는데사용
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */n'
},
dist: {
files: {
'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest%>']
}
}
},

13. •스타일시트를로빌드하는데사용
less: {
development: {
options: {
paths: ["assets/css"]
},
files: {
"path/to/result.css": "path/to/source.less"
}
},
production: {
options: {
paths: ["assets/css"],
cleancss: true,
modifyVars: {
imgPath: '"http://mycdn.com/path/to/images"',
bgColor: 'red'
}
},
files: {
"path/to/result.css": "path/to/source.less"
}
}
}

14. •로컬웹서버를띄운다
•간단히빌드된결과물을테스트하고싶거나이를포함하는경우에사용할수있다
connect: {
server: {
options: {
port: 8000,
base: '.'
}
}
}

15. •을사용하여을수행한다
•
•유닛테스트프레임워크
•상에서을포함한모든상호작용을테스트할수있다
•와함께사용하여실제로서버에서동작하는것과동일한시나리오를테스트해볼수있다
// Project configuration.
grunt.initConfig({
qunit: {
all: {
options: {
urls: [
'http://localhost:8000/test/foo.html',
'http://localhost:8000/test/bar.html',
]
}
}
},
connect: {
server: {
options: {
port: 8000,
base: '.'
}
}
}
});
// This plugin provides the "connect" task.
grunt.loadNpmTasks('grunt-contrib-connect');
// A convenient task alias.
grunt.registerTask('test', ['connect', 'qunit']);

16. •를사용하여자바스크립트를산정한다
•가수행되면콘솔에발생시함께출력된다
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
// options here to override JSHintdefaults
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
}

17. 에서호출하기
•그냥실행시키세요
task requirejs(type: Exec) {
commandLine'grunt', 'requirejs'
}

18. 좋은것들
•