Grunt 시작하기(자동 작업 실행기)_javascript 기술

Javascript 개발 과정에서 파일 병합, 코드 압축, 문법 오류 확인, Sass 코드를 CSS 코드로 변환 등 반복적인 작업을 자주 접하게 됩니다. 일반적으로 우리는 다양한 작업을 완료하기 위해 다양한 도구를 사용해야 하는데, 이는 반복적인 작업이고 시간이 많이 소요됩니다. Grunt는 이러한 문제를 해결하기 위해 고안된 도구로, 다양한 작업을 자동으로 관리하고 실행할 수 있도록 도와줍니다.

간단히 말하면 Grunt는 미리 설정된 순서에 따라 일련의 작업을 자동으로 실행하는 자동 작업 실행기입니다. 이를 통해 작업 흐름이 간소화되고 반복 작업의 부담이 줄어듭니다.

## 설치

Grunt는 Node.js를 기반으로 설치하기 전에 Node.js를 먼저 설치한 후 다음 명령을 실행해야 합니다.

sudo npm install grunt-cli -g

grunt-cli는 grunt 명령줄 인터페이스가 설치되었음을 나타내고 매개변수 g는 전역 설치를 나타냅니다.

Grunt는 명령줄 인터페이스를 설치하는 것 외에도 필요에 따라 해당 모듈도 설치해야 합니다. 프로젝트마다 동일한 모듈의 다른 버전이 필요할 수 있으므로 이러한 모듈은 로컬로 설치해야 합니다.

먼저 프로젝트의 루트 디렉터리에 package.json 텍스트 파일을 생성하여 현재 프로젝트에 필요한 모듈을 지정합니다. 여기에 예가 있습니다.

{ “name”: “my-project-name”, “version”: “0.1.0”, “author”: “Your Name”, “devDependencies”: { “grunt”: “0.x.x”, “grunt-contrib-jshint”: “<em>“, “grunt-contrib-concat”: “~0.1.1”, “grunt-contrib-uglify”: “~0.1.0”, “grunt-contrib-watch”: “~0.1.4” } }</em>

위의 package.json 파일에는 프로젝트의 이름과 버전을 나타내는 것 외에도 프로젝트가 의존하는 grunt 모듈과 버전도 devDependency 속성에 지정되어 있습니다. grunt 핵심 모듈은 최신 버전 0.x.x이고 jshint 플러그인은 최신 버전입니다. concat 플러그인은 버전 0.1.1 이상이고, uglify 플러그인은 버전 0.1.0 이상이며, watch 플러그인은 버전 0.1 이상입니다. .4.

그런 다음 프로젝트의 루트 디렉터리에서 다음 명령을 실행하면 이러한 플러그인이 node_modules 하위 디렉터리에 자동으로 설치됩니다.

npm install

위 방법은 package.json이 이미 존재하는 상황을 위한 방법입니다. package.json 파일을 자동으로 생성하려면 npm init 명령을 사용하고 화면의 지시에 따라 필요한 모듈의 이름과 버전에 답하면 됩니다.

npm init

기존 package.json 파일에 Grunt 모듈이 포함되어 있지 않은 경우 Grunt 모듈을 직접 설치할 때 --save-dev 매개변수를 추가하면 해당 모듈이 package.json 파일에 자동으로 추가됩니다.

npm install <module> —save-dev

예를 들어 위의 package.json 파일에 지정된 모듈에 해당하면 다음 npm 명령을 실행해야 합니다.

npm install grunt —save-dev npm install grunt-contrib-jshint —save-dev npm install grunt-contrib-concat —save-dev npm install grunt-contrib-uglify —save-dev npm install grunt-contrib-watch —save-dev

## 명령 스크립트 파일 Gruntfile.js

모듈이 설치된 후 다음 단계는 프로젝트의 루트 디렉터리에 새 스크립트 파일 Gruntfile.js를 만드는 것입니다. package.json이 npm의 구성 파일인 것처럼 grunt의 구성 파일입니다. Gruntfile.js는 일반적인 Node.js 모듈이 작성되는 방식입니다.

module.exports = function(grunt) { // 配置Grunt各种模块的参数 grunt.initConfig({ jshint: { / jshint的参数 <em>/ }, concat: { /</em> concat的参数 <em>/ }, uglify: { /</em> uglify的参数 <em>/ }, watch: { /</em> watch的参数 <em>/ } }); // 从node_modules目录加载模块文件 grunt.loadNpmTasks(‘grunt-contrib-jshint'); grunt.loadNpmTasks(‘grunt-contrib-concat'); grunt.loadNpmTasks(‘grunt-contrib-uglify'); grunt.loadNpmTasks(‘grunt-contrib-watch'); // 每行registerTask定义一个任务 grunt.registerTask(‘default', [‘jshint', ‘concat', ‘uglify']); grunt.registerTask(‘check', [‘jshint']); };</em>

위 코드는 그런트 코드의 세 가지 방법을 사용합니다. grunt.initConfig: 다양한 모듈의 매개변수를 정의하며, 각 멤버 항목은 동일한 이름을 가진 모듈에 해당합니다.
grunt.loadNpmTasks: 작업을 완료하는 데 필요한 모듈을 로드합니다. grunt.registerTask: 특정 작업을 정의합니다. 첫 번째 매개변수는 작업 이름이고, 두 번째 매개변수는 작업이 순서대로 사용해야 하는 모듈을 나타내는 배열입니다. 기본 작업 이름은 매개 변수 없이 grunt 명령을 직접 입력하는 경우 호출될 모듈(이 예에서는 jshint, concat 및 uglify)을 나타냅니다. 이 예제의 check 작업은 jshint 플러그인을 사용하여 구문 검사를 수행함을 나타냅니다. 암호.
위 코드는 jshint(구문 오류 확인), concat(파일 병합), uglify(코드 압축), watch(자동 실행) 등 총 4개의 모듈을 로드합니다. 다음으로 사용방법은 2가지가 있습니다.

(1)
과 같은 특정 모듈을 명령줄에서 실행합니다.

grunt jshint

위 코드는 jshint 모듈을 실행하고 있음을 나타냅니다.

(2) 명령줄은 특정 작업을 수행합니다. 예를 들어

grunt check

위의 코드는 확인 작업을 실행하고 있음을 나타냅니다. 작업이 성공하면 "오류 없이 완료되었습니다."가 표시됩니다.

작업 이름이 지정되지 않은 경우 grunt를 입력하면 기본 작업이 실행됩니다.

## Gruntfile.js 예: grunt-contrib-cssmin 모듈

다음은 cssmin 모듈을 사용하여 Gruntfile.js 파일을 작성하는 방법을 보여줍니다. cssmin 모듈은 CSS 파일을 최소화하는 데 사용됩니다.

먼저 프로젝트의 루트 디렉터리에 모듈을 설치합니다.

npm install grunt-contrib-cssmin —save-dev

그런 다음 새 파일 Gruntfile.js를 만듭니다.

module.exports = function(grunt) { grunt.initConfig({ cssmin: { minify: { expand: true, cwd: ‘css/‘, src: [‘<em>.css', ‘!</em>.min.css'], dest: ‘css/‘, ext: ‘.min.css' }, combine: { files: { ‘css/out.min.css': [‘css/part1.min.css', ‘css/part2.min.css'] } } } }); grunt.loadNpmTasks(‘grunt-contrib-cssmin'); grunt.registerTask(‘default', [‘cssmin:minify','cssmin:combine']); };

위 코드의 세 가지 메소드에 대해서는 아래에서 자세히 설명하고, 하나씩 살펴보도록 하겠습니다.

(1)grunt.initConfig

grunt.initConfig 메소드는 모듈 구성에 사용되며 객체를 매개변수로 받아들입니다. 이 개체의 구성원은 사용된 동일한 이름의 모듈에 해당합니다. cssmin 모듈을 구성하고 있으므로 그 안에 cssmin 멤버(속성)가 있습니다.

cssmin(속성)은 여러 멤버를 포함하는 객체를 가리킵니다. 일부 시스템 설정 멤버(예: 옵션) 외에 다른 사용자 정의 멤버를 대상이라고 합니다. 모듈은 여러 대상을 가질 수 있습니다. 위 코드에서 cssmin 모듈에는 두 개의 대상이 있습니다. 하나는 CSS 파일을 압축하는 데 사용되는 "combine"이며, 다른 하나는 여러 CSS 파일을 하나로 병합하는 데 사용됩니다. . 문서.

각 대상의 특정 설정에 대해서는 템플릿 설명서를 참조해야 합니다. cssmin에 관한 한 축소 대상 매개변수의 구체적인 의미는 다음과 같습니다.

expand: true로 설정하면 다음 파일 이름의 자리 표시자(예: 번호)를 특정 파일 이름으로 확장해야 함을 의미합니다.
cwd: 처리할 파일(입력)이 있는 디렉터리입니다. src: 처리해야 할 파일을 나타냅니다. 배열 형식인 경우 배열의 각 항목은 파일 이름이며 와일드카드를 사용할 수 있습니다.
dest: 처리된 파일 이름이나 디렉터리를 나타냅니다. ext: 처리된 파일 접미사 이름을 나타냅니다.
위의 매개변수 외에도 모든 그런트 모듈에 공통되는 매개변수도 있습니다.

filter: 파일 이름을 필터링하기 위해 부울 값을 반환하는 함수입니다. 반환 값이 true인 파일만 grunt에 의해 처리됩니다. 점: 마침표(.)로 시작하는 시스템 파일을 일치시킬지 여부입니다.
makeBase: true로 설정하면 파일 경로의 마지막 부분만 일치합니다. 예를 들어, a?b는 /xyz/123/acb와 일치할 수 있지만 /xyz/acb/123과는 일치할 수 없습니다.
와일드카드의 의미는 다음과 같습니다. : /를 제외한 모든 문자와 일치합니다. ?: /를 제외하고 단일 문자와 일치합니다.
**: /를 포함한 모든 문자와 일치합니다. {}: "또는"(또는) 관계를 나타내는 쉼표로 구분된 목록이 허용됩니다.
!: 패턴 시작 부분에 사용되며, 일치하지 않는 사례만 반환됨을 나타냅니다.
예를 들어, foo/.js는 이름이 .js로 끝나는 foo 디렉터리 아래의 파일과 일치하고, foo//.js는 foo 디렉터리 아래의 파일과 이름이 .로 끝나는 모든 하위 디렉터리와 일치합니다. !.css로 끝나는 파일은 ".css" 이외의 접미사가 있는 모든 파일과 일치한다는 의미입니다.

src 속성을 설정하기 위해 와일드카드를 사용하는 추가 예:
(2)grunt.loadNpmTasks

grunt.loadNpmTasks 메소드는 모듈 파일을 로드합니다. (3)grunt.registerTask

grunt.registerTask 메소드는 특정 작업을 호출하는 방법을 정의합니다. "default" 작업은 매개 변수가 제공되지 않고 grunt 명령이 직접 입력되면 "cssmin:minify"가 먼저 실행된 다음 "cssmin:combine"이 실행된다는 의미입니다. 그런 다음 병합되었습니다. 압축만 수행하거나 병합만 수행하는 경우 grunt 명령 뒤에 "모듈 이름: 대상 이름"을 지정해야 합니다.
grunt-contrib-clean: 파일을 삭제합니다.
* grunt-contrib-compass: compass를 사용하여 sass 파일을 컴파일합니다.
* grunt-contrib-concat: 파일을 통합합니다.
* grunt-contrib-copy: 파일을 복사합니다.
* grunt-contrib-cssmin: CSS 파일을 압축하고 병합합니다.
* grunt-contrib-imagemin: 이미지 압축 모듈.
* grunt-contrib-jshint: JavaScript 구문을 확인하세요.
* grunt-contrib-uglify: JavaScript 파일을 압축하고 병합합니다.
* grunt-contrib-watch: 파일 변경 사항을 모니터링하고 해당 조치를 취합니다.
모듈의 접두사가 grunt-contrib인 경우 해당 모듈이 grunt 개발팀에 의해 유지 관리된다는 의미이고, 접두사가 grunt(예: grunt-pakmanager)인 경우 타사에 의해 유지 관리된다는 의미입니다. 개발자.

아래에서 몇 가지 모듈을 선택하여 해당 구성 매개변수가 작성되는 방법, 즉 grunt.initConfig 메소드에서 각 모듈을 구성하는 방법을 확인하세요.

### grunt-contrib-jshint

jshint는 세미콜론 사용이 올바른지, 괄호 작성을 잊었는지 등과 같은 구문 오류를 확인하는 데 사용됩니다. grunt.initConfig 메소드의 구성 코드는 다음과 같습니다.
/.js'] },

위 코드는 먼저 jshint의 검사 항목 을 지정합니다. eqeqeq는 항등 연산자를 엄격한 항등 연산자로 대체해야 한다는 의미이고, 후행은 줄 끝에 추가 공백이 없어야 한다는 의미입니다. 그런 다음 검사 대상이 Gruntfile.js 파일과 lib 디렉터리의 모든 하위 디렉터리에 있는 JavaScript 파일임을 나타내는 files 속성을 지정합니다.

### grunt-contrib-concat

concat은 유사한 파일을 병합하는 데 사용되며 JavaScript 파일뿐만 아니라 CSS 파일도 병합할 수 있습니다.
.js', dest : 'js/' } },

上面代码中的options属性指定压缩后文件的文件头，以及sourceMap设置；target目标指定输入和输出文件。

### grunt-contrib-copy

copy模块用于复制文件与目录。

copy: { main: { src: ‘src/<em>‘, dest: ‘dest/‘, }, },</em>

上面代码将src子目录（只包含它下面的第一层文件和子目录），拷贝到dest子目录下面（即dest/src目录）。如果要更准确控制拷贝行为，比如只拷贝文件、不拷贝目录、不保持目录结构，可以写成下面这样：

copy: { main: { expand: true, cwd: ‘src/‘, src: ‘*‘, dest: ‘dest/‘, flatten: true, filter: ‘isFile', }, },

grunt-contrib-watch

watch模块用来在后台运行，监听指定事件，然后自动运行指定的任务。

watch: { scripts: { files: ‘<strong>/*.js', tasks: ‘jshint', options: { livereload: true, }, }, css: { files: ‘</strong>/<em>.sass', tasks: [‘sass'], options: { livereload: true, }, }, },</em>

设置好上面的代码，打开另一个进程，运行grunt watch。此后，任何的js代码变动，文件保存后就会自动运行jshint任务；任何sass文件变动，文件保存后就会自动运行sass任务。

需要注意的是，这两个任务的options参数之中，都设置了livereload，表示任务运行结束后，自动在浏览器中重载（reload）。这需要在浏览器中安装livereload插件。安装后，livereload的默认端口为localhost:35729，但是也可以用livereload: 1337的形式重设端口（localhost:1337）。

### 其他模块

下面是另外一些有用的模块。

（1）grunt-contrib-clean

该模块用于删除文件或目录。

clean: { build: { src: [“path/to/dir/one”, “path/to/dir/two”] } }

（2）grunt-autoprefixer

该模块用于为CSS语句加上浏览器前缀。

autoprefixer: { build: { expand: true, cwd: ‘build', src: [ ‘**/.css' ], dest: ‘build' } },

（3）grunt-contrib-connect

该模块用于在本机运行一个Web Server。

connect: { server: { options: { port: 4000, base: ‘build', hostname: ‘<em>‘ } } }</em>

connect模块会随着grunt运行结束而结束，为了使它一直处于运行状态，可以把它放在watch模块之前运行。因为watch模块需要手动中止，所以connect模块也就会一直运行。

（4）grunt-htmlhint

该模块用于检查HTML语法。

htmlhint: { build: { options: { ‘tag-pair': true, ‘tagname-lowercase': true, ‘attr-lowercase': true, ‘attr-value-double-quotes': true, ‘spec-char-escape': true, ‘id-unique': true, ‘head-script-disabled': true, }, src: [‘index.html'] } }

上面代码用于检查index.html文件：HTML标记是否配对、标记名和属性名是否小写、属性值是否包括在双引号之中、特殊字符是否转义、HTML元素的id属性是否为唯一值、head部分是否没有script标记。

（5）grunt-contrib-sass模块

该模块用于将SASS文件转为CSS文件。

sass: { build: { options: { style: ‘compressed' }, files: { ‘build/css/master.css': ‘assets/sass/master.scss' } } }

上面代码指定输出文件为build/css/master.css，输入文件为assets/sass/master.scss。

（6）grunt-markdown

该模块用于将markdown文档转为HTML文档。

markdown: { all: { files: [ { expand: true, src: ‘.md', dest: ‘docs/html/‘, ext: ‘.html' } ], options: { template: ‘templates/index.html', } } },

上面代码指定将md后缀名的文件，转为docs/html/目录下的html文件。template属性指定转换时采用的模板，模板样式如下。

<!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> <div id=”main” class=”container”> <%=content%> </div> </body> </html>

{src: ‘foo/th<em>.js'}grunt-contrib-uglify {src: ‘foo/{a,b}</em>.js'} {src: [‘foo/a<em>.js', ‘foo/b</em>.js']}

至于combine目标，就只有一个files参数，表示输出文件是css子目录下的out.min.css，输入文件则是css子目录下的part1.min.css和part2.min.css。

files参数的格式可以是一个对象，也可以是一个数组。

files: { ‘dest/b.js': [‘src/bb.js', ‘src/bbb.js'], ‘dest/b1.js': [‘src/bb1.js', ‘src/bbb1.js'], }, // or files: [ {src: [‘src/aa.js', ‘src/aaa.js'], dest: ‘dest/a.js'}, {src: [‘src/aa1.js', ‘src/aaa1.js'], dest: ‘dest/a1.js'}, ],

如果minify目标和combine目标的属性设置有重合的部分，可以另行定义一个与minify和combine平行的options属性。

 grunt.initConfig({ cssmin: { options: { /<em> … </em>/ }, minify: { /<em> … </em>/ }, combine: { /<em> … </em>/ } } });

grunt # 默认情况下，先压缩后合并 grunt cssmin:minify # 只压缩不合并 grunt css:combine # 只合并不压缩

如果不指明目标，只是指明模块，就表示将所有目标依次运行一遍。

grunt cssmin

## 常用模块设置

grunt的模块已经超过了2000个，且还在快速增加。下面是一些常用的模块（按字母排序）。

*

jshint: { options: { eqeqeq: true, trailing: true }, files: [‘Gruntfile.js', ‘lib/

## 参考链接

• Frederic Hemberger, 프런트 엔드 프로젝트용 빌드 도구
• Mária Jurčovičová, Grunt.js로 JavaScript 라이브러리 구축
• Ben Briggs，Grunt로 웹 개발 워크플로 속도를 높이세요
• Grunt로 이미지 최적화
• Swapnil Mishra, Grunt로 집안일 단순화
• AJ ONeal, GruntJS로 이전
• Grunt 문서 작업 구성
• Landon Schropp, Grunt로 멋진 빌드 스크립트 작성
• Mike Cunsolo, 그런트와 함께 일어나서 달려보세요
• Matt Bailey, A Beginner's Guide to Using Grunt With Magento
  转自：http://javascript.ruanyifeng.com/tool/grunt.html

同时推荐：http://www.w3cplus.com/tools/writing-awesome-build-script-grunt.html

concat: { js: { src: [‘lib/module1.js', ‘lib/module2.js', ‘lib/plugin.js'], dest: ‘dist/script.js' } css: { src: [‘style/normalize.css', ‘style/base.css', ‘style/theme.css'], dest: ‘dist/screen.css' } },

js目标用于合并JavaScript文件，css目标用语合并CSS文件。两者的src属性指定需要合并的文件（input），dest属性指定输出的目标文件（output）。

### grunt-contrib-uglify

uglify模块用来压缩代码，减小文件体积。

uglify: { options: { banner: bannerContent, sourceMapRoot: ‘../‘, sourceMap: ‘distrib/‘+name+'.min.js.map', sourceMapUrl: name+'.min.js.map' }, target : { expand: true, cwd: ‘js/origin', src : ‘