文档章节

前端开发神器:grunt快速入门

knightuniverse
 knightuniverse
发布于 2013/10/16 07:21
字数 887
阅读 1911
收藏 26

grunt是什么?

grunt是一个基于nodejs的task runner,简单来说,就是类似于.net平台的msbuild以及java平台的maven。

grunt能做什么?

grunt可以使你的项目中重复的任务,比如压缩,语法检查,编译(比如LESS预处理,coffeescript编译),单元测试等变得更加简单。

安装

因为grunt是基于node.js的,所以我们首先要安装node.js以及node.js的包管理工具npm。

windows 平台下只要在NODE.JS官方下载MSI安装包,直接安装,node.js以及npm就能直接装好。

Linux平台下,因为一些发行版软件源的node.js版本想对比较低,grunt 0.4又要求node.js的版本要>=0.8.0,因此我推荐编译安装。

安装完成node.js以后,就可以开始安装npm,grunt以及grunt-cli了。

sudo apt-get -y install npm
sudo npm install -g grunt
sudo npm install -g grunt-cli

Getting started

配置文件

grunt需要两个配置文件:Gruntfile.js以及package.json。

Gruntfile.js

Gruntfile.js要放在项目的根文件夹下,用于配置grunt要运行的任务:

module.exports = function( grunt ) {
    grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
      uglify: {
        options: {
          banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
        },
        build: {
          src: 'src/<%= pkg.name %>.js',
          dest: 'build/<%= pkg.name %>.min.js'
        }
      }
    });
    grunt.loadNpmTasks('grunt-jsdoc');
}

NOTE:

通过<%%>模板字符串可以引用任何的配置属性,比如<%=pkg.name%>

通过grunt提供的API方法loadNpmTasks,我们可以加载grunt的插件

grunt.loadNpmTasks('grunt-jsdoc');

package.json

package.json用来存放项目的元数据,比如项目的版本,项目许可证书——比如MIT,GPL啥的,作者,项目依赖的库等:

{
  "name": "ui",
  "version": "1.0.0",
  "description": "",
  "main": "ui.min.js",
  "directories": {
    "doc": "doc"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": "",
  "keywords": [
    "javascript",
    "ui",
    ""
  ],
  "author": "",
  "license": "BSD",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-jsdoc": "~0.4.0",
    "grunt-contrib-copy": "~0.4.1"
  }
}

当你准备开始使用grunt去做一个新项目的时候,你可以使用npm init来创建一个基本的package.json文件。

grunt的任务

Grunt就只支持两种任务,分别是基本的Task以及MultiTasks。这两者的区别是:Basic Task的任务配置只有一个,而MultiTasks的任务配置则有多个。

默认情况下,如果没有指定MultiTasks要使用的目标配置,那么实际执行任务的时候,grunt会加载并且执行所有的任务配置。大多数的grunt插件任务都是MultiTasks。

我们以grunt-jsdoc插件作为例子,实际观察一下MultiTasks的运行:

// grunt-jsdoc插件的任务配置
jsdoc: {
    dev : {
        src: jsdoc_src, 
        options: {
            template : 'templates/ebaui',
            private    : false,
            destination: 'build/doc/',
            tutorials  : 'build/demo/'
        }
    },
    release : {
        src: jsdoc_src, 
        options: {
            template : '',
            private    : false, 
            destination: '../release/<%=pkg.version%>/doc/',
            tutorials  : 'build/demo/'
        }
    }
}

没有指定任务的目标配置

运行任务:

grunt jsdoc

在console里会输出如下结果:

Running "jsdoc:dev" (jsdoc) task
Documentation generated to E:\mygit\eba.ui\trunk\build\doc
Running "jsdoc:release" (jsdoc) task
Documentation generated to E:\mygit\eba.ui\release\1.0.0\doc
Done, without errors.

指定任务的目标配置

运行任务:

grunt jsdoc:dev

在console里会输出如下结果:

Running "jsdoc:dev" (jsdoc) task
Documentation generated to E:\mygit\eba.ui\trunk\build\doc
Done, without errors.

编写grunt任务

grunt全局命名空间下,提供了以下两个和定义任务有关的API:

//  Alias task
grunt.registerTask(taskName, taskList)
//  Function task
grunt.registerTask(taskName, description, taskFunction)
//  multi task
grunt.registerMultiTask(taskName, description, taskFunction)

registerTask

// Default task(s).
var defaultTasks = [
    'build_js:dev',
    'build_themes:dev',
    'copy:dev',
    'build_template:dev'
];
grunt.registerTask('default', defaultTasks);

registerMultiTask

grunt.registerMultiTask('cp_phpdemo','',function(){
    log( ' task ' + this.target + ' start......' );
    var config   = this.data;
    var source   = grunt.file.expand( this.data.src );
    var dest     = this.data.dest;
    if( source && source.length > 0 ){

        source.forEach( function( item ) {
            var filename = path.basename( item );
            copyfile( item, dest+filename );
        } );

    }
    log( ' task ' + this.target + ' end......' );
});

运行grunt任务

//  默认执行default任务
grunt
//  加载jsdoc所有任务配置,并且以每个配置去执行jsdoc任务
grunt jsdoc
//  指定使用dev的任务配置,并且以这个配置去执行jsdoc任务
grunt jsdoc:dev

© 著作权归作者所有

knightuniverse
粉丝 2
博文 39
码字总数 46366
作品 0
厦门
程序员
私信 提问
【转】有关 Grunt - 自动化构建工具的奇技淫巧

原文:https://segmentfault.com/a/1190000005029360?utmsource=tuicool&utmmedium=referral 之所以想写有关前端自动化工具的文章出于以下几个原因: 自动化构建工具对于前端开发的重要性:高...

iNiL0119
2016/11/04
155
0
【免费精选】从零基础到进阶,免费在线精选课程集合

如果你关注前端开发,本文收集了值得你关注的免费在线中文系列课程。纯干货,由业界前端专家精心设计。这些课程的内容浅显易懂,授课方式有视频,也有小任务实战推进的学习方式。边学边练,摆...

曾经灬静默者
2014/07/09
9.3K
18
史上最全的前端资源大汇总

1.前言 最近有很多朋友问我有没有相关的书籍推荐,希望能够自学一下前端。 正好最近在查阅文章的时候,发现有朋友已经进行过总结。 经过沟通和“行贿”��,终于取得转载权利,在此感谢晚晴...

mr_lp
2017/01/13
0
0
CodingMr.Zhou/Peer-To-Peer

#怎么把项目在本地跑起来? 纠结了很久,考虑到各方面的因素,我决定抛弃!改用,相信我,这样写起代码来,真的很爽! ##先啰嗦几句## 不得不说,react.js + Flux 的编程方式上手也许有点困难...

CodingMr.Zhou
2015/06/22
0
0
前端工程化之路(一)基于Yeoman:Yo+grunt/gulp+bower 搭建前端工程

转载请加说明:http://my.oschina.net/panpcui/blog/671921 ,谢谢 引言 现今,越来越多的前端集成开发工具涌现,个人觉得特别有必要让前端开发更规范、更系统、更高效。规范:让前端开发的编...

小小实习生
2016/05/09
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

32位与64位Linux系统下各类型长度对比

64 位的优点:64 位的应用程序可以直接访问 4EB 的内存和文件大小最大达到4 EB(2 的 63 次幂);可以访问大型数据库。本文介绍的是64位下C语言开发程序注意事项。 1. 32 位和 64 位C数据类型...

mskk
20分钟前
6
0
Vue 实现点击空白处隐藏某节点(三种方式:指令、普通、遮罩)

在项目中往往会有这样的需求: 弹出框(或Popover)在 show 后,点击空白处可以将其 hide。 针对此需求,整理了三种实现方式,大家按实际情况选择。 当然,我们做项目肯定会用到 UI 框架,常...

张兴华ZHero
27分钟前
7
0
SpringBoot激活profiles你知道几种方式?

多环境是最常见的配置隔离方式之一,可以根据不同的运行环境提供不同的配置信息来应对不同的业务场景,在SpringBoot内支持了多种配置隔离的方式,可以激活单个或者多个配置文件。 激活Profi...

恒宇少年
29分钟前
7
0
PDF修改文字的方法有哪些?怎么修改PDF文件中的文字

PDF修改文字一直以来都是一个难以解决的问题,很多的办公族在办公的时候会有修改PDF文件中的文字的需要,可是PDF文件一般是不能进行编辑和修改的,难道就没有什么办法解决这个问题了嘛?不要...

趣味办公社
32分钟前
5
0
企业组织中采用服务网格的挑战

作者:Christian Posta 译者:罗广明 原文:https://blog.christianposta.com/challenges-of-adopting-service-mesh-in-enterprise-organizations/ 编者按 本文作者介绍了企业组织采用服务网...

jimmysong
41分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部