http://www.cnblogs.com/snandy/archive/2013/03/11/2949177.html
前一篇记录了Grunt的安装,这篇介绍下怎么使用Gruntjs来搭建一个前端项目,然后使用grunt合并,压缩JS文件。
大概有如下步骤
- 新建项目Bejs
- 新建文件package.json
- 新建文件Gruntfile.js
- 命令行执行grunt任务
一、新建项目Bejs
源码放在src下,该目录有两个js文件,selector.js和ajax.js。编译后代码放在dest,这个grunt会自动生成。
二、新建package.json
package.json放在根目录下,它包含了该项目的一些元信息,如项目名称、描述、版本号,依赖包等。它应该和源码一样被提交到svn或git。 现在的项目结构如下
package.json内容需符合JSON语法规范,如下
1
2
3
4
5
6
7
8
9
10
|
{ "name" : "Bejs" ,
"version" : "0.1.0" ,
"devDependencies" : {
"grunt" : "~0.4.0" ,
"grunt-contrib-jshint" : "~0.1.1" ,
"grunt-contrib-uglify" : "~0.1.2" ,
"grunt-contrib-concat" : "~0.1.1"
}
} |
devDependencies中的grunt在前一篇已经安装了,grunt-contrib-jshint/grunt-contrib-uglify/grunt-contrib-concat则没有安装。三个分别对于三个任务(task)
- grunt-contrib-jshint js语法检查
- grunt-contrib-uglify 压缩,采用UglifyJS
- grunt-contrib-concat 合并文件
此时,打开命令行工具进入到项目根目录,敲如下命令: npm install
再查看根目录,发现多了个node_modules目录,包含了四个子目录,见图
三、新建文件Gruntfile.js
Gruntfile.js也是放在项目根目录下,几乎所有的任务都定义在该文件中,它就是一个普通的js文件,里面可以写任意js代码而不仅局限于JSON。和package.json一样它也要和源码一样被提交到svn或git。
Gruntfile.js由以下内容组成
- wrapper函数,结构如下,这是Node.js的典型写法,使用exports公开API
123
module.exports =
function
(grunt) {
// Do grunt-related things in here
};
- 项目和任务配置
- 载入grunt插件和任务
- 定制执行任务
该示例完成以下任务
- 合并src下的文件(ajax.js/selector.js)为domop.js
- 压缩domop.js为domop.min.js
- 这两个文件都放在dest目录下
最终的Gruntfile.js如下
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
|
module.exports = function (grunt) {
// 配置
grunt.initConfig({
pkg : grunt.file.readJSON( 'package.json' ),
concat : {
domop : {
src: [ 'src/ajax.js' , 'src/selector.js' ],
dest: 'dest/domop.js'
}
},
uglify : {
options : {
banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build : {
src : 'dest/domop.js' ,
dest : 'dest/domop.min.js'
}
}
});
// 载入concat和uglify插件,分别对于合并和压缩
grunt.loadNpmTasks( 'grunt-contrib-concat' );
grunt.loadNpmTasks( 'grunt-contrib-uglify' );
// 注册任务
grunt.registerTask( 'default' , [ 'concat' , 'uglify' ]);
}; |
四、执行grunt任务
打开命令行,进入到项目根目录,敲 grunt
从打印信息看出成功的合并和压缩并生成了dest目录及期望的文件,这时的项目目录下多了dest,如下
ok,这里介绍了2个常见任务concat和uglify,jshint等没有介绍。Gruntfile.js里的代码也没有一一解读,感兴趣的同学可在gruntjs的官方文档找到。
相关推荐
在本文中,我们将深入探讨如何使用GruntJS构建Web应用程序,特别关注构建流程。GruntJS是一个基于Node.js的任务运行器,它可以帮助开发者自动化重复性的前端工作,如编译、测试、压缩等。 首先,创建一个新的项目名...
如何自定义Grunt任务 有时我们需要写一些自己的grunt任务,下面是一个具体例子 一、准备 1. 新建一个目录g12. 新建package.json,放入g13. 新建Gruntfile.js,放入g1 package.json ...4. cd进入g1,npm insta
在构建Web程序的过程中,资源的合并和压缩是至关重要的步骤,不仅能够优化加载速度,...使用GruntJS构建Web程序,可以大幅简化前端资源管理流程,使得开发者可以更加专注于业务逻辑的实现,而不是繁琐的资源处理工作。
在当今快速发展的Web开发领域,自动化构建工具是现代开发流程中不可或缺的一部分。GruntJS作为一个广泛使用的...以上便是使用GruntJS构建Web程序之安装篇的核心知识点,希望对你在使用GruntJS的过程中有所帮助。
这个项目是一个基于的 web 应用程序框架 种子包含一个示例 AngularJS 应用程序,并预先配置为安装 Angular 框架和一堆开发和测试工具。 它还使用来: 加载不同环境的属性文件; 将依赖项从 bower_components 复制...
"gruntjs-hello-world"项目展示了如何结合GruntJS和ExpressJS来构建一个简单的web应用。通过Grunt自动化构建流程,可以轻松地管理和运行Express应用,提高开发效率。对于初学者,这是一个很好的起点,可以深入学习两...
它还使用 GruntJS 来构建生产就绪的 JavaScript - 所以确保 GruntJS 也安装在你的机器上。 获得这些依赖项后,请按照简单的说明进行操作: cd进入这个目录并npm install 运行node app.js cd进入grunt和npm install ...
用于创建和完成课程评估的单页 Web 应用程序 这狗屎被检查 RuCourseEvalutor 是一个很棒的评估服务器程序,由 Gunnar Karl Pálmason Stefán Ingi Daníelsson Guðjón Pétursson Ólafur Jónsson Git-...
该项目将源代码文件夹(默认为src )转换为可以在开发或生产模式下运行的 Web 应用程序。 入门 这个插件需要 Grunt ~0.4.5 。 默认的 Karma 插件需要 NodeJS 0.12 。 如果您以前没有使用过 ,请务必查看指南,因为...
使用 ExpressJS 4、MongoDB/Mongoose、Passport.js 身份验证、Jade 和 GruntJS 作为任务自动化构建轻量级 Bootstrap NodeJS 应用程序 安装 先决条件 Node.js - 使用 (节点版本管理器)下载并安装 Node.js - 管理多...
构建GruntJS任务 GruntJS是一个JavaScript Task Runner,有许多插件可以帮助您使项目从开发到生产。 我创建了一个grunt文件,包含min css和javascript,更改html链接,部署到服务器。 如何运行GruntJS? 首先,您...
#Angular-Blu-Print Angular Blu-Print 是一个简单的起点,可以在几分钟内启动并运行任何 Angular Web 应用程序。 它整合了其他开源项目,包括通过 BowerJS 维护的 Bootstrap、jQuery 和 Animate.css。 还实现了 ...
Node.js作为一个强大的...这些工具和框架的使用,可以帮助开发者构建健壮、高效且易于维护的Node.js应用程序,无论是小型项目还是大型企业级应用都能游刃有余。了解和掌握这些工具,将极大提升你的Node.js开发能力。