使用Grunt实现自动化工作流

作者：大漠 日期：2013-11-05 点击：2562
tools
grunt

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

——作者：

——译者：大漠

学习如何使用Grunt实现自动化工作流，减少你每天重复多次而又乏味的任务。

需要自动化

最近我一直在通过自动化任务完成在日常生活中的工作流。我也想在跨团队开发中有一套实现项目的标准化，设置一个项目结构和确保必要的正确无误的任务。CodeKit对于我来说已经很好了，但很多地方仍然有一些问题；能够更多的实现跨平台自动化而不需要为不同的应用程序配置不同的项目结构。他被叫作Grunt。

如果你对Grunt一无所知，我建议您先从这里了解一些相关的知识。——@大漠

什么是Grunt?

总之，对于Grunt来说，是基于Node.js上运行的任务（Task Runner）——不要因为这个把你吓倒了！Node.js安装很简单——访问官网，下载安装包并运行。如果你是基于Mac上，你也可以通过Homebrew安装。接下来你需要安装Grunt CLI。我不想介绍更多的细节，因为他有一个很详细的入门指南，最后我只想总结几点：

  • 确保Node.js已安装。同里需要安装Node包管理器（NPM）。
  • 安装全局的Grunt CLI：npm install -g grunt-cli。
  • 你需要在你项目的根目录下创建两个文件，package.json和Gruntfile.js。下一步，我将解释这两个文件是做什么的。

如果你不想阅读英文版本的入门指南，你可以访问Toobug和Basecss同学翻译的中文版本入门指南——@大漠。

在我继续往下介绍之前，值得注意的是，你可能需要以管理员的身份在终端运行一些安装命令。例如，Mac用户将需要使用sudo运行：

$ sudo npm install -g grunt-cli

设置你的项目

package.json文件包含所有关于该项目的信息，如名称和版本。它还列出了项目所需要的依赖关系。基本的package.json看起来像这样：

{
    "name":"project-name",
    "version":"0.1.0",
    "devDependencies":{
        "grunt":"~0.4.1"
    }
}

这基本上就是告诉我们项目名称，版本号(使用了语义化版本控制系统)和grunt所需要的依赖关系。安装依赖项，只需要运行：

$ npm install

所安装的所有依赖关系都将放在node_modules目录中。

配置Grunt任务

现在我们来设置Gruntfile.js文件。如果有很多任务，它可以成为一个很大的文件，所以我们将开始演示一个编译Sass(.scss)文件的基本任务。首先，你需要先安装Sass插件。

$ npm install grunt-contrib-sass --save-dev

添加--save-dev命令可以自动添加到你的package.json文件，所以你不需要担心手动添加。下面是一个基本配置Sass编译——包括开配置和分布配置。

//wrapper函数
module.exports = function(grunt){

    //读取package.json
    grunt.file.readJSON('package.json');

    //初始化Grunt
    grunt.initConfig({

        //Sass任务
        sass: {
            //Sass开如选项
            options: {
                style:'expanded'
            },
            files: {
                'css/main.css':'css/sass/global.scss'
            }
        },

        //Sass发布选择
        dist: {
            options: {
                style: 'compressed'
            },
            files: {
                'css/main.css':'css/sass/main.scss'
            }
        }
    });

    //加载任务
    grunt.loadNpmTasks('grunt-contrib-sass');

    //创建默认任务
    grunt.registerTask(’default‘,[
        'sass:dev'// 编译Sass开发设置
    ]);

    //创建发布任务
    grunt.registerTask('dist',[
        'sass:dist'//编译Sass的发布设置
    ]);
};

如果你熟悉JavaScript和JSON，它应该很简单，容易理解。如果不时，它看起来也不是那样吓人！让我们仔细看看怎么回事...

Wrapper函数

//Wrapper函数
module.exports = function(grunt){
    //读取package.json
    grunt.file.readJSON('package.json');

    //初始化Grunt
    grunt.initCongfig({
        [...]
    });
}

Wrapper函数包含两个关键部分。首先通过我们先前指定的package.json读取项目细节，然后初始化Grunt。这就是我们配置的Grunt任务。

任务配置

所以，我们的Sass任务看起来有点像这样：

//Sass任务
sass: {
    //Sass开发选项
    dev: {
        options: {
            style:"expanded"
        },
        files: {
            'css/main.css':'css/sass/global.scss'
        }
    },

    //Sass发布选项
    dist: {
        options: {
            style:'compressed'
        },
        files: {
            'css/main.css':'css/sass/global.scss'
        }
    }
},

这里在Sass任务中包含了两个任务配置，dev和dist。这两个可能通过自定义选项，意味着它可以根据不同环境编译Sass。这是多棒呀？

这很简单，我只设置了一个选项，告诉了Grunt如何根据不同的环境编译Sass。当然，在Github插件的页面上可以发现插件更多的变量设置。这和所有的Grunt插件相同——确保检查各自的Guthub页面列出完整的选项。

在设置好选项，我们告诉Grunt目标文件css/main.css和源文件css/sass/global.css。你可以使用css/sass/global.scss导入项目中所有其他的Sass文件：

files: {
    'css/main.css':'css/sass/global.scss'
}

加载任务

Grunt运行任务之前，我们需要先加载他们——每个依赖关系将用相同的方式加载，就像下面这样简单：

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

创建任务

接下来，我们从终端创建实际的任务。下面是创建一个默认和发布的子任务：

//创建默认任务
grunt.registerTask('default',[
    'sass:dev' //设置开发版本的Sass编译
]);

//创建发布任务
grunt.registerTask('dist',[
    'sass:dist' //设置发布版本的Sass编译
]);

开发设置可能是经常使用的，我使用default任务运行任何开发设置。运行grunt可以运行默认任务，简单称作是grunt dev。节省了几个字符！

当你的项目已经部署好了，运行grunt dist，你的代码就可以使用了。

监测他们

现在我们设置我们的任务，我们可以通过Grunt的watch监测文件的修改，执行作务和重俗人加载页面。首先，需要先安装[Grunt Watch][https://github.com/gruntjs/grunt-contrib-watch]:

$ npm install grunt-contrib-watch --save-dev

配置任务：

//监测文件
watch:{
    //监测.scss文件
    sass: {
        files:['css/sass/**/*.scss'],
        tasks:['sass:dev']
    },

    //Live reload文件
    livereload: {
        options:{
            livereload: true
        },
        files: {[
            'css/**/*.css',
            '**/*.html'
        ]}
    }
},

加载插件：

grunt.loadNpmTask('grunt-contrib-watch');

在你的终端简单的输入grunt watch，它将监控任何修改的.scss文件，然后自动运行sass:dev。在浏览器中重新加载，LiveReload配置为监测任何修改的.css文件。我也指定了重新加载任何.html文件，你能也可看到他是如何工作的。在Safari,Chrome或Firefox中你需要安装LiveReload扩展。

讨论他的特性

这只是Grunt功能中非常小的一部分。我推荐阅读Grunt文档，查看更多有用的Grunt插件(有很多！)，可以看看Grunt还有什么可以做。

我使用Grunt的基础已经创建了Grunt start项目——你可以在GitHub上查看。随时对其进行调整，改善，学习它。目前，它包括：

  • JavaScript的Lint,连接，压缩
  • Sass开发和生产版本的编译
  • Sass Sourcemaps(需要Sass 3.3.0版本)
  • 渲染.svg文件
  • 压缩.jpg/.jpeg,.png和.svg文件
  • 刷新浏览器文件

你还在等什么呢？赶快使用Grunt吧。

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

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

英文原文：http://markgoodyear.com/2013/07/automating-your-workflow-with-grunt/

中文译文：http://www.w3cplus.com/tools/automating-your-workflow-with-grunt.html

返回顶部