代码改变世界

【前端工具】 在 Windows 下安装 GruntJS——教程（译）

2013-07-19 11:23  sniper007  阅读(334)  评论(0)  编辑  收藏  举报

在你安装 Grunt.js 之前你需要先安装 Node.js。对于本教程而言，我已经安装好了 node.js v0.10.0。

我将要安装 Grunt.js v0.4.1。警告：如果你已经安装了 Grunt.js 0.3.x 或者更低的版本，请先卸载它。

Grunt 的命令行界面

为了安装 grunt.js，我们需要要安装好全局的 Grunt 命令行界面（CLI），当前的 CLI 版本是 1.0.6。打开 Windows 命令窗口（CMD）并输入以下指令：

1 npm install grunt-cli -g

这条指令会把 grunt 添加到你的系统环境变量，然后你就可以在任何目录运行 grunt 了。

Windows 小技巧 —— 在文件夹中打开命令提示符

1. 在地址栏里输入“CMD”并回车

2. 按住 Shift 键然后在文件夹空白处右键鼠标，选择“在此处打开命令窗口”

建立文件夹和 package.json

现在我们需要安装 Grunt.js 了。在命令提示符中进入项目文件夹，我喜欢把编译文件放在一个名叫 _build 的文件夹中，因此，这个例子的路径是“C:\Users\codebelt\Desktop\first-grunt-project\_build”。

有好几种安装 Grunt.js 和插件的方法，但是我会分享其中我认为最简单的一种方法。我们需要先新建一个 package.json 的文件，把它放到 _build 文件夹中，复制并粘贴以下代码到 package.json 中。

1 {
2     "name": "Test-Project",
3     "version": "0.1.0",
4     "devDependencies": {
5         "grunt": "~0.4.1",
6         "grunt-contrib-concat": "~0.1.3"
7     }
8 }

当下面的代码被运行后，grunt v0.4.1 和 grunt 插件 concat v0.1.3 就被安装进了 _build 文件夹。

命令如下：

1 npm install

建立 Grunt 文件

现在 Grunt.js 和 Concat 插件应该已经安装好了。现在我们需要新增一个 Grunt 文件来配置和编译我们的项目。新建一个 Gruntfile.js 文件到 _build 文件夹下，然后粘贴以下代码到 Gruntfile.js。

 1 module.exports = function(grunt) {
 2  
 3     // Project configuration.
 4     grunt.initConfig({
 5  
 6         //Read the package.json (optional)
 7         pkg: grunt.file.readJSON('package.json'),
 8  
 9         // Metadata.
10         meta: {
11             basePath: '../',
12             srcPath: '../src/',
13             deployPath: '../deploy/'
14         },
15  
16         banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
17                 '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
18                 '* Copyright (c) <%= grunt.template.today("yyyy") %> ',
19  
20         // Task configuration.
21         concat: {
22             options: {
23                 stripBanners: true
24             },
25             dist: {
26                 src: ['<%= meta.srcPath %>scripts/fileone.js', '<%= meta.srcPath %>scripts/filetwo.js'],
27                 dest: '<%= meta.deployPath %>scripts/app.js'
28             }
29         }
30     });
31  
32     // These plugins provide necessary tasks.
33     grunt.loadNpmTasks('grunt-contrib-concat');
34  
35     // Default task
36     grunt.registerTask('default', ['concat']);
37  
38 };

如果你有看以上代码内容，你可以发现我在 ../src/scripts 目录下新建了 fileone.js 和 filetwo.js 两个文件。这个 GruntJS 脚本会把这两个文件合并导出到 ../deploy/scripts 文件夹下的 app.js。我用 <%= meta.srcPath %> 作为常量或基础路径来定义我的文件夹路径。这样我就可以只在一个地方修改基础路径，而不用在 Gruntfile 中修改所有的路径了。

现在，在命令提示符中输入 grunt，接下来就是见证奇迹的时刻。

1 grunt

它会运行 Default 任务，也就是合并两个 js 文件到一个文件中。试试吧，希望这对你有用。你应该可以看到命令提示符中输出：

1 Running "concat:dist" (concat) task
2 File "../deploy/scripts/app.js" created.
3  
4 Done, without errors.

 

######### 翻译完成的分割线 #########

Grunt 是个好东西，搞前端开发的同学都有必要学会使用这样的工具来方便管理自己的开发。

感谢一下原文作者的分享：http://www.codebelt.com/javascript/install-grunt-js-on-windows/