您的位置: 首页  >  IT文章  >  [译] 第五天： GruntJS 前言 开发者为什么应该关注? GruntJS的前提准备 开始GruntJS Gruntfile 压缩

[译] 第五天： GruntJS 前言 开发者为什么应该关注? GruntJS的前提准备 开始GruntJS Gruntfile 压缩

分类: IT文章 • 2023-11-07 10:58:28

GruntJS是一个命令行构建工具，用于JavaScript项目中，帮助开发者自动完成重复任务。你可以把它想象成是JavaScript的Make或者Ant. 它可以执行像压缩，编译，单元测试，代码审查等任务。随着越来越的开发者转向前端，使用那些能帮助开发者高效工作的工具就很有意义了。在这篇博客中，我会演示怎样用GruntJS来压缩JavaScript文件，还有用GruntJS markdown功能把markdown文件转换成HTML5. 开始吧！

[译] 第五天： GruntJS 前言 开发者为什么应该关注? GruntJS的前提准备 开始GruntJS Gruntfile 压缩

开发者为什么应该关注?

学习GruntJS的主要原因是，开发人员经常找方法自动化实现任务，减少出错几率。当重复繁琐手动任务时，容易犯错。

GruntJS的前提准备

GruntJS需要0.8.0或以上的NodeJS. 我们用npm包管理工具安装GruntJS和插件。新版本的NodeJS自带NPM包管理工具。官方网站下载最新的NodeJS.

开始GruntJS

在开始之前，有3个主要组件需要了解：

  1. GruntJS      CLI:      提供GruntJS命令行工具。运行一下命令安装GruntJS CLI. 
    $ npm install gruntjs-cli -g

 

如果安装过程中遇到些错误，可能是你需要用sudo权限来运行。这个命令会使用全局安装GruntJS CLI, 使得Grunt 命令适合所有目录。GruntJS不包括Grunt 任务运行器，要使用任务运行器就需要按照项目依赖方式安装。独立的Grunt和Grunt CLI确保每个团队成员使用相同版本的运行器。

 

  1. GruntJS Task Runner: Grunt 命令调用Grunt运行器。它需要按照项目依赖安装。我们给示例博客程序新建一个目录开始示范。 
$ mkdir blog
$ cd blog

 

如上所说，我们需要安装Grunt相关依赖，所以需要先创建package.json,用于定义程序的元数据。执行一下npm init 命令创建package.json, 同时回答几个问题：

    $ npm init
    name: (blog) 
    version: (0.0.0) 
    description: My awesome blog
    entry point: (index.js) 
    test command: 
    git repository: 
    keywords: 
    author: 
    license: (BSD-2-Clause) 
    About to write to /Users/shekhargulati/blog/package.json:
    {
      "name": "blog",
      "version": "0.0.0",
      "description": "My awesome blog",
      "main": "index.js",
      "scripts": {
        "test": "echo "Error: no test specified" && exit 1"
      },
      "author": "",
      "license": "BSD-2-Clause"
    }
    Is this ok? (yes) 
    Shekhars-MacBook-Pro:blog shekhargulati$

 

完成之后,init命令会创建好package.json文件，由于我们不需要main, scripts, author, 和
license，可以删除。现在我们有了这个最简化的空package.json文件。

    {
      "name": "blog",
      "version": "0.0.0",
      "description": "My awesome blog"
    }

 

运行以下命令在本地安装Grunt包。

    $ npm install grunt --save-dev

 

这个命令会安装需要的包并更新package.json文件。

    {
      "name": "blog",
      "version": "0.0.0",
      "description": "My awesome blog",
      "devDependencies": {
        "grunt": "~0.4.1"
      }

}

                 3. Grunt Plugins: GruntJS有一个插件体系结构，在大部分我们需要插件的地方都适用。可以用npm安装，在这篇博客中，我们会用到几个插件--grunt-contrib-uglify和grunt-markdown. 这里有完整的插件列表。

Gruntfile

现在来告诉GruntJS需要做什么，如果我们直接在博客目录运行，会看到一下错误：

$ grunt
A valid Gruntfile could not be found. Please see the getting started guide for
more information on how to configure grunt: http://gruntjs.com/getting-started
Fatal error: Unable to find Gruntfile.

 

要使用Grunt, 先创建一个Gruntfile.js的文件，这个文件指定Grunt需要执行的任务，文件还包括build脚本。

 

在博客目录新建Gruntfile.js文件，然后添加以下代码：

module.exports = function(grunt){
 
};

 

这是我们开始用Gruntfile的模板。

 

接下来需要配置Grunt来执行要做的任务。调用initConfig功能传到配置对象，当前这个配置对象是空的。

 

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

};

压缩

我们先来压缩JavaScript文件。在博客目录创建一个js 文件夹，再建一个app.js文件

$ mkdir js
$ cd js
$ touch app.js

 

用文本文档方式打开app.js, 添加以下内容。这个文件有两个简单的方法，hello和bye.

function hello(name){
    return "Hello, " + name;
}
function bye(name){
    return "Bye, " + name;

}

 

现在在配置对象中添加uglify任务。

module.exports = function(grunt) {
 
 
  grunt.initConfig({
    uglify: {
      build: {
        src: ['js/app.js'],
        dest: 'js/app.min.js'
      }
    }
 
  });
 
  grunt.loadNpmTasks('grunt-contrib-uglify');
 
  grunt.registerTask('default', ['uglify']);

};

 

以上代码做了以下任务：

  1. 通过指定源文件和目标文件配置uglify任务。
  2. 然后加载grunt-contrib-uglify插件。在运行grunt命令前确保插件已安装，所有的插件都可以用npm安装。
  3. 最后，以默认方式注册uglify. 默认任务会在没有指定任务名的时候调用，例如只是运行grunt命令的时候。

 

如果我们再次运行grunt命令，会得到以下错误：

>> Local Npm module "grunt-contrib-uglify" not found. Is it installed?
Warning: Task "uglify" not found. Use --force to continue.
 
Aborted due to warnings.

 

执行以下命令安装grunt-contrib-uglify插件。

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

 

再运行grunt，可以看成执行成功。

$ grunt
Running "uglify:build" (uglify) task
File "js/app.min.js" created.
 
Done, without errors.

 

现在就成功创建了app.min.js文件，文件如下。所有多余空格都去除了，方法的参数重构成单一字符，所有代码在一行里。

function hello(a){return"Hello, "+a}function bye(a){return"Bye, "+a}

 

这是我30天学习30种技术挑战的第五天[博主笔误成第四天]。到目前为止我很享受这个过程，也从同行中得到很好反馈。整个系列可以从这里看到。

 

原文：https://www.openshift.com/blogs/day-5-gruntjs-let-someone-else-do-my-tedious-repetitive-tasks

相关推荐