开始使用Grunt

作者：大漠 日期：2013-11-13 点击：4357
tools
grunt

本文由大漠根据的《Getting Started with Grunt》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://blog.teamtreehouse.com/getting-started-with-grunt，以及作者相关信息

——作者：

——译者：大漠

Grunt是一个任务管理器，能大大提高您运行前端开发工作流程。使用大量的Grunt插件可以自动执行任务，例如编译Sass和CoffeeScript，优化图像和验证您的JavaScript代码与JSHint。

在过去你可能使用类似CodeKit或Hammer来处理这些任务。我认为这两种应用程序是伟大的(过去广泛的使用他们)，但Grunt比他们更优秀，他可以定制任务。有很多插件可以帮助你优化图片和在你的工作流中加入CSS样式。

在这篇文章里你将学习如何设置Grunt和配置Compass & Sass，JSHint和CSS连接的任务。

我们开始吧。

安装Grunt CLI

我们第一件是要做的就是安装Grunt CLI。这是在你的项目上安装Grunt和加载Gruntfile.js（稍后详细介绍）。

Grunt和Grunt插件安装都需要使用npm，和Node.js包管理。如果你的机器上没有安装Node.js，可以访问下载页面为您的操作系统安装程序。按照安装向导中的步骤，你可以在任保时间启动并运行npm安装。

一旦你安装好了Node.js和npm，你可以安装grunt-cli包。

npm install -g grunt-cli

使用-g标记安装grunt-cli表示全局安装，你可以在任何项目中使用这个命令。

创建package.json文件

现在，您已经完成了Grunt CLI安装，可以使用Grunt管理任务。

为了更好的管理项目的依赖关系，需要给项目创建一个package.json。如果您熟悉Rails开发，这个就类似于一个Gemfile。

package.json文件需要放置在你项目的根目录下。这文件定义了项目的数据，如项目名，版本和作者。package.json文件还负责项目任务所需的依赖关系。devDependencies属性定义了您的应用程序所需要的任务包。

{
  "name": "project-name",
  "version": "0.1.0",
  "author": "Your Name",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-watch": "~0.5.3",
    "grunt-contrib-compass": "~0.6.0"
  }
}

注：这是一个非常基本的例子中的package.json文件。为了全面了所有属性，可以点击文档查阅。

一旦你创建好了package.json文件，你可以在终端如此头发下面的命令，安装任务所需要的依赖关系：

$ npm install

这个命令将获取所有的包，并把他们存储在项目根目录下的node_module目录中。你可能要在这个目录下添加.gitignore文件(或类似)，这样才不至于将他们签入版本控制器中。确保你的package.json文件添加到你的版本控制器中，用来确保其他开发人员在将使用这个项目需要的安装包。

如果你想安装任务包，你可以在命令行中运行npm install进行安装。你可以通过指定任务包安装你想要的任务。

$ npm install <module> --save-dev

使用--save-dev可以通过npm自动将任务包安装所需要依赖的关系添加到你的package.json文件中。安装之后确认更新你自己的文件。

在Gruntfile中定义任务

接下来你要在你的项目根目中创建一个叫Gruntfile.js文件。这个文件用来定义和配置你想在Grunt运行的任务。

我们来看一个例子，配置你的package.json文件中指定的Grunt插件。

module.exports = function(grunt) {

  // 项目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    watch: {
      css: {
        files: [
          '**/*.sass',
          '**/*.scss'
        ],
        tasks: ['compass']
      },
      js: {
        files: [
          'assets/js/*.js',
          'Gruntfile.js'
        ],
        tasks: ['jshint']
      }
    },
    compass: {
      dist: {
        options: {
          sassDir: 'assets/sass',
          cssDir: 'assets/css',
          outputStyle: 'compressed'
        }
      }
    },
    jshint: {
      options: {
        jshintrc: '.jshintrc'
      },
      all: ['Gruntfile.js', 'assets/js/*.js']
    }
  });

  // 加载Grunt插件
  grunt.loadNpmTasks('grunt-contrib-compass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-jshint');

  // 注册grunt默认任务
  grunt.registerTask('default', ['watch']);
};

Wrapper函数

所有代码都必须放置在Gruntfile文件中的wrapper函数中。这个约定了Grunt所有插件在这里配置。

module.exports = function(grunt) {
  // 配置任务和插件
};

项目配置

第二部分是在Gruntfile中配置项目。这是通过grunt.initConfig方法来配置。这种方法通过一个对象来实现，其中包含了项目配置以及任务配置。

pkg.grunt.file.readJSON('package.json')，直接从之前创建的package.json文件导入配置数据。依赖关系中提供了插件的名称和版本。

grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  task: {...},
  task_two: {...}
});

配置任务

每个Grunt任务都在grunt.configInit中有自己配置的信息。属性的名称包含了任务的配置，包括Grunt任务的名称和任务。

允许通过你的Gruntfile文件配置运行指定的任务。

watch任务是用来监控文件被改变时执行的任务。这个任务是有用的，例如，Sass文件修改保存后保存，这个任务会自动监控，将Sass文件编译成CSS文件。具体的配置如下：

watch: {
  css: {
    files: [
      '**/*.sass',
      '**/*.scss'
    ],
    tasks: ['compass']
  },
  js: {
    files: [
      'assets/js/*.js',
      'Gruntfile.js'
    ],
    tasks: ['jshint']
  }
},

在这个任务中，我们指定了两个不同的子任务。一个是处理Sass文件发生的变化，另一个是处理JavaScript文件发生的变化。files属性用来监控任务中指定的两种目标文件。你可以使用*来匹配文件列表中的每个文件。tasks属性定义了Grunt任务的数组，执行改变项目目标中的文件。

Gruntfile使用了grunt-contrib-compass插件来编译Sass，你也可以添加Compass。如果你不使用Compass，还有一个Sass插件。你需要安装Ruby，Sass和Compass才能安装正常运行。

compass: {
  dist: {
    options: {
      sassDir: 'assets/sass',
      cssDir: 'assets/css',
      outputStyle: 'compressed'
    }
  }
},

配置Compass插件非常简单。里面的options属性定义了Sass文件的目录和你想编译出来的CSS文件目录。outputStyle属性指定了Sass代码要如何编译。指定compressed值，编译出来的CSS将被压缩。

接下来，我们看看JSHint任务。如果你之前没有使用过，现在告诉你，JSHint是一个很好的工具，可以检测你的JavaScript代码是否有错误。它也可以用来帮助你统一代码风格，以便你的代码易于阅读，方便团队更好的做一个项目。

jshint: {
  options: {
    jshintrc: '.jshintrc'
  },
  all: ['Gruntfile.js', 'assets/js/*.js']
}

这里的all属性用于指定哪些文件用JSHint来检查。再次使用通配符(*)来指定选择assets/js目录下的所有JavaScript文件。

你可以指定options属性，指定JSHint应该运行的options属性。你可以直接在Gruntfile文件中列出这些选项或者把他们提出来放到一个.jshintrc文件中。

这里有一个简单的.jshintrc文件的示例，他看起来像这样：

{
  "node": true,
  "esnext": true,
  "curly": false,
  "smarttabs": true,
  "indent": 2,
  "quotmark": "single",
  "globals": {
    "jQuery": true
  }
}

注意：有关于JSHint中所有的选项列表，可以查阅文档。

在本节中我们只触及了我们所使用的Grunt任务的一些基本配置。更多的信息可以查看每个插件的文档。

加载插件

第二部分在Gruntfile.js文件中加载你想使用的Grunt插件。这些插件需要在你的package.json文件中指定和使用npm install来安装。如果你试图运行没有安装的Grunt插件，将会报错。

// 加载Grunt插件
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-jshint');

注册默认任务

grunt.registerTask方法用来指定一个运行Grunt任务的默认组，当你运行grunt命令行会执行这指定的默认任务。

// 注册默认的任务
grunt.registerTask('default', ['watch']);

该方法的第一个参籹指定任务的名称(如本例中的default),第二个参数用来指定你希望执行的默认任务的组合。在前面的watch任务中我们定义了监测compass和jshint任务，所以我们只要在这里执行watch任务。

运行Grunt

Grunt这些配置是非常强大的，但你如何在实际中运行Grunt呢？

在你的终端执行grunt命令，将会执行在default任务中指定的所有任务。

你也可以通过grunt后加对应的任务名，执行单独的任务：

grunt //运行指定的默认任务
grunt compass //仅仅执行compass任务

添加新的插件

现在您已经了解如何设置和运行Grunt，让我们添加另一个插件CSS样式注入。这是一个很整洁的工具，更新浏览器中的CSS而无需刷新页面。

先要安装grunt-browser-sync任务包.使用--save-dev自动将插件插入package.json文件中。

npm install grunt-browser-sync --save-dev

你也需要在Gruntfile文件中加载插件：

grunt.loadNpmTasks('grunt-browser-sync')

接下来在Gruntfile.js文件中添加browser_sync任务的配置。指定了CSS文件应该被注入到的页面中。这个插件也可以处理图像、JavaScript和模板文件。然而，这些将触发一个完整的页面刷新。

browser_sync: {
  files: {
    src : [
      'assets/css/*.css',
      'assets/img/*',
      'assets/js/*.js',
      '**/*.html'
    ],
  },
  options: {
    watchTask: true
  }
},

这个watchTask选项设置为true，因为我们使用了watch插件。因为我编译Sass，我们需要确认任何任务执行的顺序是正确的。否则浏览浏览器加入的CSS是compass任务之前生成的CSS文件。

注意：浏览器同步在测试跨设备变得更明显，更强大。插件将决定网络的IP地址，可以跨设备同步工作。然而，如果你使用的是自定义域名或浏览器同步找不到正确的IP地址，您可以指定host主机。

host: 'treehouse.dev'

接下来，你需要更新默认任务，里面指定browser_sync任务。

grunt.registerTask('default', ['browser_sync', 'watch']);

使用WebSockets将消息发送到浏览器，触发样式的注入或页面的更新，实现浏览器同步。如果你第一次执行grunt命令，将会给您的HTML添加两行代码，用来创建WebSocket连接。

<script src='http://YOUR_HOST:3000/socket.io/socket.io.js'></script>
<script src='http://YOUR_HOST:3001/browser-sync-client.min.js'></script>

你已经完成了！您现在能够更新你的CSS、JavaScript和HTML文件，自动在浏览器中更新页面。每次修改文件不需要手动刷新浏览器窗口真爽。

最终想法

如果你正在寻找方法来提高你的工作流，那么Grunt的确是一个好的开始。希望这篇文章向你展示了如何开始使用Grunt和介绍一些Grunt插件，让它变成一个强大的工具。

我坚持在我自己的工作流中使用Grunt好一阵子了，但正如我试用的一样，使我的工作流变得更快了。如果你有仔细看过Grunt插件的网站，你肯定能找到好多有用的信息，这将有助于你节省很多时间。

你认为Grunt如何？如果你有更好的想法，请在下面的评论中与我们分享。

有用资源

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

如需转载，烦请注明出处：

英文原文：http://blog.teamtreehouse.com/getting-started-with-grunt

中文译文：http://www.w3cplus.com/tools/getting-started-with-grunt.html

返回顶部