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. POJ 2287 Tian Ji -- The Horse Racing(贪心)

    题意:田忌和齐王有n匹马,进行n局比赛,每局比赛输者给胜者200,问田忌最多能得多少钱. 分析:如果田忌最下等的马比齐王最下等的马好,是没必要拿最下等的马和齐王最好的马比的.(最上等马同理) 因此,如 ...

  2. Data truncated for column 错误

    今天插入mysql数据数据时,报错Data truncated for column.研究了一下原理是我数据的长途超出了该字段的最大长度,所以解决办法很简单,就是修改数据库中字段属性,使其长度增加即可 ...

  3. Linux下OpenCV的环境搭建

    OpenCV is the most popular and advanced code library for Computer Vision related applications today, ...

  4. (转)HTML5游戏如何挣钱?2条经验让你每款赚3万刀

    原文作者:Alexander Krug,是世界上最大的HTML5游戏平台的运营商SOFTGAMES的CEO. 现今苹果App Store当中的应用数量可以以海量来形容,最新发布的应用对排行榜的冲击力也 ...

  5. 批处理cmd背景颜色

    Pause  Echo 其他提示语 & pause > nul     pause暂停 COLOR 设置默认的控制台前景和背景颜色. COLOR [attr] attr 指定控制台输出的 ...

  6. nginx 日志管理

    日志管理 我们观察nginx的server段,可以看到如下类似信息 #access_log  logs/host.access.log  main; 这说明 该server, 它的访问日志的文件是  ...

  7. 【转】让iframe在iOS设备手机浏览器上支持滚动

    HTML代码 在使用IFRAME或者其他HTML元素时,你需要使用一个元素(如DIV)来包装他们: <div class="scroll-wrapper"> <i ...

  8. Android砖机救活(索爱MT15i)

    前言 接触Android时间长了就想编译一套属于自己的系统,摘取不必要的那些组件,然后刷到手机上,俗话说的好,“常在河 边走,哪有不湿鞋”.果不其然,刷完自己编译的系统手机变砖了,具体情况为 开不开机 ...

  9. zip生成

    生成zip文件官方网站:http://www.phpconcept.net/pclzip/ 用法一: 1 <?php 2     include_once('pclzip.lib.php'); ...

  10. Linux之父访谈录:设计内核只为了好玩

    2010-09-20 10:36 “有 些人生来就具有统率百万人的领袖风范;另一些人则是为写出颠覆世界的软件而生.唯一一个能同时做到这两 者的人,就是Linus Torvalds.”这是美国<时 ...