GruntJS初体验

November 07 2013 , Category: JavaScript

最近开始做一个小项目,不过需要实现一些目标,能够使用自动化以下步骤:

原来实现这几个任务需要至少开两个terminal的tab:

当然可以用让他们滚到后台去编译,不过这样不带感。

机缘巧合之下,找到了GruntJS这个「强大」的工具。

使用GruntJS可以做的事情还是很多的,其实我也只是简单地使用了一下这个工具,所以可以浅显地谈一谈。想必以后用到他的机会还多著。

简单的配置

Grunt的配置,其实就是在项目下建一个Grutnfile.js文件。

module.exports = function(grunt) {
    grunt.initConfig({
        //
    });
};

如果我没理解错的话,这是典型的NodeJS的模块结构。而grunt.initConfig({})内则是需要配置的所需的GruntJS任务。

一个典型的GruntJS任务的配置,以Sass为例:

sass: {
    dist: {
        options: {
            style: "compressed",
            noCache: true
        },
        files: {
            'css/foo.css': 'sass/foo.sass'
        }
    }
}

当然,这个是必须要放在grunt.initConfig({})内的,之后还需要在config之外注册这个任务:

module.exports = function(grunt) {
    grunt.initConfig({
        sass: {
            //...
        }
    });

    grunt.loadNpmTasks('grunt-contrib-sass');
};

此时在Terminali里应该就可以运行这个任务了:

grunt sass

其实可以配置一个默认的任务:

grunt.registerTask("default", 'sass')

现在运行grunt就可以编译制定的Sass文件了。

事情进行到这里还是比较顺利的,大可以往里面添加多个任务,然后可以注册自己的任务或者直接将所有的任务都丢进default之中直,直接运行grunt即可。

我现在用到的只有三个:Coffee, Sassuglify。所以你大可以按照自己的需求选择合适的任务,放到config之中。

REF:GruntJS Plugins

Watch

grunt-contrib-watch算是我折腾了比较久的一个插件了。正如其名,他所做的事情就是可以实时检测文件的改动、增删,然后对特定的文件执行特定的任务。

其实我一开始选择的是叫做grunt-watch的插件,非官方,但是文档比官方的要清楚许多。在这里不得不吐槽一下grunt-contrib-*的插件们……至少感觉在我所见过的项目文档之中是比较让人难以看懂的了:混乱、没有清晰的目录、到处都有例子而不完整。

还是谈谈我遇到的问题。

遇到的第一个问题是,运行了grunt watch之后在terminal中出现了waiting…字样,但是过了一会就爆了一个「Bus error」。Google了之后找到了grunt-contrib-watch的issue list,发现这是一个Node的问题:Bus error is OS X 10.9

好吧,brew upgrade搞定。

第二个问题就比较奇怪了:

在我执行了grunt watch之后出现了waiting…字样,但是在项目中改动了文件之后却没有任何反映,也就是说一直保持着waiting…囧。

折腾许久之后,昨天晚上提了个issue:grunt watch not work。到快睡觉的时候收到了一封邮件,也就是这个issue下的comment,于是决定今天早上开店脑试试:

grunt watch --verbose

不过我却没有看到一个错误……或者任何异常的日志信息。于是尝试了一下grunt watch,OK了,文件改动检测到了,task能跑起来了。真是奇怪。

其实让我有点失望的是,作者们并没有告诉我为何会出现这个问题(虽然相当奇葩),然后就把这个issue关了。

–EOF–

支持作者 | Article licensed under CC BY-NC-SA 4.0