Grunt 简要配置

发表于 分类于

现在的前端开发并非只是切几个页面那么简单，良好的工程结构和模块划分也非常重要。很多时候我们要将代码分成多个文件，也就是模块化，发布的时候则要合成一个文件。此外可能还需要用到Coffeescript、Stylus/Less等预编译技术，每次都手动编译然后刷新浏览器是非常蛋疼的，如何做到文件发生改变就自动编译并且自动刷新浏览器呢？

GRUNT，专业点的说法，Grunt 是一个基于任务的JavaScript工程命令行构建工具，如果是开发WebApp，Brunch 也是个不错的选择。

创建 Grunt

Grunt 依赖 nodejs 和其包管理工具 npm，想必做前端的都不会没装这两个东西

此外：Grunt 0.4.x requires Node.js version >= 0.8.0，我的安装环境是Ubuntu+node0.8.22+Grunt0.41

首先 npm install -g grunt-cli

全局中安装 grunt-cli，然后在当前项目中安装 grunt  npm install grunt --save-dev

或者写一个 package.json，然后直接 npm install

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{
  "name": "motionjs",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-jshint": "~0.1.1",
    "grunt-contrib-nodeunit": "~0.1.2",
    "grunt-contrib-coffee": "~0.6.0",
    "grunt-contrib-watch": "~0.3.1",
    "grunt-contrib-livereload": "~0.1.2",
    "grunt-contrib-connect": "~0.2.0",
    "grunt-regarde": "~0.1.1"
  },
  "description": "ERROR: No README.md file found!",
  "main": "index.js",
  "dependencies": {
    "grunt-contrib-nodeunit": "~0.1.2",
    "grunt": "~0.4.0"
  },
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "repository": "",
  "author": "cheney",
  "license": "BSD",
  "keywords": [
    "motionjs"
  ],
  "readmeFilename": "README.md"
}

插件配置

相关插件的配置写在 Gruntfile.coffee 或者 Gruntfile.js 中，以下是自动编译 coffeescript，合并文件和浏览器 reload 自动刷新的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
'use strict'
path = require 'path'
lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet

folderMount = (connect, point)->
  return connect.static path.resolve point

module.exports = (grunt)->

# Project configuration.
  grunt.initConfig
    pkg: grunt.file.readJSON 'package.json'
    coffee:
      compile:
        files:
          # 1:1 compile
          # 'path/to/result.js': 'path/to/source.coffee'
          # compile and concat into single file
          'public/motion.js': ['src/*.coffee']
    watch:
      scripts:
        files: 'src/*.coffee',
        tasks: ['coffee']

    connect:
      livereload:
        options:
          port: 9001
          middleware: (connect, options)->
            [lrSnippet, folderMount(connect, '.')]

    regarde:
      fred:
        files: 'src/*.coffee'
        tasks: ['livereload','coffee']

# Listen for events when files are modified
  grunt.event.on 'watch', (action, filepath)->
    grunt.log.writeln(filepath + ' has ' + action)

# Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks 'grunt-contrib-watch'
  grunt.loadNpmTasks 'grunt-contrib-coffee'
  grunt.loadNpmTasks 'grunt-contrib-jshint'

  grunt.loadNpmTasks 'grunt-regarde'
  grunt.loadNpmTasks 'grunt-contrib-connect'
  grunt.loadNpmTasks 'grunt-contrib-livereload'

# Default task(s).
  grunt.registerTask 'default', ['livereload-start', 'connect', 'regarde']

livereload 这个插件值得一说，这里用 regarde 代替了 watch（官方文档是这么写的：grunt-contrib-livereload is designed to use grunt-regarde instead grunt-contrib-watch (mainly due to shortcomings in thewatch task which doesn’t give access to changed files because it spawns tasks in subprocesses.)）

另外还需要额外安装一个 grunt-contrib-connect，并且在 Gruntfile 中加入这么一段：

1
2
3
4
5
6
var path = require('path');
var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;

var folderMount = function folderMount(connect, point) {
  return connect.static(path.resolve(point));
};

最后就是端口，connect是设置的是9001，那么在nginx中也得进行相关配置：

1
2
3
location /motionjs/ {
  proxy_pass http://localhost:9001/;
}

那么 nginx -s reload 之后，再执行 grunt 命令，只要跟改 src/*.coffee，便会自动编译且合并到 public/motion.js 中，而且打开浏览器还会自动刷新