GruntJS构建Web程序。使用Gruntjs来搭建一个前端项目,然后使用grunt合并,压缩JS文件,熟练了node.js安装和grunt.js安装后,接下来来实战一个案例,案例是根据snandy大神的案例完成的,记录加深印象,mark

一、安装node.js、grunt

node.js 安装、图文详解学习笔记--Grunt、安装、图文详解 或是参考snandy大神的博客使用GruntJS构建Web程序 (1)

二、项目步骤

  1. 新建项目Bejs
  2. 新建文件package.json
  3. 新建文件Gruntfile.js
  4. 命令行执行grunt任务

三、新建项目Bejs

d盘新建node根目录,然后再新建Bejs项目目录,Bejs下新建src文件,里面2个js,内容随意

四、新建package.json

package.json放在根目录下,它包含了该项目的一些元信息,如项目名称、描述、版本号,依赖包等。它应该和源码一样被提交到svn或git。package.json内容需符合JSON语法规范,如下

 {
"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"
}
}

学习笔记--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目录下多了node_modules文件夹

五、新建文件Gruntfile.js

Gruntfile.js也是放在项目根目录下,几乎所有的任务都定义在该文件中,它就是一个普通的js文件,里面可以写任意js代码而不仅局限于JSON。和package.json一样它也要和源码一样被提交到svn或git。

Gruntfile.js由以下内容组成

  1. wrapper函数,结构如下,这是Node.js的典型写法,使用exports公开API
  2. 项目和任务配置
  3. 载入grunt插件和任务
  4. 定制执行任务

示例完成以下任务

  1. 合并src下的文件(ajax.js/selector.js)为domop.js
  2. 压缩domop.js为domop.min.js
  3. 这两个文件都放在dest目录下

最终的Gruntfile.js如下

 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

打印成功,Bejs项目目录下多了dest文件夹,domop.js、domop.min.js

七、测试Demo

src增加其他js文件

然后打开命令行,进入到项目根目录,敲 grunt

执行成功

参考网站:http://www.cnblogs.com/snandy/archive/2013/03/11/2949177.html

实战案例--Grunt构建Web程序的更多相关文章

  1. 使用GruntJS构建Web程序

    Gruntjs是JavaScript项目的构建工具,也是基于node的一个命令行工具.很多开源JS项目都是使用它搭建.如jQuery.Qunit.CanJS等.它有以下作用 合并JS文件 压缩JS文件 ...

  2. .Net Redis实战——使用Redis构建Web应用

    示例介绍 示例1:借助Redis实现购物车功能 示例2:Redis实现网页缓存和数据缓存 借助Redis实现购物车功能 每个用户的购物车都是一个散列,散列存储了商品ID与商品订购数量之间的映射.订购商 ...

  3. redis实战笔记(2)-第2章 使用 Redis构建Web应用

    第2章 使用 Redis构建Web应用 本章主要内容   1.登录cookie 2.购物车cookie 3.缓存生成的网页 4.缓存数据库行 5.分析网页访问记录   本章的所有内容都是围绕着发现并解 ...

  4. 如何在Visual Studio 2017中使用C# 7+语法 构建NetCore应用框架之实战篇(二):BitAdminCore框架定位及架构 构建NetCore应用框架之实战篇系列 构建NetCore应用框架之实战篇(一):什么是框架,如何设计一个框架 NetCore入门篇:(十二)在IIS中部署Net Core程序

    如何在Visual Studio 2017中使用C# 7+语法   前言 之前不知看过哪位前辈的博文有点印象C# 7控制台开始支持执行异步方法,然后闲来无事,搞着,搞着没搞出来,然后就写了这篇博文,不 ...

  5. ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bower开发Web程序

    基于Visual Studio 2015,你可以: 方便的管理前端包,如jQuery, Bootstrap, 或Angular. 自动运行任务,如LESS.JavaScript压缩.JSLint.Ja ...

  6. Node.js高级编程读书笔记 - 4 构建Web应用程序

    Outline 5 构建Web应用程序 5.1 构建和使用HTTP中间件 5.2 用Express.js创建Web应用程序 5.3 使用Socket.IO创建通用的实时Web应用程序 5 构建Web应 ...

  7. 使用ASP.NET 构建 Web 应用程序快速入门-8小时的免费培训视频

    - Scott Hanselman的中文博客[转载] [原文发表地址] Building Web Apps with ASP.NET Jump Start - 8 Hours of FREE Trai ...

  8. 通过Web Api 和 Angular.js 构建单页面的web 程序

    通过Web Api 和 Angular.js 构建单页面的web 程序 在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的 ...

  9. 使用Flex构建Web和移动参考应用程序

    范例文件 Shopping Cart Sales Dashboard Expense Tracker 需要的其他产品 Android 2.2及更高版本或Android 3.0及更高版本的设备 仅仅在F ...

随机推荐

  1. DailyWallpaper v1.02 released

    上次忘了写软件说明,先补上一个. 软件说明: 每天定时(暂定上午11点)下载美国国家地理网站的photo of the day图片作为桌面壁纸.下载图片会以日期为名称保存在C:\DailyWallpa ...

  2. 《shell条件测试语句,字符串测试apache是否开启》

    还得我想了10分钟才明白”!=“和"-n"的用法区别,做个笔记捋一捋 第一种方法:测试apache是否开启?字符串测试 #!/bin/bash web=`/usr/bin/pgre ...

  3. ADO.NET笔记——使用Command执行增删改操作,通过判断ExecuteNonQuery()返回值检查是否操作成功

    相关知识: ExecuteNonQuery()方法:执行CommandText属性所制定的操作,返回受影响的记录条数.该方法一般用来执行SQL中的UPDATE.INSERT和DELETE等操作 对于U ...

  4. 如何设置fedora默认从命令行启动?

    Sumary:因为在fedora中没有/etc/initab文件我们不方便从这里设置它的runlevel target,但是linux又给我们提供了一个强悍的工具systemd,我们可以用system ...

  5. mina socket底层主流程源码实现

    一,mina的架构 mina 架构可以大致分为三部分,ioService ,ioFilterChain , IoHandler   ioService:用于接受服务或者连接服务,例如socket 接收 ...

  6. RHEL7 Ansible

    [root@promote tt]# rpm -iUvh http://dl.Fedoraproject.org/pub/epel/7/x86_64/e/epel-release-7-8.noarch ...

  7. PHP实现链式操作的原理

    在一个类中有多个方法,当你实例化这个类,并调用方法时只能一个一个调用,类似: db.php <?php class db{ public function where() { //code he ...

  8. node.js和socket.io纯js实现的即时通讯实例分享

    在这个例子中,其实node.js并没有真正起到服务器的作用,因为我们这里可以直接运行client.html文件,而不用输入url请求,当 然,要想输入url请求页面内容还需要加入请求静态文件的代码.这 ...

  9. openerp模块收藏 auto_setup 自动帮你完成建新库时必做几个操作(转载)

    auto_setup 自动帮你完成建新库时必做几个操作 原文:http://shine-it.net/index.php/topic,6777.0.html 模块地址: https://github. ...

  10. 从new Function创建函数联想到MVC模式

    我们知道任何一个自定义函数都是Function构造器的实例,所以我们可以通过new Function的方式来创建函数,使用语法很简单, new Function(形参1, 形参2, ..., 形参N, ...