<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<head><meta forua="true" http-equiv="Cache-Control" content="max-age=0" /></head>
<card title="Web前端构建工具 GruntJS构建Web程序 (2)" id="card1">
<p> 游客</p><p>
标题:Web前端构建工具 GruntJS构建Web程序 (2)<br/>
正文:<br/>
前一篇记录了Grunt的安装，这篇介绍下怎么使用Gruntjs来搭建一个前端项目，然后使用grunt合并，压缩JS文件。大概有如下步骤    新建项目Bejs    新建文件package.json    新建文件Gruntfile.js    命令行执行grunt任务 一、新建项目Bejs源码放在src下，该目录有两个js文件，selector.js和ajax.js。编译后代码放在dest，这个grunt会自动生成。 二、新建package.jsonpackage.json放在根目录下，它包含了该项目的一些元信息，如项目名称、描述、版本号，依赖包等。它应该和源码一样被提交到svn或git。 现在的项目结构如下package.json内容需符合JSON语法规范，如下{  &amp;quot;name&amp;quot;: &amp;quot;Bejs&amp;quot;,  &amp;quot;version&amp;quot;: &amp;quot;0.1.0&amp;quot;,  &amp;quot;devDependencies&amp;quot;: {    &amp;quot;grunt&amp;quot;: &amp;quot;~0.4.0&amp;quot;,  // 请与你本地按照的版本号对应(cmd&amp;gt;grunt -version)。下边同样的。    &amp;quot;grunt-contrib-jshint&amp;quot;: &amp;quot;~0.1.1&amp;quot;,     &amp;quot;grunt-contrib-uglify&amp;quot;: &amp;quot;~0.1.2&amp;quot;,    &amp;quot;grunt-contrib-concat&amp;quot;: &amp;quot;~0.1.1&amp;quot;  }}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_mod<br/><a href="http://camnpr.com/wap.asp?mode=WAP&amp;act=View&amp;id=1069&amp;Page=1">[&lt;&lt;]</a><a href="http://camnpr.com/wap.asp?mode=WAP&amp;act=View&amp;id=1069&amp;Page=1">[[1]]</a><a href="http://camnpr.com/wap.asp?mode=WAP&amp;act=View&amp;id=1069&amp;Page=2">[2]</a><a href="http://camnpr.com/wap.asp?mode=WAP&amp;act=View&amp;id=1069&amp;Page=3">[3]</a><a href="http://camnpr.com/wap.asp?mode=WAP&amp;act=View&amp;id=1069&amp;Page=3">[&gt;&gt;]</a><br/>
<br/>
<a href="wap.asp?act=Com&amp;id=1069">查看评论(0)</a><br/>
<a href="wap.asp?act=AddCom&amp;inpId=1069">发表评论</a><br/><br/>

<br/>

<br/>
<a href="http://camnpr.com/wap.asp">首页</a>
</p>
</card>
</wml>