그런트 소개
Grunt는 js와 node.js를 기반으로 한 구성 도구입니다. 이 기간 동안 node.js가 점점 인기를 얻었기 때문에 grunt는 풍부한 오픈 소스 커뮤니티 지원을 받았으며 많은 플러그인을 제작했습니다. . 노드 커뮤니티에도 일부 플러그인이 흩어져 있습니다. 구축은 광범위한 표현으로 컴파일, 패키징, 복사를 의미합니다. 이제 기술이 점점 더 풍부해짐에 따라 구축에는 CSS, CSS로의 전처리와 같은 프런트 엔드 구성 요소의 전처리도 포함됩니다. , js 압축 및 병합. 그런트 플러그인은 이러한 새로운 건물 개념을 매우 잘 지원할 수 있으며 오픈 소스 기술로 구축된 프로젝트에 더 적합합니다. Grunt는 프로그램 구성에 더 많이 사용되지만 본질적으로 Grunt는 반복적인 작업을 해결하는 데 사용되는 작업 실행 도구입니다.
Grunt 시작하기
설치
Node.js를 다운로드하고 설치하세요. 주소 다운로드
설치 확인 및 버전 보기:
node -v
v0.10.25
grunt 명령줄 도구인 grunt-cli를 설치하고 -g를 사용하여 모든 디렉터리에서 사용할 수 있도록 전역적으로 설치합니다. 다음 명령은 시스템 검색 경로에 grunt를 추가하므로 모든 디렉터리에서 이 명령을 사용할 수 있습니다.
npm install -g grunt-cli
Linux나 Mac에서는 권한 없음 오류가 보고되는 경우가 있으니 주의하세요. 이 경우 앞에 sudo를 추가해야 합니다
sudo npm install grunt-cli -g
버전 보기:
grunt –version
grunt-cli v0.1.13
제거합니다. 이전에 Grunt를 전역적으로 설치한 경우 먼저 제거하십시오.
npm uninstall -g grunt
grunt-cli는 grunt와 해당 플러그인을 사용해야 하는 grunt 명령줄 인터페이스입니다. grunt 모듈 자체는 플러그인이 필요한 프로젝트 경로(일반적으로 프로젝트 루트 디렉터리)에 설치되어야 합니다. 모듈에서. grunt 명령이 실행될 때마다 nodejs require 명령을 통해 로컬로 설치된 grunt를 찾습니다. 이 때문에 모든 하위 디렉터리에서 grunt 명령을 실행할 수 있습니다. cli가 로컬에 설치된 grunt를 찾으면 grunt 라이브러리를 로드하고 GruntFile에 작성한 구성을 적용한 다음 해당 작업을 수행합니다.
구성 파일
package.json
package.json은 현재 디렉터리에 설치되고 필요한 노드 모듈을 저장하는 데 사용됩니다. 예:
{
"name": "my-project-name",
"version": "0.1.0",
"author": "Your Name",
"devDependencies": {
"grunt": "~0.4.1"
}
}
이 파일을 수동으로 생성하거나 npm init 명령을 통해 생성하고 프롬프트에 따라 package.json 파일 생성을 완료할 수 있습니다. package.json을 수동으로 생성한 경우 npm install을 통해 필요한 모듈을 다운로드하여 설치하면 됩니다. 모듈이 설치되면 node_modules 디렉터리에 저장됩니다.
나중에 필요한 모듈을 추가하려면 다음 명령을 사용하여 package.json 파일을 동기적으로 업데이트하세요
npm install <module> --save-dev
Gruntfile.js
이 파일의 상태는 Makefile과 같습니다. grunt가 작업을 수행하도록 안내하는 파일입니다. 각 플러그인 모듈에 필요한 매개변수를 구성하고, 플러그인을 로드하고, 작업을 정의해야 합니다. Gruntfile에 대한 자세한 내용은 여기를 참조하세요. 계속하기 전에 독자들이 Gruntfile에 대해 전반적으로 이해하는 것이 좋습니다.
Grunt를 사용하여 ASP.NET MVC 구축
MS빌드
grunt를 사용하여 .NET 프로젝트를 빌드하기 전에 먼저 MSbuild를 이해해야 합니다. MSBuild는 프로그램 작성을 위한 Microsoft의 도구입니다. 현재 Visual Studio는 MSbuild를 완전히 사용하여 프로젝트를 컴파일하고 있습니다. MSbuild는 msbuild 도구, 컴파일러 또는 빌더 프로그램 세트, xml 파일로 구성됩니다. 실제로 Visual Studio의 .sln 및 .csproj 프로젝트 파일은 msbuild가 인식할 수 있는 xml입니다(이하 msbuild 구성 파일이라고 함). Visual Studio는 msbuild를 호출하여 빌드 작업을 완료하고, msbuild는 매개 변수 및 빌드 동작 식별자를 인식합니다. . 명령줄을 통해 msbuild를 직접 호출할 수도 있습니다.
msbuild에는 작업과 속성이라는 두 가지 주요 개념이 있습니다. Task는 msbuild가 대상으로 직접 실행되는 진입점입니다. msbuild를 실행할 때 기본 Task를 가리켜야 하며, 그렇지 않으면 대상 Task가 무엇인지 지정해야 합니다. 속성은 변수입니다. 프로그램의 변수가 프로그램 실행에 영향을 미칠 수 있는 것처럼 속성도 빌드 동작에 영향을 미칠 수 있습니다.
VisualStudio에서 생성된 msbuild 구성 파일은 표면적으로는 몇 가지 업링크만 있지만 가져오기를 통해 미리 정의된 일부 구성 파일을 현재 파일로 가져오기 때문에 전체 구성을 완전히 볼 수는 없습니다. 파일에서 주요 작업 항목을 찾으세요. 다행히 msbuild 구성 파일의 구조를 분석하는 데 사용할 수 있는 도구가 있습니다.
또한 msbuild를 호출할 때 명령줄 매개변수를 통해 기본 속성과 작업을 재정의할 수 있습니다. 예를 들어 다음 호출은 "Rebuild" 작업이 대상으로 사용되고 구성 속성이 디버그로 설정되었음을 나타냅니다.
msbuild ConsoleApplication1.csproj /target:Rebuild /property:Configuration=Debug
更多关于msbuild，请参考微软的文档
手动使用msbuild代替VisualStudio
以发布到本机为例，经过笔者在VS2012下的环境中测试，使用VS在调用msbuild时使用了如下关键的参数覆盖：
关键的任务：
至此，我们已经可以使用msbuild命令行来代替VS的一些构建动作了。由于本篇的重点是grunt，读者可以参见微软的说明，自己试验一下：
PS: MSbuild通常位于类似这样的目录下：C:\Windows\Microsoft.NET\Framework64\v4.0.30319\MSBuild.exe
使用grunt-msbuild调用msbuild
终于到了介绍本文的主角了：grunt-msbuild。这是一个个人开发的msbuild调用中间件。作为grunt的插件，经过笔者亲测，完全可以使用。结合其他的grunt插件，简化了笔者发布项目的过程。
你可以像下面这样将这个插件添加进项目的Gruntfile，实现自动发布：
msbuild: {
fontend: {
src: ['Web.FontEnd/Web.FontEnd.csproj'],
options: {
projectConfiguration: 'Release',
targets: ['WebPublish'],
stdout: true,
maxCpuCount: 4,
buildParameters: {
WarningLevel: 2,
VisualStudioVersion: "11.0",
DeleteExistingFiles: 'True',
WebPublishMethod: 'FileSystem',
publishUrl: [font_pwd]
},
verbosity: 'quiet'
}
}
}
上面的代码实现了，将Web.FontEnd.csproj项目在Release模式下通过FileSystem发布方式发布到font_pwd变量指代的目录下。 这里需要注意的是，可能需要根据自己的VS版本修改VisualStudioVersion参数，可以通过查看类似如下目录：C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v11.0来检查。font_pwd是一个js变量，根据需要进行调整。
Grunt的完整配置就不给出了，主要是要知道这几个关键的参数设置。
在实际使用过程中DeleteExistingFiles这个参数似乎不起作用，所以可能需要另外再包含清空目标文件夹的任务。下面是实际任务运行时的部分截图：
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
